Взаимодействие с помощью геймпада и пульта дистанционного управления

Многие возможности взаимодействия совместно используются геймпадом, пультом дистанционного управления и клавиатурой.

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

Общие рекомендации по проектированию приложений Windows в 10-футовом интерфейсе см. в статье Проектирование для Xbox и телевизоров.

Общие сведения

В этом разделе мы обсудим, что следует учитывать при проектировании взаимодействия (или что вы не делаете, если платформа ухаживает за вами), а также предоставляем рекомендации, рекомендации и рекомендации по созданию приложений Windows, которые можно использовать независимо от устройства, типа ввода, возможностей и предпочтений пользователей.

В итоге ваше приложение должно быть интуитивно понятным и простым в использовании в 2-футовой среде, как и в 10-футовой среде (и наоборот). Поддержка предпочитаемых пользователем устройств, обеспечение четкости и четкости фокуса пользовательского интерфейса, размещение содержимого таким образом, чтобы навигация была согласованной и предсказуемой, а также предоставляйте пользователям самый короткий путь к тому, что они хотят сделать.

Примечание

Большинство фрагментов кода в этом разделе находятся в XAML/C#; Однако принципы и понятия применяются ко всем приложениям Для Windows. Если вы разрабатываете приложение для Windows НА HTML/JavaScript для Xbox, проверка отличную библиотеку TVHelpers на сайте GitHub.

Оптимизация для двух- и 10-футовых интерфейсов

Как минимум, мы рекомендуем протестировать приложения, чтобы убедиться, что они хорошо работают как в двух футовых, так и в 10-футовых сценариях, а также чтобы все функциональные возможности были обнаруживаемыми и доступными для геймпада Xbox и пульта дистанционного управления.

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

Примечание

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

Функция	Описание
Перемещение фокуса по осям X и Y и взаимодействие	Навигация по фокусу XY позволяет пользователю перемещаться по пользовательскому интерфейсу приложения. Однако это позволяет пользователю перемещаться только вверх, вниз, влево или вправо. Рекомендации по выполнению этих и других требований приведены в этом разделе.
Режим мыши	Навигация по фокусу XY не является практичной или даже возможной для некоторых типов приложений, таких как карты или приложения для рисования и рисования. В таких случаях режим мыши позволяет пользователям свободно перемещаться с помощью геймпада или пульта дистанционного управления, как и мышь на компьютере.
Визуальный элемент фокуса	Визуальный элемент фокуса — это граница, которая выделяет текущий элемент пользовательского интерфейса. Это помогает пользователю быстро определить пользовательский интерфейс, который он просматривает или с которым взаимодействует.
включение фокуса;	Включение фокуса требует, чтобы пользователь нажимал кнопку A/Select на геймпаде или пульте дистанционного управления, когда элемент пользовательского интерфейса имеет фокус, чтобы взаимодействовать с ним.
Аппаратные кнопки	Геймпад и пульт дистанционного управления обеспечивают очень разные кнопки и конфигурации.

Геймпад и пульт дистанционного управления

Так же, как клавиатура и мышь на компьютере и сенсорный экран на телефоне и планшете, геймпад и пульт ДУ являются основными устройствами ввода при взаимодействии на большом расстоянии. В этом разделе описаны аппаратные кнопки и их предназначение. В разделах Перемещение фокуса по оси X и Y и взаимодействие и Режим мыши вы узнаете, как оптимизировать приложение для использования этих устройств ввода.

Качество работы геймпадов и пультов ДУ по умолчанию зависит от того, насколько хорошо ваше приложение поддерживает клавиатуру. Хороший способ реализовать оптимальную поддержку геймпада / пульта ДУ в приложении — обеспечить поддержку клавиатуры на ПК, а затем протестировать его с геймпадом и пультом ДУ и выявить слабые места пользовательского интерфейса.

Аппаратные кнопки

В этом документе будут использоваться имена кнопок, указанные на следующей схеме.

