Freigeben über

Stilgestaltung für den Fokus in Steuerelementen und Fokusvisualstil

Windows Presentation Foundation (WPF) bietet zwei parallele Mechanismen zum Ändern der visuellen Darstellung eines Steuerelements, wenn es den Tastaturfokus erhält. Der erste Mechanismus besteht darin, Eigenschaftensetzer für Eigenschaften wie zum Beispiel IsKeyboardFocused innerhalb der Formatvorlage oder Vorlage zu verwenden, die auf das Steuerelement angewendet wird. Der zweite Mechanismus besteht darin, eine separate Formatvorlage als Wert der FocusVisualStyle-Eigenschaft bereitzustellen. Die "Fokus-visuelle Formatvorlage" erstellt eine separate visuelle Struktur für einen Adorner, der auf dem Steuerelement zeichnet, anstatt die visuelle Struktur des Steuerelements oder eines anderen UI-Elements durch Ersetzung zu ändern. In diesem Thema werden die Szenarien erläutert, in denen die einzelnen Mechanismen geeignet sind.

Zweck des visuellen Fokusstils

Das Feature für visuelle Fokusstile bietet ein allgemeines "Objektmodell", um visuelles Benutzerfeedback basierend auf der Tastaturnavigation auf ein beliebiges UI-Element einzuführen. Dies ist möglich, ohne eine neue Vorlage auf das Steuerelement anzuwenden oder die spezifische Vorlagenkomposition zu kennen.

Da das Feature für visuelle Fokusstile jedoch funktioniert, ohne die Steuerelementvorlagen zu kennen, ist das visuelle Feedback, das für ein Steuerelement mit einem visuellen Fokusformat angezeigt werden kann, notwendigerweise eingeschränkt. Was das Feature tatsächlich tut, besteht darin, eine andere visuelle Struktur (einen Adorner) über der vom Rendern eines Steuerelements mittels seiner Vorlage erstellten visuellen Struktur zu überlagern. Sie definieren diesen separaten visuellen Baum mithilfe eines Stils, der die FocusVisualStyle Eigenschaft ausfüllt.

Standardverhalten der visuellen Fokusformatvorlage

Visuelle Fokusformatvorlagen werden nur angewandt, wenn die Fokusaktion durch die Tastatur ausgelöst wurde. Jede Mausaktion oder programmgesteuerte Fokusänderung deaktiviert den Modus für visuelle Fokusformate. Weitere Informationen zu den Unterschieden zwischen Fokusmodi finden Sie in der Fokusübersicht.

Die Themen für Steuerelemente enthalten ein Standardverhalten des visuellen Fokusstils, das zum visuellen Fokusstil für alle Steuerelemente im Thema wird. Diese Designart wird durch den Wert des statischen Schlüssels FocusVisualStyleKey identifiziert. Wenn Sie Ihren eigenen visuellen Darstellungsstil auf der Anwendungsebene erklären, ersetzen Sie dieses Standardstilverhalten aus den Themen. Wenn Sie das gesamte Design definieren, sollten Sie denselben Schlüssel verwenden, um den Stil für die Voreinstellungen Ihres gesamten Designs zu definieren.

In den Designs ist der standardmäßige visuelle Fokusstil im Allgemeinen sehr einfach. Es folgt eine grobe Annäherung:

<Style x:Key="{x:Static SystemParameters.FocusVisualStyleKey}">
  <Setter Property="Control.Template">
    <Setter.Value>
      <ControlTemplate>
        <Rectangle StrokeThickness="1"
          Stroke="Black"
          StrokeDashArray="1 2"
          SnapsToDevicePixels="true"/>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Wann sollte man Fokusvisuelle Stile verwenden

Konzeptionell sollte das Erscheinungsbild visueller Fokusstile, die auf Steuerelemente angewendet werden, von Steuerelement zu Steuerelement kohärent sein. Eine Möglichkeit, die Kohärenz zu gewährleisten, besteht darin, den Fokus-Visualstil nur zu ändern, wenn Sie ein vollständiges Thema erstellen, wobei jedes Steuerelement, das im Thema definiert ist, entweder denselben Fokus-Visualstil erhält oder eine Variation einer Formatvorlage, die visuell zwischen den Steuerelementen verknüpft ist. Alternativ können Sie die gleiche Formatvorlage (oder ähnliche Formatvorlagen) verwenden, um jedes tastaturfokussierbare Element auf einer Seite oder in einer Benutzeroberfläche zu formatieren.

Das Festlegen von FocusVisualStyle auf einzelne Steuerelementstile, die nicht Teil eines Designs sind, ist nicht die beabsichtigte Verwendung von Fokusvisualisierungsstilen. Dies liegt daran, dass ein inkonsistentes visuelles Verhalten zwischen Steuerelementen zu einer verwirrenden Benutzererfahrung im Hinblick auf den Tastaturfokus führen kann. Wenn Sie steuerelementspezifische Verhaltensweisen für den Tastaturfokus beabsichtigen, die bewusst nicht über ein Design hinweg einheitlich sind, ist ein wesentlich besserer Ansatz die Verwendung von Triggern in Stilen für einzelne Eingabezustandseigenschaften, z. B. IsFocused oder IsKeyboardFocused.

