Обозначение фокуса

  • Статья

hero image

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

Важные API: свойство Application.FocusVisualKind, перечисление FocusVisualKind, Control.UseSystemFocusVisuals

Как это работает

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

Reveal Visual

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

Примеры

Коллекция WinUI 2
WinUI Gallery

Если у вас установлено приложение коллекции WinUI 2, щелкните здесь, чтобы открыть приложение и просмотреть фокус в действии.

Использование

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

  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. Эти свойства позволяют настраивать цвет и толщину границы фокуса. (Это те же свойства, что используются для создания визуальных элементов дополнительного выделения фокуса.)

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

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

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

Reveal Focus layers

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

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

Тип границы Свойство
Основная, свечение FocusVisualPrimaryThickness
(При изменении основной границы толщина свечения меняется пропорционально.)
Вторичные FocusVisualSecondaryThickness

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

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

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

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

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

Поле с отрицательным значением будет отстоять дальше от центра элемента управления, а поле с положительным значением будет расположено ближе к центру элемента управления.

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

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

Свойство Ресурс по умолчанию Значение ресурса по умолчанию
FocusVisualPrimaryBrush SystemControlRevealFocusVisualBrush SystemAccentColor
FocusVisualSecondaryBrush SystemControlFocusVisualSecondaryBrush SystemAltMediumColor

(Свойство FocusPrimaryBrush по умолчанию используется только для свойства 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" />

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

Еще один способ настройки обозначения фокуса  — отказаться от использования системных визуальных элементов фокуса, нарисовав собственные с помощью визуальных состояний. Дополнительные сведения можно почерпнуть из примера визуальных элементов фокуса.

Обозначение фокуса и система проектирования Fluent Design

Обозначение фокуса — это компонент системы проектирования Fluent Design, добавляющий свечение в ваше приложение. См. сведения о системе проектирования Fluent Design и ее компонентах.