Formatieren für Fokus in Steuerelementen und FocusVisualStyle

Artikel
12/18/2024

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 IsKeyboardFocused innerhalb der Vorlage zu verwenden, die auf das Steuerelement angewendet werden. Der zweite Mechanismus besteht darin, einen separaten Stil als Wert der FocusVisualStyle-Eigenschaft bereitzustellen; Der "Fokus-Visualstil" erstellt eine separate visuelle Struktur für einen Adorner, der über dem Steuerelement zeichnet, anstatt die visuelle Struktur des Steuerelements oder eines anderen UI-Elements zu verändern, indem es ersetzt wird. 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 (ein Adorner) über der visuellen Struktur zu platzieren, die durch das Rendering eines Steuerelements über seine Vorlage erstellt wurde. Sie definieren diesen separaten visuellen Baum mithilfe einer Formatvorlage, die der FocusVisualStyle-Eigenschaft einen Wert zuweist.

Standardverhalten des visuellen Fokus-Stils

Visuelle Fokus-Stile wirken nur dann, wenn die Fokusaktion von der Tastatur initiiert wurde. Jede Mausaktion oder programmgesteuerte Fokusänderung deaktiviert den Modus für visuelle Fokusformate. Weitere Informationen zu den Unterschieden zwischen Fokusmodi finden Sie unter Fokusübersicht.

Die Designs für Steuerelemente enthalten ein standardmäßiges visuelles Fokusstilverhalten, das zum visuellen Fokusstil für alle Steuerelemente im Design wird. Diese Designformatvorlage wird durch den Wert des statischen Schlüssels FocusVisualStyleKeyidentifiziert. Wenn Sie Ihren eigenen visuellen Fokusstil auf Anwendungsebene deklarieren, ersetzen Sie dieses Standardstilverhalten aus den Designs. Alternativ, wenn Sie das gesamte Design definieren, sollten Sie denselben Schlüssel verwenden, um den Stil für das Standardverhalten Ihres gesamten Designs zu definieren.

In den Themen 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 man visuelle Fokus-Styles verwendet

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 visuellen Fokusstil nur zu ändern, wenn Sie ein gesamtes Thema erstellen, wobei jedes Steuerelement, das innerhalb des Themas definiert ist, entweder denselben visuellen Fokusstil erhält oder eine Variation eines Stils, das visuell von Steuerelement zu Steuerelement zusammenhängt. Alternativ können Sie denselben Stil (oder ähnliche Stile) verwenden, um alle per Tastatur fokussierbaren Elemente auf einer Seite oder in einer Benutzeroberfläche zu gestalten.

Das Festlegen FocusVisualStyle für einzelne Steuerelementformatvorlagen, die nicht Teil eines Designs sind, ist nicht die beabsichtigte Verwendung visueller Fokusformatvorlagen. Dies liegt daran, dass ein inkonsistentes visuelles Verhalten zwischen Steuerelementen zu einer verwirrenden Benutzererfahrung im Hinblick auf den Tastaturfokus führen kann. Wenn Sie spezifische Verhaltensweisen für den Tastaturfokus beabsichtigen, die bewusst nicht über ein Thema hinweg einheitlich sind, ist es ein viel besserer Ansatz, Trigger in Stilen für individuelle Eigenschaften von Eingabestatus wie IsFocused oder IsKeyboardFocusedzu verwenden.

Visuelle Fokusformatvorlagen dienen ausschließlich dem Tastaturfokus. Visuelle Fokus-Stile sind eine Art von Barrierefreiheitsfunktion. Wenn Sie UI-Änderungen für einen beliebigen Fokustyp wünschen, sei es über Maus, Tastatur oder programmgesteuert, sollten Sie keine Fokus-Visualisierungsstile verwenden und stattdessen Setter und Trigger in Stilen oder Vorlagen verwenden, die vom Wert allgemeiner Fokuseigenschaften wie IsFocused oder IsKeyboardFocusWithinarbeiten.

So erstellen Sie einen visuellen Fokusstil

Die Formatvorlage, die Sie für einen Fokus-Visualstil erstellen, sollte immer das TargetType von Controlenthalten. Die Formatvorlage sollte hauptsächlich aus einer ControlTemplatebestehen. Sie geben nicht den Zieltyp an, der der Typ ist, dem der visuelle Fokusstil von FocusVisualStylezugewiesen wird.

Da der Zieltyp immer Controlist, müssen Sie stylen, indem Sie Eigenschaften verwenden, die allen Steuerelementen gemeinsam sind, indem Sie Eigenschaften der Control-Klasse und ihrer Basisklassen nutzen. Man sollte eine Vorlage erstellen, die richtig als Überlagerung für ein UI-Element funktioniert und die funktionalen 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 nützlich sind, um die Größe und Positionierung Ihrer Überlagerungsvorlage zu bestimmen, umfassen ActualHeight, ActualWidth, Marginund Padding.

Alternativen zur Verwendung eines visuellen Fokusstils

In Situationen, in denen die Verwendung eines visuellen Fokusstils nicht geeignet ist, entweder weil Sie nur einzelne Steuerelemente formatieren oder eine größere Kontrolle über die Steuerelementvorlage wünschen, gibt es viele weitere zugängliche Eigenschaften und Techniken, die auf Fokusänderungen reagieren und visuelles Verhalten erzeugen können.

Trigger, Setter und Ereignissetter werden in Stilgestaltung und Templatingausführlich erläutert. Die Routingereignisbehandlung wird in Übersicht über Routingereignisseerlä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 einem Stil oder einer Vorlage ist eine geeignetere Technik, um ein Tastaturfokusverhalten zu definieren, das speziell für ein einzelnes Steuerelement bestimmt ist und möglicherweise nicht visuell mit dem Tastaturfokusverhalten anderer Steuerelemente übereinstimmt.

Eine weitere ähnliche Abhängigkeitseigenschaft ist IsKeyboardFocusWithin, die möglicherweise verwendet werden kann, wenn Sie visuell hervorheben möchten, dass sich der Tastaturfokus irgendwo innerhalb der Zusammenstellung 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, selbst wenn der Tastaturfokus möglicherweise genauer auf ein einzelnes Element innerhalb dieses Panels gerichtet ist.

Sie können auch die Ereignisse GotKeyboardFocus und LostKeyboardFocus (sowie ihre Vorschauvarianten) verwenden. Sie können diese Ereignisse als Grundlage für eine EventSetterverwenden oder Handler für die Ereignisse im CodeBehind schreiben.

Weitere Fokuseigenschaften

Wenn Sie möchten, dass alle möglichen Ursachen für das Ändern des Fokus ein visuelles Verhalten erzeugen, sollten Sie einen Setter oder Trigger auf der IsFocused-Abhängigkeitseigenschaft oder alternativ auf den GotFocus- oder LostFocus-Ereignissen basieren, die für eine EventSetterverwendet werden.

Freigeben über