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

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

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

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

Обзор

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

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

Замечание

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

Оптимизируйте для 2-футового и 10-футового пользовательского опыта.

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

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

Замечание

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

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

Геймпад и удаленный контроль

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

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

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

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

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

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

Кнопка	Геймпад	Дистанционное управление
Кнопка A/Select	Да	Да
Кнопка B/Назад	Да	Да
Направление панели (D-pad)	Да	Да
Кнопка меню	Да	Да
Кнопка "Просмотреть"	Да	Да
Кнопки X и Y	Да	Нет
Левая палка	Да	Нет
Правый джойстик	Да	Нет
Триггеры слева и справа	Да	Нет
Левый и правый бамперы	Да	Нет
Кнопка OneGuide	Нет	Да
кнопка громкости	Нет	Да
Кнопка канала	Нет	Да
Кнопки управления мультимедиа	Нет	Да
Кнопка "Отключить"	Нет	Да

Поддержка встроенной кнопки

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

Клавиатура	Геймпад/удаленный
Клавиши со стрелками	D-pad (также левая палка на геймпаде)
ПРОБЕЛ	Кнопка A/Select
Войдите	Кнопка A/Select
Побег	Кнопка "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 используется для возврата, не отображайте кнопку "Назад" в пользовательском интерфейсе. Если вы используете представление навигации, кнопка "Назад" будет скрыта автоматически. Дополнительные сведения о обратной навигации см. в разделе "Назад" для приложений UWP.

Windows приложения на Xbox One также поддерживают нажатие кнопки Menu, чтобы открыть контекстные меню. Дополнительные сведения см. в разделе CommandBar и ContextFlyout.

Поддержка акселератора

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

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

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

Навигация и взаимодействие с фокусом XY

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

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

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

Это важно

Режим мыши включен по умолчанию для приложений Windows, работающих на Xbox One. Чтобы отключить режим мыши и включить навигацию по фокусу XY, установите флажок 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() + ")");
    }
};

Существует три распространенных причины, по которым навигация XY может не работать так, как вы ожидаете:

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

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

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

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

Остальная часть этого раздела подробно описывает распространенные проблемы проектирования при использовании навигации XY и предлагает несколько способов их решения.

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

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

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

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

Хотя Universal Windows Platform пытается убедиться, что навигация с использованием D-pad/левого стика имеет смысл пользователю, она не может гарантировать поведение, оптимизированное для намерений вашего приложения. Лучший способ убедиться, что навигация оптимизирована для приложения, — протестировать его с помощью геймпада и убедиться, что к каждому элементу пользовательского интерфейса можно получить доступ пользователем таким образом, который имеет смысл для сценариев вашего приложения. Если сценарии приложения вызывают поведение, не достигнутое с помощью предоставленной навигации фокуса XY, рассмотрите возможность выполнения рекомендаций в следующих разделах и (или) переопределения поведения, чтобы поместить фокус на логический элемент.

В следующем фрагменте кода показано, как можно переопределить поведение навигации фокуса XY:

<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 Два и пользователь перемещается вправо, то лучшим кандидатом для фокуса является Button Четыре; однако фокус перемещается на Button Три, поскольку родительский элемент UserControl заставляет его направляться туда, когда он оказывается вне своего визуального дерева.

Путь минимального количества щелчков

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

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

CommandBar и ContextFlyout

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

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

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

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

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

Некоторые макеты пользовательского интерфейса более сложны из-за особенностей навигации фокуса по XY и должны оцениваться в индивидуальном порядке. Хотя нет единого "правильного" способа, и какое решение вы выбираете, зависит от конкретных потребностей вашего приложения, есть некоторые методы, которые вы можете использовать для создания большого опыта телевизора.

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

Замечание

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

Ниже приведено мнимое приложение для недвижимости, в котором показан список домов, доступных для продажи, карта, описание имущества и другие сведения. Это приложение представляет три проблемы, которые можно преодолеть с помощью следующих методов:

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

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

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

Решения

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

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

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

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

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

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

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

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

Режим мыши

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

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

Замечание

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

Для XAML и размещенных веб-приложений, работающих на Xbox One, режим мыши включен по умолчанию для всего приложения. Настоятельно рекомендуется отключить эту функцию и оптимизировать приложение для работы с навигацией XY. Для этого задайте свойству 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, поддерживающих клавиатуру и/или геймпад или дистанционное управление.

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

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

Начальное размещение визуального фокуса

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

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

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

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

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

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

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

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

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

Для получения дополнительной информации см. руководство по показу фокуса.

Настройка визуализации фокуса

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

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

Легкое закрытие наложения

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

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

Фокусировка взаимодействия предназначена для упрощения использования геймпада или дистанционного взаимодействия с приложением.

Замечание

Настройка взаимодействия с фокусом не влияет на клавиатуру или другие устройства ввода.

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

Замечание

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

Перехват фокуса

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

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

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

Существует несколько подходов к обходу этой проблемы. Один из них — создать другой макет, аналогичный примеру приложения для недвижимости в системе навигации и взаимодействия с фокусом XY, где мы переместили кнопки "Назад" и "Далее" выше ListView. Расположить элементы управления вертикально вместо горизонтального, как на следующем изображении, решит проблему.

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

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

Slider Если требуется взаимодействие с фокусом, пользователь может добраться до кнопки справа, нажав клавишу справа на D-pad/left stick дважды. Это решение отлично, так как оно не требует корректировки пользовательского интерфейса и создает ожидаемое поведение.

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

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

• ListBox
• ListView
• GridView
• FlipView

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

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

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

ScrollViewer

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

Если ScrollViewer не имеет фокусируемого содержимого—например, если он содержит только текст—вы можете настроить , чтобы пользователь мог взаимодействовать с IsFocusEngagementEnabled="True" с помощью кнопки ScrollViewer. После того как они начали взаимодействовать, они могут прокручивать текст с помощью D-pad/left stick, а затем нажать кнопку B/Back, чтобы закончить взаимодействие после завершения.

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

По умолчанию для взаимодействия с фокусом

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

Управление	Настройка фокуса по умолчанию
CalendarDatePicker	Вкл
FlipView	Выкл.
GridView	Выкл.
ЛистБокс	Выкл.
ListView	Выкл.
ScrollViewer	Выкл.
SemanticZoom	Выкл.
Слайдер	Вкл

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

Сводка

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

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

• Проектирование для Xbox и телевизора