Как видно на схеме, имеется ряд кнопок, которые поддерживаются на геймпаде и не поддерживаются на пульте ДУ и наоборот. Хотя для ускорения навигации и можно использовать кнопки, которые поддерживаются только одним устройством ввода, следует помнить, что их использование в критически важных случаях может привести к тому, что пользователь не сможет получить доступ к определенным частям пользовательского интерфейса.

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

Кнопка	Геймпад	Удаленное управление
Кнопка A / выбор	Да	Да
Кнопка B / назад	Да	Да
Крестовина	Да	Да
Кнопка меню	Да	Да
Кнопка просмотра	Да	Да
Кнопки X и Y	Да	Нет
Левый джойстик	Да	Нет
Правой джойстик	Да	Нет
Левый и правый триггеры	Да	Нет
Левый и правый бамперы	Да	Нет
Кнопка OneGuide	Нет	Да
Кнопка громкости	Нет	Да
Кнопка канала	Нет	Да
Кнопки управления мультимедиа	Нет	Да
Кнопка выключения	Нет	Да

Встроенная поддержка кнопок

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

Клавиатура	Геймпад / пульт ДУ
Клавиши со стрелками	Крестовина (также левый джойстик на геймпаде)
Пробел	Кнопка A / выбор
Введите:	Кнопка A / выбор
ESC	Кнопка B / назад*

*Если приложение не обрабатывает ни события KeyDown, ни KeyUp для кнопки B, запускается событие SystemNavigationManager.BackRequested , что приведет к обратной навигации в приложении. Однако это необходимо реализовывать самостоятельно, как показано в следующем фрагменте кода.

// This code goes in the MainPage class

public MainPage()
{
    this.InitializeComponent();

    // Handling Page Back navigation behaviors
    SystemNavigationManager.GetForCurrentView().BackRequested +=
        SystemNavigationManager_BackRequested;
}

private void SystemNavigationManager_BackRequested(
    object sender,
    BackRequestedEventArgs e)
{
    if (!e.Handled)
    {
        e.Handled = this.BackRequested();
    }
}

public Frame AppFrame { get { return this.Frame; } }

private bool BackRequested()
{
    // Get a hold of the current frame so that we can inspect the app back stack
    if (this.AppFrame == null)
        return false;

    // Check to see if this is the top-most page on the app back stack
    if (this.AppFrame.CanGoBack)
    {
        // If not, set the event to handled and go back to the previous page in the
        // app.
        this.AppFrame.GoBack();
        return true;
    }
    return false;
}

Примечание

Если кнопка для возврата используется кнопка B, кнопку "Назад" в пользовательском интерфейсе отображать не следует. При использовании представления навигации кнопка "Назад" скрывается автоматически. Дополнительные сведения о навигации в обратном направлении см. в статье Журнал навигации и обратная навигация для приложений Windows.

Приложения для Windows на Xbox One также поддерживают нажатие кнопки Меню для открытия контекстных меню. Дополнительные сведения см. в разделе CommandBar и ContextFlyout.

Поддержка горячих клавиш

Горячие клавиши — это те кнопки, которые можно использовать для повышения скорости навигации по пользовательскому интерфейсу. Однако эти кнопки могут быть уникальными для того или иного устройства ввода, поэтому следует помнить, что не все пользователи смогут воспользоваться этими функциями. В настоящее время геймпад является единственным устройством ввода, которое поддерживает функции акселератора для приложений Для Windows на Xbox One.

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

Взаимодействие	Клавиатура и мышь	Геймпад	Встроенная функция для	Рекомендуется для
Страница вверх/вниз	Страница вверх/вниз	Левый и правый триггеры	CalendarView, ListBox, ListViewBase, ListView, ScrollViewer, Selector, LoopingSelector, ComboBox, FlipView	Представления, поддерживающие вертикальную прокрутку
Страница влево/вправо	Нет	Левый и правый бамперы	ListBox, ListViewBase, ListView, ScrollViewer, Selector, LoopingSelector, FlipView	Представления, поддерживающие горизонтальную прокрутку
Увеличение/уменьшение масштаба	Ctrl +/-	Левый и правый триггеры	Нет	ScrollViewer, представления, поддерживающие увеличение и уменьшение масштаба
Открыть/закрыть панель навигации	Нет	Представление	Нет	Панели навигации
Поиск	Нет	Кнопка Y	Нет	Ярлык для функции основного поиска в приложении
Открыть контекстное меню	Щелкните правой кнопкой мыши	Кнопка меню	ContextFlyout	Контекстные меню

