Reveal Focus

  • Artikel

hero image

Reveal Focus ist ein Lichteffekt für 10-Foot-Benutzeroberflächen, z. B. Gamekonsolen und Fernsehbildschirme. Sie animieren den Rahmen des fokussierbaren Elementes wie beispielsweise Schaltflächen, wenn der Benutzer den Fokus des Gamepad oder der Tastatur darauf lenken. Standardmäßig ist er deaktiviert, kann aber ganz einfach aktiviert werden.

Wichtige APIs: Application.FocusVisualKind-Eigenschaft, FocusVisualKind-Enumeration, Control.UseSystemFocusVisuals-Eigenschaft

Funktionsweise

Reveal Focus lenkt die Aufmerksamkeit auf Elemente mit dem Fokus, indem ein animiertes Leuchten um den Rahmen des Elements herum eingeblendet wird:

Reveal Visual

Dies ist besonders hilfreich in 10-Foot-Szenarien, bei denen sich der Benutzer vielleicht nicht auf den ganzen Fernsehbildschirm konzentriert.

Beispiele

WinUI 2-Katalog
WinUI Gallery

Wenn Sie die WinUI 2-Katalog-App installiert haben, klicken Sie hier, um die App zu öffnen und Reveal Focus in Aktion zu sehen.

Verwendung

Reveal Focus ist standardmäßig deaktiviert. Um es zu aktivieren:

  1. Rufen Sie im Konstruktor Ihrer App die Eigenschaft AnalyticsInfo.VersionInfo.DeviceFamily auf, und überprüfen Sie, ob Windows.Xbox die aktuelle Gerätefamilie ist.
  2. Wenn Windows.Xbox diese Gerätefamilie ist, legen Sie die Eigenschaft Application.FocusVisualKind auf FocusVisualKind.Reveal fest.
    if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
    {
        this.FocusVisualKind = FocusVisualKind.Reveal;
    }

Nachdem Sie die Eigenschaft FocusVisualKind festgelegt haben, wendet das System den Reveal Focus-Effekt automatisch auf alle Steuerelemente an, deren Eigenschaft UseSystemFocusVisuals auf True festgelegt ist (dem Standardwert für die meisten Steuerelemente).

Warum ist Reveal Focus standardmäßig nicht aktiviert?

Wie Sie sehen können, lässt sich Reveal Focus relativ einfach aktivieren, wenn die App erkennt, dass sie auf Xbox ausgeführt wird. Warum aktiviert das System die Funktion also nicht einfach automatisch? Reveal Focus vergrößert das visuelle Fokuselement, wodurch Probleme bei Ihrem UI-Layout entstehen können. In einigen Fällen möchten Sie den Reveal Focus-Effekt anpassen, um ihn für Ihre App zu optimieren.

Anpassen von Reveal Focus

Sie können den Reveal Focus-Effekt anpassen, indem Sie die visuellen Fokuseigenschaften für jedes Steuerelement ändern: FocusVisualPrimaryThickness, FocusVisualSecondaryThickness, FocusVisualPrimaryBrush und FocusVisualSecondaryBrush. Mit diesen Eigenschaften können Sie die Farbe und Stärke des Fokusrechtecks anpassen. (Dies sind dieselben Eigenschaften, die Sie zum Erstellen von visuellen Fokuselementen mit hoher Sichtbarkeit verwenden.)

Bevor Sie aber mit dem Anpassen beginnen, sollten Sie etwas mehr zu den Komponenten von Reveal Focus erfahren.

Die standardmäßigen visuellen Reveal Focus-Elemente bestehen aus drei Teilen: dem primären Rahmen, dem sekundären Rahmen und dem Reveal-Leuchteffekt. Der primäre Rahmen ist 2 Pixel breit und verläuft an der Außenseite des sekundären Rahmens. Der sekundäre Rahmen ist 1 Pixel breit und verläuft an der Innenseite des primären Rahmens. Der Reveal Focus-Leuchteffekt hat eine Stärke, die proportional zur Stärke des primären Rahmens ist, und er verläuft um die Außenseite des primären Rahmens.

Zusätzlich zu den statischen Elementen bieten visuelle Reveal Focus-Elemente ein animiertes Licht, das bei Stillstand pulsiert und sich in Richtung des Fokus bewegt, wenn er verschoben wird.

Reveal Focus layers

Anpassen der Rahmenstärke

Verwenden Sie diese Eigenschaften, um die Stärke der Rahmentypen für ein Steuerelement zu ändern:

Rahmentyp Eigenschaft
Primärer, Leuchteffekt FocusVisualPrimaryThickness
(Durch Ändern des primären Rahmens wird die Stärke des Leuchteffekts proportional geändert.)
Secondary FocusVisualSecondaryThickness

