Ujawnianie fokusu

Reveal Focus to efekt oświetlenia zaprojektowany dla doświadczeń typu "10-foot", takich jak granie na konsolach podłączonych do telewizorów. Animuje obramowanie elementów z możliwością koncentracji uwagi, takich jak przyciski, gdy użytkownik przenosi do nich fokus gamepad lub klawiaturę. Jest ona domyślnie wyłączona, ale jest prosta do włączenia.

Ważne interfejsy API: właściwość Application.FocusVisualKind, FocusVisualKind wyliczenie, Control.UseSystemFocusVisuals

Jak to działa

Odsłaniaj fokus zwraca uwagę na elementy ukierunkowane, dodając animowany blask wokół obramowania elementu:

Jest to szczególnie przydatne w sytuacjach, gdy użytkownik przebywa w odległości około trzech metrów od ekranu, przez co może nie zwracać pełnej uwagi na cały ekran telewizyjny.

Przykłady

Aplikacja z galerii WinUI 2 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji winUI 2. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub.

Korzystanie

Funkcja Ujawnij fokus jest domyślnie wyłączona. Aby ją włączyć:

1. W konstruktorze aplikacji wywołaj właściwość AnalyticsInfo.VersionInfo.DeviceFamily i sprawdź, czy bieżąca rodzina urządzeń jest Windows.Xbox.
2. Jeśli rodzina urządzeń jest Windows.Xbox, ustaw właściwość Application.FocusVisualKind na FocusVisualKind.Reveal.

    if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
    {
        this.FocusVisualKind = FocusVisualKind.Reveal;
    }

Po ustawieniu właściwości FocusVisualKind system automatycznie stosuje efekt Odsłanianie fokusu do wszystkich kontrolek, których właściwość UseSystemFocusVisuals jest ustawiona na True (wartość domyślna dla większości kontrolek).

Dlaczego funkcja „Reveal Focus” nie jest domyślnie włączona?

Jak widać, dość łatwo jest włączyć funkcję Odsłanianie fokusu, gdy aplikacja wykryje, że działa na konsoli Xbox. Dlaczego więc system nie włącza go za Ciebie? Ponieważ funkcja Ujawnij fokus zwiększa rozmiar wizualizacji fokusu, co może powodować problemy z układem interfejsu użytkownika. W niektórych przypadkach należy dostosować efekt odsłaniania fokusu, aby zoptymalizować go dla aplikacji.

Dostosowywanie ujawniania fokusu

Możesz dostosować efekt odsłaniania fokusu, modyfikując właściwości wizualizacji fokusu dla każdej kontrolki: FocusVisualPrimaryThickness, FocusVisualSecondaryThickness, FocusVisualPrimaryBrush i FocusVisualSecondaryBrush. Te właściwości umożliwiają dostosowanie koloru i grubości prostokąta fokusu. (Są to te same właściwości , których używasz do tworzenia wizualizacji fokusu o wysokiej widoczności.)

Ale przed rozpoczęciem dostosowywania warto wiedzieć nieco więcej o komponentach, które składają się na Reveal Focus.

Istnieją trzy części składające się na domyślne elementy wizualne Reveal Focus: obramowanie podstawowe, obramowanie pomocnicze i poświata Reveal. Podstawowe obramowanie ma 2px grubości i otacza zewnętrzną stronę obramowania pomocniczego. Obramowanie pomocnicze ma grubość 1 pikseli i biegnie wokół wewnątrz obramowania podstawowego. Blask odsłonięć fokus ma grubość proporcjonalną do grubości obramowania podstawowego i biegnie wokół na zewnątrz krawędzi podstawowej.

Oprócz elementów statycznych, wizualizacje Reveal Focus zawierają animowane światło, które pulsuje w stanie spoczynku i przesuwa się w kierunku koncentracji podczas przenoszenia fokusu.

Dostosowywanie grubości obramowania

Aby zmienić grubość typów obramowania kontrolek, użyj następujących właściwości:

W tym przykładzie zmienia się grubość obramowania wizualizacji fokusu przycisku:

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

Dostosowywanie marginesu

Margines to przestrzeń między wizualnymi granicami kontrolki a początkiem pomocniczego obramowania fokusu. Domyślny margines jest ustawiony 1px od granic kontrolki. Ten margines można edytować dla poszczególnych kontrolek, zmieniając właściwość FocusVisualMargin :

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

Margines ujemny odsunie obramowanie od środka kontrolki, a margines dodatni przenosi obramowanie bliżej środka kontrolki.

Dostosowywanie koloru

Aby zmienić kolor wizualizacji Reveal Focus, użyj właściwości FocusVisualPrimaryBrush i FocusVisualSecondaryBrush .

(Właściwość FocusPrimaryBrush jest domyślnie ustawiona tylko na zasoby SystemControlRevealFocusVisualBrush, gdy FocusVisualKind jest ustawiony na Reveal. W przeciwnym razie używa SystemControlFocusVisualPrimaryBrush.)

Aby zmienić kolor wizualizacji fokusu pojedynczej kontrolki, ustaw właściwości bezpośrednio na kontrolce. W tym przykładzie zastępowane są kolory wizualizacji fokusu przycisku.

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

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

Aby zmienić kolor wszystkich wizualizacji fokusu w całej aplikacji, zastąp SystemControlRevealFocusVisualBrush i SystemControlFocusVisualSecondaryBrush zasobów przy użyciu własnej definicji:

<!-- 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>

Aby uzyskać więcej informacji na temat modyfikowania koloru wizualnego fokusu, zobacz Znakowanie kolorów i dostosowywanie.

Pokaż tylko blask

Jeśli chcesz używać tylko poświaty bez podstawowej lub pomocniczej wizualizacji fokusu, po prostu ustaw kontrolki FocusVisualPrimaryBrush właściwości, aby Transparent i FocusVisualSecondaryThickness0. W takim przypadku blask przyjmie kolor tła kontrolki, aby zapewnić wrażenie bez krawędzi. Grubość blasku można zmodyfikować przy użyciu FocusVisualPrimaryThickness.

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

Używanie własnych wizualizacji fokusu

Innym sposobem dostosowywania funkcji Reveal Focus jest rezygnacja z wizualizacji fokusu udostępnianych przez system, rysując własne przy użyciu stanów wizualizacji. Aby dowiedzieć się więcej, zobacz przykład wizualizacji Focus.

Powiązane artykuły

• Gamepad i interakcje za pomocą pilota
• Przykładowe wizualizacje stanu fokusu
• Efekty kompozycyjne
• Nauka w Systemie: Płynny Design i Głębia
• Nauka w Systemie: Płynny Design i Światło