Взаимодействие с геймпадом и удаленным управлением

Создавайте в приложении Windows App SDK сценарии взаимодействия, которые хорошо поддерживают ввод с геймпада и пульта ДУ, помимо мыши, клавиатуры и сенсорного ввода.

Обзор

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

См. Проектирование для Xbox и телевизоров, где приведены общие рекомендации по разработке 10-футового интерфейса.

Ключевые API

Кнопки геймпада и удаленного управления

В следующей таблице перечислены аппаратные кнопки и поддерживаемые им устройства ввода.

Кнопка Геймпад Дистанционное управление
A/Выбрать Да Да
B/Назад Да Да
D-pad Да Да
Меню Да Да
View Да Да
X и Y Да нет
Левая/правая палка Да нет
Левый/правый триггеры Да нет
Левый или правый бамперы Да нет

Встроенное сопоставление входных данных

Windows автоматически сопоставляет входные данные клавиатуры с геймпадом и удаленным управлением:

Keyboard Геймпад/удаленный
Клавиши со стрелками D-pad (также левая палка на геймпаде)
ПРОБЕЛ Кнопка A/Select
Войдите Кнопка A/Select
Побег Кнопка B/Назад

Навигация фокуса по осям X и Y

Навигация по фокусу XY позволяет пользователям перемещаться по пользовательскому интерфейсу приложения в четырех направлениях (вверх, вниз, слева, справа) с помощью D-панели или левой палки.

Включение навигации XY

Навигация фокуса XY встроена в платформу XAML. Установите XYFocusKeyboardNavigation для контейнера, чтобы включить его:

<StackPanel XYFocusKeyboardNavigation="Enabled">
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
</StackPanel>

Переопределение направления навигации

Используйте свойства XYFocusUp, XYFocusDown, XYFocusLeft и XYFocusRight, чтобы переопределить поведение навигации по умолчанию:

<Button Content="Button 1"
        XYFocusRight="{x:Bind Button2}"/>
<Button x:Name="Button2" Content="Button 2"
        XYFocusLeft="{x:Bind Button1}"/>

Индикатор фокуса

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

В WinUI 3 настройте визуальный элемент фокуса, задав свойства для FrameworkElement:

<Button Content="My Button"
        FocusVisualPrimaryBrush="Red"
        FocusVisualPrimaryThickness="2"
        FocusVisualSecondaryBrush="Yellow"
        FocusVisualSecondaryThickness="1"/>

Фокусировка на вовлечении

Для взаимодействия с фокусом пользователь должен нажать кнопку A/Select, чтобы взаимодействовать с фокусным элементом управления. Это предотвращает случайное активацию при переходе с помощью D-pad.

Задайте IsFocusEngagementEnabled для элементов управления, для которых полезно такое поведение:

<Slider IsFocusEngagementEnabled="True"/>

Если включение фокуса включено, пользователь нажимает A/Select, чтобы включить элемент управления, взаимодействует с ним, а затем нажимает клавишу B, чтобы "отключать".

Режим мыши

Для приложений, где навигация по фокусу XY не является практической (например, карты или приложения рисования), включите режим мыши. Это позволяет пользователям свободно перемещаться с помощью геймпадов, аналогичных использованию мыши.

Замечание

Для этого сценария UWP предоставляет свойство уровня приложения Application.RequiresPointerMode. Microsoft.UI.Xaml.Application в WinUI 3 не имеет аналогичного свойства, поэтому вместо этого задайте RequiresPointer для каждого Page.

Чтобы включить режим мыши для определенной страницы, задайте для параметра RequiresPointer значение Page:

<Page RequiresPointer="WhenEngaged">
    <!-- Page content -->
</Page>

CommandBar и ContextFlyout

Используйте ContextFlyout для предоставления контекстных меню, доступных с помощью кнопки меню на геймпаде:

<GridView>
    <GridView.ContextFlyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Open"/>
            <MenuFlyoutItem Text="Delete"/>
        </MenuFlyout>
    </GridView.ContextFlyout>
</GridView>

Лучшие практики

  • Проверьте приложение как в 2-футовом интерфейсе для настольных устройств, так и в 10-футовом интерфейсе для телевизоров.
  • Убедитесь, что все функциональные возможности доступны только с помощью навигации D-pad.
  • Применяйте XYFocusKeyboardNavigation к контейнерам, чтобы включить направленную навигацию.
  • Поместите наиболее важное содержимое и элементы управления в начало макета.
  • Не полагаться на кнопки, уникальные для одного устройства ввода для критически важных взаимодействий.
  • Last updated on