Interações entre comando de jogo e controlo remoto

Crie experiências de interação na sua aplicação criada com o SDK de Aplicações Windows que funcionem bem com entradas de gamepad e de controlo remoto, além do rato, do teclado e do toque.

Visão geral

O comando de jogo e o controlo remoto são os principais dispositivos de entrada para a experiência da Xbox para utilização a 3 metros. A sua aplicação para Windows deve ser utilizável e acessível através destes tipos de entrada, bem como dos tipos tradicionais de entrada do PC.

Consulte Design para Xbox e TV para orientações gerais de design para a experiência de 10 pés.

APIs principais

Botões do comando de jogos e do controlo remoto

A tabela seguinte lista os botões de hardware e qual o dispositivo de entrada que os suporta.

Button Gamepad Controlo remoto
A/Selecionar Yes Yes
B/Back Yes Yes
D-pad Yes Yes
Menu Yes Yes
View Yes Yes
X e Y Yes Não
Manípulo esquerdo/direito Yes Não
Gatilhos esquerdo/direito Yes Não
Para-choques esquerdo/direito Yes Não

Mapeamento de entrada incorporado

O Windows mapeia automaticamente a entrada do teclado para o gamepad e o controlo remoto:

Keyboard Gamepad/comando remoto
Teclas de seta D-pad (também manípulo esquerdo do comando)
Barra de espaço Botão A/Select
Entrar Botão A/Select
Fuja Botão B/Trás

Navegação por foco XY

A navegação com foco XY permite aos utilizadores navegar na interface da sua aplicação em quatro direções (cima, baixo, esquerda, direita) usando o D-pad ou o stick esquerdo.

Ativar a navegação XY

A navegação de foco XY está integrada no framework XAML. Define XYFocusKeyboardNavigation num contentor para o ativar:

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

Substituir navegação direcional

Utilize as propriedades XYFocusUp, XYFocusDown, XYFocusLeft e XYFocusRight para substituir o comportamento de navegação predefinido:

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

Foco visual

O visual de foco é uma borda que destaca o elemento de interface atualmente focado. Utilize o indicador visual de foco integrado para ajudar os utilizadores a navegar com um gamepad ou controlo remoto.

No WinUI 3, personalize o visual de foco definindo propriedades em FrameworkElement:

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

Focar no envolvimento

O engajamento do foco exige que o utilizador pressione o botão A/Select para interagir com um controlo focado. Isto evita a ativação acidental ao navegar com o D-pad.

Defina IsFocusEngagementEnabled nos controlos que beneficiam deste comportamento:

<Slider IsFocusEngagementEnabled="True"/>

Quando o engajamento do foco está ativado, o utilizador carrega em A/Select para "ativar" o controlo, interage com ele e depois carrega em B para "desengajar".

Modo de rato

Para experiências de aplicações onde a navegação com foco XY não é prática (como mapas ou aplicações de desenho), ativa o modo rato. Isto permite aos utilizadores navegar livremente com um comando, de forma semelhante ao uso de um rato.

Observação

A UWP disponibilizou uma propriedade ao nível de toda a aplicação Application.RequiresPointerMode para este cenário. Microsoft.UI.Xaml.Application no WinUI 3 não tem uma propriedade equivalente, por isso defina RequiresPointer em cada Page.

Para ativar o modo rato para uma página específica, defina RequiresPointer em :Page

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

BarraDeComandos e MenuDeContexto

Use ContextFlyout para apresentar menus contextuais acessíveis com o botão Menu no comando:

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

Melhores práticas

  • Teste a sua aplicação com experiências de 2 pés (desktop) e 10 pés (TV).
  • Garanta que todas as funcionalidades são acessíveis apenas com navegação com o D-pad.
  • Use XYFocusKeyboardNavigation em contentores para permitir a navegação direcional.
  • Coloque o conteúdo e os controlos mais importantes no topo ou início do seu layout.
  • Não dependa de botões exclusivos de um dispositivo de entrada para interações críticas.
  • Last updated on