Перемещение фокуса по осям X и Y и взаимодействие

Если ваше приложение поддерживает корректное перемещение фокуса с помощью клавиатуры, оно будет поддерживать геймпад и пульт ДУ. Навигация с помощью клавиш со стрелками соответствует использованию крестовины (в том числе левого мини-джойстика на геймпаде), а взаимодействие с элементами управления пользовательского интерфейса — использованию клавиши Ввод/Выбор (см. раздел Геймпад и пульт ДУ)

Многие события и свойства используются как клавиатурой, так и геймпадом— они срабатывают KeyDown и KeyUp события, и они будут переходить только к элементам управления со свойствами IsTabStop="True" и Visibility="Visible". Руководство по проектированию управления с помощью клавиатуры см. в разделе Взаимодействие с клавиатурой.

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

Важно!

Режим мыши включен по умолчанию для приложений Windows, работающих на Xbox One. Чтобы отключить режим мыши и включить перемещение фокуса по оси X и Y, задайте параметр Application.RequiresPointerMode=WhenRequested.

Отладка проблем с фокусировкой

Вызвав метод FocusManager.GetFocusedElement, можно узнать, какой элемент в настоящий момент находится в фокусе. Этот метод полезно использовать, когда местоположение визуального элемента фокуса является неочевидным. Эти сведения можно регистрировать в окне вывода Visual Studio следующим образом:

page.GotFocus += (object sender, RoutedEventArgs e) =>
{
    FrameworkElement focus = FocusManager.GetFocusedElement() as FrameworkElement;
    if (focus != null)
    {
        Debug.WriteLine("got focus: " + focus.Name + " (" +
            focus.GetType().ToString() + ")");
    }
};

Есть три распространенных причины некорректной работы перемещения фокуса по оси X и Y.

• Неправильно задано свойство IsTabStop или Visibility.
• Фокус элемента управления на самом деле больше, чем вы думаете. Навигация по XY рассматривает общий размер элемента управления (ActualWidth и ActualHeight), а не только часть элемента управления, которая отображает что-то интересное.
• Один элемент управления находится поверх другого. Навигация по XY не поддерживает перекрывающиеся элементы управления.

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

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

• Шаблон элемента управления был изменен и в него не был добавлен визуальный элемент фокуса. Установите значение UseSystemFocusVisuals="True" или добавьте визуальный элемент фокуса вручную.
• Фокус был смещен путем вызова Focus(FocusState.Pointer). Параметр FocusState управляет тем, как изменяется визуальный элемент фокуса. Как правило, этому параметру следует задавать значение FocusState.Programmatic, что позволит отображаться визуальному элементу фокуса, если он отображался ранее, и оставаться скрытым, если он был до этого скрыт.

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

Недоступный пользовательский интерфейс

Поскольку перемещение фокуса по оси X и Y ограничивает пользователя направлениями "Вверх", "Вниз", "Влево" и "Вправо", могут возникнуть случаи, когда части пользовательского интерфейса останутся недоступными. На следующей схеме приведен пример компоновки пользовательского интерфейса, не поддерживающей перемещения фокуса по оси X и Y. Обратите внимание, что элемент посередине не доступен при использовании геймпада / пульта ДУ, так как приоритетной является вертикальная и горизонтальная навигация. Средний элемент никогда не получит достаточно высокого приоритета для получения фокуса.

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

Переопределение навигации по умолчанию