Visuelle Fokusstile wirken ausschließlich auf den Tastaturfokus. Visuelle Fokusdesigns sind eine Art von Barrierefreiheitseigenschaft. Wenn Sie UI-Änderungen für einen beliebigen Fokustyp wünschen, sei es über Maus, Tastatur oder programmgesteuert, sollten Sie keine visuellen Fokus-Stile verwenden und stattdessen Setter und Trigger in Stilen oder Templates verwenden, die sich an den Werten allgemeiner Fokuseigenschaften wie IsFocused oder IsKeyboardFocusWithin orientieren.

So erstellen Sie einen Fokus-Visualstil

Der Stil, den Sie für eine visuelle Fokusgestaltung erstellen, sollte immer das TargetType von Control haben. Der Stil sollte hauptsächlich aus einem ControlTemplate bestehen. Sie geben nicht an, dass der Zieltyp der Typ ist, dem die visuelle Fokusformatvorlage FocusVisualStyle zugewiesen ist.

Da der Zieltyp immer Control ist, müssen Sie durch die Verwendung von Eigenschaften formatieren, die allen Steuerelementen gemeinsam sind (mithilfe der Eigenschaften der Control Klasse und ihrer Basisklassen). Sie sollten eine Vorlage erstellen, die ordnungsgemäß als Überlagerung für ein UI-Element funktioniert und die funktionsbezogene Bereiche des Steuerelements nicht verdeckt. Im Allgemeinen bedeutet dies, dass das visuelle Feedback außerhalb der Steuerelementränder oder als temporäre oder unauffällige Effekte angezeigt werden soll, die die Treffertests für das Steuerelement, auf das der visuelle Fokusstil angewendet wird, nicht blockieren. Eigenschaften, die Sie in der Vorlagenbindung verwenden können und die für die Bestimmung der Größe und Positionierung Ihrer Überlagerungsvorlage nützlich sind, umfassen ActualHeight, ActualWidth, Margin und Padding.

Alternativen zur Verwendung einer visuellen Fokusgestaltung

In Situationen, in denen die Verwendung eines visuellen Fokusstils nicht geeignet ist, weil Sie nur einzelne Steuerelemente formatieren oder eine größere Kontrolle über die Steuerelementvorlage wünschen, gibt es viele weitere barrierefreie Eigenschaften und Techniken, die als Reaktion auf Änderungen des Fokus visuelles Verhalten erstellen können.

Trigger, Setter und Ereignissetter werden im Stil und Vorlagen ausführlich erläutert. Die Routingereignisbehandlung wird in der Übersicht über Routingereignisse erläutert.

IstTastaturFokussiert

Wenn Sie sich speziell für den Tastaturfokus interessieren, kann die IsKeyboardFocused Abhängigkeitseigenschaft für eine Eigenschaft Triggerverwendet werden. Ein Eigenschaftsauslöser in einer Formatvorlage oder Vorlage ist eine geeignetere Technik zum Definieren eines Tastaturfokusverhaltens, das sehr speziell für ein einzelnes Steuerelement bestimmt ist und das möglicherweise nicht visuell mit dem Tastaturfokusverhalten für andere Steuerelemente übereinstimmt.

Eine weitere ähnliche Abhängigkeitseigenschaft ist IsKeyboardFocusWithin, die möglicherweise geeignet ist, um zu verwenden, wenn Sie visuell darauf hinweisen möchten, dass sich der Tastaturfokus irgendwo innerhalb des Kompositings oder innerhalb des Funktionsbereichs des Steuerelements befindet. Beispielsweise können Sie einen IsKeyboardFocusWithin Trigger so platzieren, dass ein Panel, das mehrere Steuerelemente gruppiert, unterschiedlich angezeigt wird, auch wenn sich der Tastaturfokus möglicherweise genauer auf einem einzelnen Element innerhalb dieses Bereichs befindet.

Sie können auch die Ereignisse GotKeyboardFocus und LostKeyboardFocus (sowie deren Preview-Entsprechungen) verwenden. Sie können diese Ereignisse als Grundlage für ein EventSetterEreignis verwenden oder Handler für die Ereignisse im CodeBehind schreiben.

Weitere Fokuseigenschaften

Wenn Sie alle möglichen Ursachen für den Wechsel des Fokus zu einem visuellen Verhalten haben möchten, sollten Sie einen Setter oder Trigger auf der IsFocused Abhängigkeitseigenschaft oder alternativ auf den GotFocus für LostFocus ein EventSetterObjekt verwendeten Ereignissen basieren.

Siehe auch

  • Last updated on