Показать фокус

Reveal Focus — это эффект освещения для восприятия на дистанции около 10 футов, например, на игровых консолях на экранах телевизоров. Он анимирует границу фокусируемых элементов, таких как кнопки, когда пользователь перемещает геймпад или фокус клавиатуры на них. Он отключен по умолчанию, но включить его просто.

Важные API: свойство Application.FocusVisualKind, FocusVisualKind enum, Control.UseSystemFocusVisuals property

Принцип работы

Показать Фокус вызывает внимание к фокусируемым элементам, добавив анимированное свечение вокруг границы элемента:

Это особенно полезно в 10-футовых сценариях, где пользователь может не уделять полного внимания всему экрану телевизора.

Примеры

Приложение Галерея WinUI 2 включает интерактивные примеры большинства элементов управления, функций и возможностей WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.

Как использовать эту возможность

Фокус отображения отключен по умолчанию. Для его включения выполните следующие действия.

1. В конструкторе приложения вызовите свойство AnalyticsInfo.VersionInfo.DeviceFamily и проверьте, является ли текущее семейство устройств Windows.Xbox.
2. Если семейство устройств Windows.Xbox, задайте для свойства Application.FocusVisualKind значение FocusVisualKind.Reveal.

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

После задания свойства FocusVisualKind система автоматически применяет эффект "Показать фокус" ко всем элементам управления, свойство UseSystemFocusVisuals имеет значение True (значение по умолчанию для большинства элементов управления).

Почему функция «Выделение фокуса» не включена по умолчанию?

Как видно, довольно легко включить подсветку фокуса, когда приложение обнаруживает, что оно запускается на Xbox. Так почему система просто не включает её для вас? Поскольку режим выделения фокуса увеличивает размер фокуса, это может привести к проблемам с макетом пользовательского интерфейса. В некоторых случаях вы хотите настроить эффект "Показать фокус", чтобы оптимизировать его для приложения.

Настройка фокуса отображения

Вы можете настроить эффект раскрытия фокуса, изменив визуальные свойства фокуса для каждого элемента управления: FocusVisualPrimaryThickness, FocusVisualSecondaryThickness, FocusVisualPrimaryBrushи FocusVisualSecondaryBrush. Эти свойства позволяют настроить цвет и толщину прямоугольника фокуса. (Это те же свойства, которые используются для создания визуальных элементов высокой видимости с фокусом .)

Но прежде чем приступить к настройке, полезно узнать немного больше о компонентах, составляющих фокус отображения.

По умолчанию визуальные элементы Reveal Focus имеют три части: основная граница, вторичная граница и свечение Reveal. Основная граница толщиной 2px проходит вокруг за пределами вторичной границы. Вторичная граница толщиной 1px располагается по внутренней стороне основной границы. Свечение фокуса имеет толщину, пропорциональную толщине первичной границы, и проходит вокруг снаружи первичной границы.

Помимо статических элементов, визуальные элементы «Показать фокус» имеют анимированный эффект освещения, который пульсирует в состоянии покоя и перемещается в направлении фокуса, когда фокус меняется.

Настройка толщины границы

Чтобы изменить толщину типов границ элемента управления, используйте следующие свойства:

В этом примере изменяется толщина границы визуального элемента фокуса кнопки:

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

Настройка поля

Поле — это пространство между визуальными границами элемента управления и началом вторичной границы визуальных элементов фокуса. Отступ по умолчанию составляет 1px от границ элемента управления. Вы можете изменить это поле на основе каждого элемента управления, изменив свойство FocusVisualMargin:

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

Отрицательное поле толкает границу от центра элемента управления, а положительное поле перемещает границу ближе к центру элемента управления.

Настройка цвета

Чтобы изменить цвет визуального элемента "Показать фокус", используйте свойства FocusVisualPrimaryBrush и FocusVisualSecondaryBrush .

(Свойство FocusPrimaryBrush по умолчанию используется только для ресурсов SystemControlRevealFocusVisualBrush, если для FocusVisualKind задано значение Показать. В противном случае используется SystemControlFocusVisualPrimaryBrush.)

Чтобы изменить цвет визуального элемента фокуса отдельного элемента управления, задайте свойства непосредственно в элементе управления. В этом примере переопределяются визуальные цвета фокуса кнопки.

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

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

Чтобы изменить цвет всех визуальных элементов фокуса во всем приложении, переопределите ресурсы SystemControlRevealFocusVisualBrush и SystemControlFocusVisualSecondaryBrush с собственным определением:

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

Дополнительные сведения об изменении цвета визуального элемента фокуса см. в разделе "Цветовая символика" и "Настройка".

Показать только свечение

Если вы хотите использовать только свечение без основного или вторичного визуального элемента фокуса, просто установите для свойства контрола FocusVisualPrimaryBrush значение Transparent и для свойства FocusVisualSecondaryThickness — 0. В этом случае свечение примет цвет фона элемента управления, чтобы создать эффект отсутствия границ. Толщину свечения можно изменить с помощью FocusVisualPrimaryThickness.

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

Используйте собственные визуальные элементы фокуса

Другим способом настройки фокуса для функции Reveal является отказ от системных визуальных элементов фокуса и создание собственных с использованием визуальных состояний. Дополнительные сведения см. в примере визуального элемента фокуса .

Связанные статьи

• Взаимодействие с геймпадом и пультом дистанционного управления
• Пример визуальных элементов фокуса
• эффекты композиции
• Наука в системе: Гладкий дизайн и глубина
• Наука в системе: Fluent Design и Свет