Хотя универсальная платформа Windows стремится обеспечить удобство навигации пользователя с помощью крестовины / левого джойстика, невозможно гарантировать поведение, которое было бы оптимизировано под цели вашего приложения. Лучшим способом оптимизации навигации в приложении является его тестирование с использованием геймпада и проверка доступности каждого элемента пользовательского интерфейса с учетом различных сценариев использования приложения. Если в приложении необходимо реализовать поведение, которого невозможно добиться с помощью имеющихся возможностей перемещения фокуса по оси X и Y, ознакомьтесь с приведенными в следующем разделе рекомендациями, чтобы переопределить поведение и иметь возможность размещать фокус на логическом элементе.

В следующем фрагменте кода показано, как переопределить поведение при перемещении фокуса по оси X и Y по умолчанию.

<StackPanel>
    <Button x:Name="MyBtnLeft"
            Content="Search" />
    <Button x:Name="MyBtnRight"
            Content="Delete"/>
    <Button x:Name="MyBtnTop"
            Content="Update" />
    <Button x:Name="MyBtnDown"
            Content="Undo" />
    <Button Content="Home"  
            XYFocusLeft="{x:Bind MyBtnLeft}"
            XYFocusRight="{x:Bind MyBtnRight}"
            XYFocusDown="{x:Bind MyBtnDown}"
            XYFocusUp="{x:Bind MyBtnTop}" />
</StackPanel>

В этом случае при переходе фокуса к кнопке Home и навигации пользователя влево, фокус перемещается к кнопке MyBtnLeft. Если пользователь переходит вправо, фокус перемещается к кнопке MyBtnRight и т. д.

Чтобы не допустить перемещения фокуса от элемента управления в определенном направлении, используйте свойство XYFocus* для указания на тот же самый элемент управления.

<Button Name="HomeButton"  
        Content="Home"  
        XYFocusLeft ="{x:Bind HomeButton}" />

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

<StackPanel Orientation="Horizontal" Margin="300,300">
    <UserControl XYFocusRight="{x:Bind ButtonThree}">
        <StackPanel>
            <Button Content="One"/>
            <Button Content="Two"/>
        </StackPanel>
    </UserControl>
    <StackPanel>
        <Button x:Name="ButtonThree" Content="Three"/>
        <Button Content="Four"/>
    </StackPanel>
</StackPanel>

Если в примере выше фокус получает Button 2 и пользователь переходит вправо, следующим кандидатом на получение фокуса становится Button 4. Однако фокус перемещается на Button 3, поскольку родительский элемент UserControl обеспечивает его принудительный переход при выходе за пределы визуального дерева.

Путь с наименьшим количеством нажатий

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

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

CommandBar и ContextFlyout

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

Что если поместить CommandBarнад списком/сеткой? Хотя пользователю, который прокрутил список/сетку, понадобится прокрутить их обратно, чтобы достичь CommandBar, это потребует меньше усилий, чем в случае предыдущей конфигурации. Обратите внимание: предполагается, что исходный фокус приложения помещается рядом или над CommandBar. Этот подход не будет столь же удобен, если исходный фокус располагается под списком/сеткой. Если эти элементы CommandBar являются глобальными элементами действия, которые не нужно использовать слишком часто (например, кнопка Синхронизировать), их можно разместить над списком/сеткой.

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

Если ваше приложение содержит объект CommandBar, элементы которого должны быть доступны пользователям, возможно, их стоит разместить внутри ContextFlyout и удалить их из CommandBar. ContextFlyout — это свойство UIElement и контекстное меню , связанное с этим элементом. При работе на компьютере щелчком правой кнопкой мыши на элементе со свойством ContextFlyout выводится соответствующее ему контекстное меню. При работе на Xbox One это происходит при нажатии кнопки Меню, когда фокус находится на таком элементе.

Проблемы компоновки пользовательского интерфейса

Использовать некоторые макеты пользовательского интерфейса сложнее вследствие особенностей перемещения фокуса по оси X и Y, поэтому их применение следует оценивать в зависимости от ситуации. Несмотря на отсутствие единственного правильного способа, решение зависит от вас и особых нужд вашего приложения. Однако существует ряд методов, которые можно использовать для упрощения работы с телевизором.

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

Примечание

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

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

• Изменение порядка пользовательского интерфейса
• включение фокуса;
• Режим мыши