In diesem Beispiel wird die Rahmenstärke des visuellen Fokuselements für eine Schaltfläche geändert:

<Button FocusVisualPrimaryThickness="2" FocusVisualSecondaryThickness="1"/>

Anpassen des Rands

Der Rand ist der Abstand zwischen den visuellen Grenzen des Steuerelements und dem Beginn des sekundären Rahmens der visuellen Fokuselemente. Der Standardrand hat eine Breite von 1 Pixel außerhalb der Grenzen des Steuerelements. Sie können diesen Rand individuell pro Steuerelement bearbeiten, indem Sie die Eigenschaft FocusVisualMargin ändern:

<Button FocusVisualPrimaryThickness="2" FocusVisualSecondaryThickness="1" FocusVisualMargin="-3"/>

Ein negativer Rand verschiebt den Rahmen weiter weg von der Mitte des Steuerelements, und ein positiver Rand verschiebt ihn näher zur Mitte des Steuerelements.

Anpassen der Farbe

Um die Farbe des visuellen Elements von Reveal Focus zu ändern, verwenden Sie die Eigenschaften FocusVisualPrimaryBrush und FocusVisualSecondaryBrush.

Eigenschaft Standardressource Standardwert der Ressource
FocusVisualPrimaryBrush SystemControlRevealFocusVisualBrush SystemAccentColor
FocusVisualSecondaryBrush SystemControlFocusVisualSecondaryBrush SystemAltMediumColor

(Die Eigenschaft „FocusPrimaryBrush“ wird nur dann standardmäßig als SystemControlRevealFocusVisualBrush-Ressourcen verwendet, wenn FocusVisualKind auf Reveal festgelegt ist. Andernfalls wird SystemControlFocusVisualPrimaryBrush verwendet.)

Um die Farbe des visuellen Fokuselements eines einzelnen Steuerelements zu ändern, legen Sie die Eigenschaften direkt im Steuerelement fest. In diesem Beispiel werden die Farben des visuellen Fokuselements einer Schaltfläche außer Kraft gesetzt.


<!-- Specifying a color directly -->
<Button
    FocusVisualPrimaryBrush="DarkRed"
    FocusVisualSecondaryBrush="Pink"/>

<!-- Using theme resources -->
<Button
    FocusVisualPrimaryBrush="{ThemeResource SystemBaseHighColor}"
    FocusVisualSecondaryBrush="{ThemeResource SystemAccentColor}"/>

Um die Farbe aller visuellen Fokuselemente in der gesamten App zu ändern, setzen Sie die Ressourcen SystemControlRevealFocusVisualBrush und SystemControlFocusVisualSecondaryBrush mit Ihrer eigenen Definition außer Kraft:

<!-- App.xaml -->
<Application.Resources>

    <!-- Override Reveal Focus default resources. -->
    <SolidColorBrush x:Key="SystemControlRevealFocusVisualBrush" Color="{ThemeResource SystemBaseHighColor}"/>
    <SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="{ThemeResource SystemAccentColor}"/>
</Application.Resources>

Weitere Informationen zum Ändern der Farbe von visuellen Fokuselementen finden Sie unter Farbbranding und -anpassung.

Nur den Leuchteffekt anzeigen

Wenn Sie nur den Leuchteffekt ohne die primären oder sekundären visuellen Fokuselemente verwenden möchten, legen Sie die Eigenschaft FocusVisualPrimaryBrush des Steuerelements einfach auf Transparent und die Eigenschaft FocusVisualSecondaryThickness auf 0 fest. In diesem Fall übernimmt der Leuchteffekt die Farbe des Steuerelementhintergrunds für ein randloses Erscheinungsbild. Sie können die Stärke des Leuchteffekts mithilfe von FocusVisualPrimaryThickness anpassen.


<!-- Show just the glow -->
<Button
    FocusVisualPrimaryBrush="Transparent"
    FocusVisualSecondaryThickness="0" />

Verwenden Ihrer eigenen visuellen Fokuselemente

Eine weitere Möglichkeit zum Anpassen von Reveal Fokus ist das Deaktivieren der systemeigenen visuellen Fokuselemente, indem Sie Ihre eigenen Elemente mithilfe von visuellen Zuständen zeichnen. Weitere Informationen finden Sie unter Beispiel für visuelle Fokuselemente.

Reveal Focus und das Fluent Design-System

Reveal Focus ist eine Komponente des Fluent Design-Systems, die Ihrer App Lichteffekte hinzufügt. Weitere Informationen zum Fluent Design-System und den zugehörigen Komponenten finden Sie unter Übersicht über Fluent Design.