Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Reveal Focus ist ein Lichteffekt für 10-Fuß-Umgebungen, z. B. Spielkonsolen auf Fernsehbildschirmen. Es animiert den Rahmen von fokussierbaren Elementen, wie beispielsweise Schaltflächen, wenn der Benutzer den Fokus des Gamepads oder der Tastatur darauf lenkt. Es ist standardmäßig deaktiviert, aber es ist einfach zu aktivieren.
Wichtige APIs: Application.FocusVisualKind-Eigenschaft, FocusVisualKind-Enumeration, Control.UseSystemFocusVisuals-Eigenschaft
Funktionsweise
Reveal Focus lenkt die Aufmerksamkeit auf fokussierte Elemente, indem ein animierter Leuchteffekt um die Kontur des Elements hinzugefügt wird.
Dies ist besonders hilfreich bei 10 Fuß-Szenarien, in denen der Benutzer möglicherweise nicht die volle Aufmerksamkeit auf den gesamten FERNSEHbildschirm legt.
Beispiele
Die App WinUI 2 Gallery beinhaltet interaktive Beispiele für die meisten WinUI 2-Steuerelemente, -Features und -Funktionen. Holen Sie sich die App aus dem Microsoft Store oder holen Sie sich den Quellcode auf GitHub.
So verwenden Sie es
Reveal Focus ist standardmäßig deaktiviert. Um es zu aktivieren:
- Rufen Sie im Konstruktor Ihrer App die eigenschaft AnalyticsInfo.VersionInfo.DeviceFamily auf, und überprüfen Sie, ob die aktuelle Gerätefamilie
Windows.Xboxist. - Wenn die Gerätefamilie
Windows.Xboxist, legen Sie die eigenschaft Application.FocusVisualKind aufFocusVisualKind.Revealfest.
if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
{
this.FocusVisualKind = FocusVisualKind.Reveal;
}
Nachdem Sie die eigenschaft FocusVisualKind festgelegt haben, wendet das System automatisch den Reveal-Fokuseffekt auf alle Steuerelemente an, deren UseSystemFocusVisuals-eigenschaft auf True festgelegt ist (der Standardwert für die meisten Steuerelemente).
Warum ist "Reveal Focus" nicht standardmäßig aktiviert?
Wie Sie sehen können, ist es relativ einfach, den Reveal-Fokus zu aktivieren, wenn die App erkennt, dass sie auf einer Xbox ausgeführt wird. Warum schaltet das System es nicht einfach für Sie ein? Weil "Reveal Focus" die Größe des visuellen Fokus erhöht, kann dies zu Problemen mit dem Benutzeroberflächen-Layout führen. In einigen Fällen möchten Sie den Reveal-Fokuseffekt anpassen, um ihn für Ihre App zu optimieren.
Anpassen des Reveal-Fokus
Sie können den Reveal Focus-Effekt anpassen, indem Sie die visuellen Fokuseigenschaften für jedes Steuerelement ändern: FocusVisualPrimaryThickness, FocusVisualSecondaryThickness, FocusVisualPrimaryBrushund FocusVisualSecondaryBrush. Mit diesen Eigenschaften können Sie die Farbe und Stärke des Fokusrechtecks anpassen. (Sie sind dieselben Eigenschaften, die Sie verwenden, um visuelle Fokuselemente mit hoher Sichtbarkeitzu erstellen.)
Bevor Sie mit der Anpassung beginnen, ist es jedoch hilfreich, etwas mehr über die Komponenten zu wissen, aus denen reveal Focus besteht.
Es gibt drei Teile der Visualisierungen für den standardmäßigen Reveal-Fokus: den primären Rahmen, den sekundären Rahmen und den Reveal-Leuchteffekt. Der primäre Rahmen ist 2px dick und verläuft um die außerhalb des sekundären Rahmens. Der sekundäre Rahmen ist 1px dick und verläuft um die innerhalb des primären Rahmens. Die Dicke des Reveal-Fokus-Leuchtens ist proportional zur Dicke des primären Rahmens und verläuft außen um die - und-Zone des primären Rahmens.
Zusätzlich zu den statischen Elementen verfügen Reveal Focus-Visualisierungen über ein animiertes Licht, das im Ruhezustand pulsiert und in Richtung des Fokus bewegt wird, wenn der Fokus verschoben wird.
Passen Sie die Rahmenstärke an
Verwenden Sie die folgenden Eigenschaften, um die Stärke der Rahmentypen eines Steuerelements zu ändern:
| Randtyp | Eigentum |
|---|---|
| Primär, Leuchteffekt |
FocusVisualPrimaryThickness- (Das Ändern des primären Rahmens ändert die Stärke des Leuchteffekts proportional.) |
| Sekundär | FocusVisualSecondaryThickness |
In diesem Beispiel wird die Rahmenstärke der Fokusanzeige einer Schaltfläche geändert:
<Button FocusVisualPrimaryThickness="2" FocusVisualSecondaryThickness="1"/>
Anpassen des Seitenrands
Der Rand ist der Abstand zwischen den visuellen Grenzen des Steuerelements und dem Anfang des sekundären Rahmens für visuelle Fokuselemente. Der standardmäßige Rand ist 1 px von den Grenzen des Steuerelements entfernt. Sie können diesen Rand pro Steuerelement bearbeiten, indem Sie die eigenschaft FocusVisualMargin ändern:
<Button FocusVisualPrimaryThickness="2" FocusVisualSecondaryThickness="1" FocusVisualMargin="-3"/>
Ein negativer Rand verschiebt den Rahmen von der Mitte des Steuerelements weg, und ein positiver Rand verschiebt den Rahmen näher an die Mitte des Steuerelements.
Farbe anpassen
Verwenden Sie die Eigenschaften FocusVisualPrimaryBrush- und FocusVisualSecondaryBrush-, um die Farbe des visuellen Reveal-Fokus zu ändern.
| Eigentum | Standardressource | Standardwert der Ressource |
|---|---|---|
| FocusVisualPrimaryBrush | SystemControlRevealFocusVisualBrush | Systemakzentfarbe |
| FocusVisualSecondaryBrush | SystemsteuerungFokusVisualSekundärPinsel | SystemAltMediumColor |
(Die FocusPrimaryBrush-Eigenschaft ist standardmäßig nur dann auf die SystemControlRevealFocusVisualBrush Ressourcen festgelegt, wenn FocusVisualKind auf Revealfestgelegt ist. Andernfalls wird die SystemControlFocusVisualPrimaryBrushverwendet.)
Wenn Sie die Farbe des Visuellen Fokus eines einzelnen Steuerelements ändern möchten, legen Sie die Eigenschaften direkt auf dem Steuerelement fest. In diesem Beispiel werden die visuellen Fokusfarben einer Schaltfläche überschrieben.
<!-- Specifying a color directly -->
<Button
FocusVisualPrimaryBrush="DarkRed"
FocusVisualSecondaryBrush="Pink"/>
<!-- Using theme resources -->
<Button
FocusVisualPrimaryBrush="{ThemeResource SystemBaseHighColor}"
FocusVisualSecondaryBrush="{ThemeResource SystemAccentColor}"/>
Um die Farbe aller Fokusanzeigen in Ihrer gesamten App zu ändern, überschreiben Sie die SystemControlRevealFocusVisualBrush- und SystemControlFocusVisualSecondaryBrush Ressourcen mit Ihrer eigenen Definition:
<!-- 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 der Fokusanzeige finden Sie unter Color Branding & Customizing.
Nur den Leuchteffekt anzeigen
Wenn Sie nur den Leuchteffekt ohne den primären oder sekundären Fokus verwenden möchten, legen Sie einfach die FocusVisualPrimaryBrush- Eigenschaft des Steuerelements auf Transparent und die FocusVisualSecondaryThickness- auf 0fest. In diesem Fall übernimmt der Leuchteffekt die Farbe des Hintergrunds des Steuerelements, um einen rahmenlosen Eindruck zu bieten. Sie können die Stärke des Leuchteffekts mithilfe von FocusVisualPrimaryThicknessändern.
<!-- Show just the glow -->
<Button
FocusVisualPrimaryBrush="Transparent"
FocusVisualSecondaryThickness="0" />
Verwenden Ihrer eigenen Visuellen Fokuselemente
Eine weitere Möglichkeit zur Anpassung des Reveal-Fokus besteht darin, auf die vom System bereitgestellten Fokusanzeigen zu verzichten und stattdessen eigene visuelle Zustände zu entwerfen. Weitere Informationen finden Sie im Beispiel zu den Fokusvisualisierungen .