Проблема: элементы пользовательского интерфейса, размещенные после длинного списка/сетки

Объект ListView, приведенный на следующем рисунке, является очень длинным списком прокрутки. Если включениене является обязательным для ListView, то при переходе пользователя к списку фокус переводится на первый элемент списка. Чтобы пользователь перешел к кнопке Назад или Далее, ему необходимо перебрать все элементы в списке. В таких случаях, когда требовать от пользователя пройти весь список является болезненным, т. е. когда список недостаточно короткий, чтобы этот интерфейс был приемлемым, может потребоваться рассмотреть другие варианты.

Решения

Изменение порядка пользовательского интерфейса

Если исходный фокус не находится в нижней части страницы, элементы пользовательского интерфейса, размещенные над длинным списком прокрутки, станут более доступны, если поместить их под списком. Если новый макет подходит для других устройств, изменение компоновки для всех семейств устройств вместо внесения специальных изменений в пользовательский интерфейс только для Xbox One может стать менее затратным решением. Кроме того, размещение элементов пользовательского интерфейса поперек направления прокрутки (то есть горизонтально относительно вертикального списка прокрутки или вертикально относительно горизонтального списка прокрутки) обеспечит более удобный к ним доступ.

Сосредоточение внимания

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

Проблема: ScrollViewer без доступных для фокусировки элементов

Поскольку перемещение фокуса по оси X и Y основано на переходе к одному доступному для фокусировки элементу за раз, объект ScrollViewer, который не содержит каких-либо доступных элементов (например, объект только с текстом, как в этом примере), может привести к тому, что пользователь не сможет просмотреть все содержимое ScrollViewer. Решения для этого и других похожих сценариев приведены в разделе Включение фокуса.

Проблема: пользовательский интерфейс со свободной прокруткой

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

Режим мыши

Как описано в разделе Перемещение фокуса по оси X и Y и взаимодействие, на Xbox One фокус перемещается по оси X и Y, позволяя пользователю переходить от одного элемента управления к другому в обоих направлениях по вертикали и горизонтали. Однако некоторые элементы управления, такие как WebView и MapControl, требуют взаимодействия, аналогичного работе с мышью, когда пользователи могут свободно перемещать указатель внутри границ элемента управления. Имеются также приложения, в которых пользователю было бы разумно иметь возможность перемещать указатель по всей странице с помощью геймпада / пульта ДУ, как при работе с мышью на ПК.

В этих сценариях следует обеспечить работу указателя (режим мыши) на всей странице или в границах элемента управления. Например, ваше приложение может содержать страницу с элементом управления WebView, который использует режим мыши только внутри этого элемента и перемещение фокуса по оси X и Y во всех остальных областях экрана. Чтобы запросить указатель, следует определить, когда его требуется использовать: при взаимодействии с элементом управления или страницей либо при перемещении фокуса на страницу.

Примечание

Запрос указателя при получении элементом управления фокуса не поддерживается.

При выполнении приложений XAML и размещенных веб-приложений на Xbox One режим мыши включается по умолчанию для всего приложения. Настоятельно рекомендуется отключать режим мыши и оптимизировать приложение для работы с перемещением фокуса по оси X и Y. Для этого свойству Application.RequiresPointerMode необходимо задать значение WhenRequested, чтобы режим мыши активировался только при его вызове элементом управления или страницей.

Чтобы реализовать это в приложении XAML, используйте в классе App следующий фрагмент кода.

public App()
{
    this.InitializeComponent();
    this.RequiresPointerMode =
        Windows.UI.Xaml.ApplicationRequiresPointerMode.WhenRequested;
    this.Suspending += OnSuspending;
}

Дополнительные сведения, в том числе пример кода для HTML/JavaScript, см. в разделе Отключение режима мыши.

На следующей схеме показаны сопоставления кнопок для геймпада/пульта ДУ в режиме мыши.

Примечание

Режим мыши поддерживается только на консоли Xbox One с геймпадом/пультом ДУ. В случае других семейств устройств и типов ввода он игнорируется без отображения каких-либо сообщений.

Используйте свойство RequiresPointer , чтобы включить режим мыши для элемента управления или страницы. Это свойство поддерживает три значения: Never (значение по умолчанию), WhenEngaged и WhenFocused.

Активация режима мыши для элемента управления

Если пользователь взаимодействует с элементом управления с помощью RequiresPointer="WhenEngaged", режим мыши остается активным на протяжении периода взаимодействия. В следующем фрагменте кода показан простой объект MapControl, который активирует режим мыши при начале взаимодействия.

<Page>
    <Grid>
        <MapControl IsEngagementRequired="true"
                    RequiresPointer="WhenEngaged"/>
    </Grid>
</Page>

Примечание

Если элемент управления активирует режим мыши при начале взаимодействия, он также должен требовать выполнения условия IsEngagementRequired="true". В противном случае режим мыши активирован не будет.

Если элемент управления работает в режиме мыши, вложенные элементы управления также будут работать в режиме мыши. Запрошенный режим дочерних элементов будет игнорироваться— родитель не может находиться в режиме мыши, а дочерний — нет.

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

Активация режима мыши на странице

Если на странице имеется свойство RequiresPointer="WhenFocused", режим мыши будет активирован для всей страницы при получении ею фокуса. В следующем фрагменте кода показано предоставление странице этого свойства.

<Page RequiresPointer="WhenFocused">
    ...
</Page>

Примечание

Значение WhenFocused поддерживается только для объектов Page. Если попытаться задать это значение для элемента управления, возникнет исключение.

Отключение режима мыши для полноэкранного содержимого

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

1. В объекте App установите параметр RequiresPointerMode="WhenRequested".
2. Для каждого объекта Page, за исключением объекта Page для полноэкранного режима, установите параметр RequiresPointer="WhenFocused".
3. Для объекта Page для полноэкранного режима установите параметр RequiresPointer="Never".

Таким образом курсор не будет отображаться при отображении полноэкранного содержимого.

Визуальный элемент фокуса

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

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

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

Важно помнить, что визуальный элемент фокуса по умолчанию отображается при использовании геймпада или пульта ДУ, но не клавиатуры. Поэтому даже если вы не реализовали его, он будет отображаться при запуске приложения на Xbox One.

Исходное положение визуального элемента фокуса

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

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

Четкое выделение фокуса

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

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

Фокус отображения

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

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

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

Подробнее см. в руководстве по фокусу отображения.

Настройка визуального элемента фокуса

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

Вы даже можете отказаться от использования системных визуальных элементов фокуса, нарисовав собственные, используя для этого визуальные состояния. Дополнительные сведения см. в разделе VisualState.

Наложение с исчезновением

Чтобы обратить внимание пользователя на элементы пользовательского интерфейса, которыми пользователь в настоящее время управляет с помощью игрового контроллера или пульта дистанционного управления, UWP автоматически добавляет слой "дыма", охватывающий области за пределами пользовательского интерфейса всплывающего окна, когда приложение работает на Xbox One. Для этого не требуется какой-либо дополнительной работы, однако об этом стоит помнить при проектировании пользовательского интерфейса. Чтобы включить или отключить слой дымки, можно задать свойство LightDismissOverlayMode для любого объекта FlyoutBase. Значением по умолчанию этого свойства является Auto. Это значит, что оно активировано на Xbox и отключено в других местах. Дополнительные сведения см. в разделе Модальность и исчезновение.

включение фокуса;

Включение фокуса призвано упростить использование геймпада или пульта ДУ при взаимодействии с приложением.

Примечание

Настройка включения фокуса не влияет на работу клавиатуры и другие устройства ввода.

Если свойство IsFocusEngagementEnabled в объекте FrameworkElement имеет значение True, элемент управления помечается как требующий включения фокуса. Это означает, что пользователь должен нажать кнопку A/выбор, чтобы включить элемент управления и начать с ним взаимодействовать. После завершения работы можно нажать кнопку B/Назад, чтобы отключить элемент управления и перейти к другому.

Примечание

IsFocusEngagementEnabled — это новый API, который еще не задокументирован.

Захват фокуса

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

В следующем примере показан пользовательский интерфейс, создающий захват фокуса.

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

Данную проблему можно обойти двумя способами. Первый — это создание другого макета, аналогичного примеру приложения для покупки недвижимости в разделе Перемещение фокуса по оси X и Y и взаимодействие, где мы переместили кнопки Назад и Далее над объектом ListView. Размещение элементов управления вертикально, а не горизонтально, как показано на следующем изображении, позволит решить эту проблему.

Теперь пользователь может переходить к каждому элементу управления, нажимая "Вверх" и "Вниз" на крестовине или левом джойстике. При переходе фокуса к объекту Slider, можно нажать "Влево" и "Вправо" для перемещения маркера Slider в необходимое положение.

Другой подход к решению этой проблемы — обязательное включение объекта Slider. Если задать значение IsFocusEngagementEnabled="True", это приведет к следующему.

Если объект Slider требует включения фокуса, пользователь может перейти к кнопке справа, просто нажав дважды "Вправо" на крестовине / левом джойстике. Это замечательное решение, поскольку оно не требует настройки пользовательского интерфейса и приводит к ожидаемому результату.

Элементы управления

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

• ListBox
• ListView
• GridView
• FlipView.

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

Как и в примере с элементом Slider, давайте попытаемся перейти от кнопки сверху к кнопке снизу, используя геймпад / пульт ДУ. Фокус находится на верхней кнопке. Нажатие "Вниз" на крестовине или джойстике приведет к перемещению фокуса на первый элемент в ListView (Элемент 1). Когда пользователь снова нажмет "Вниз", фокус перейдет к следующему элементу в списке, а не к кнопке снизу. Чтобы перейти к кнопке, пользователь должен сначала перебрать все элементы в ListView. Если ListView содержит большой объем данных, это может оказаться очень неудобным, что создаст у пользователя плохое впечатление о приложении.

Чтобы устранить эту проблему, установите значение свойства IsFocusEngagementEnabled="True" объекта ListView. Это позволит сделать включение элемента обязательным. Это позволит пользователю быстро пропустить ListView простым нажатием кнопки "Вниз". Однако, пользователь не сможет прокрутить список или выбрать его элемент, не включив список с помощью кнопки A/выбор при получении им фокуса с последующим его отключением с помощью кнопки B/назад.

ScrollViewer

От этих элементов управления несколько отличается объект ScrollViewer. Он так же имеет собственные особенности, которые необходимо учитывать. Если у вас есть ScrollViewer с доступным для фокусировки содержимым, по умолчанию переход к ScrollViewer приведет к перемещению между его элементами. Как и в случае с ListView, необходимо перебрать все элементы ScrollViewer, чтобы выйти из этого элемента.

ScrollViewer Если не содержит содержимого, доступного для фокусировки( например, если он содержит только текст), можно настроить IsFocusEngagementEnabled="True" так, чтобы пользователь смог задействовать ScrollViewer с помощью кнопки A/Select. После включения элемента пользователь может прокрутить текст с помощью крестовины / левого джойстика и нажать кнопку B/назад, чтобы отключить фокус элемента.

Другой подход — установить IsTabStop="True" для ScrollViewer элемента управления , чтобы пользователю не нужно было задействовать элемент управления. Он может просто сосредоточиться на нем, а затем прокрутить экран с помощью D-pad/left stick , если в элементе нет элементов, доступных для ScrollViewerфокусировки.

Значения по умолчанию для включения фокуса

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

Control	Включение фокуса по умолчанию
CalendarDatePicker	Включено
FlipView.	Выключено
GridView	Выключено
ListBox	Выключено
ListView	Выключено
ScrollViewer	Выключено
SemanticZoom	Выключено
Ползунок	Включено

Все остальные элементы управления Windows не будут приводить к поведению или визуальным изменениям, если IsFocusEngagementEnabled="True".

Итоги

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

Похожие статьи

• Проектирование для Xbox и ТВ
• Основные сведения об устройствах для приложений Windows