Interacciones de controlador para juegos y control remoto

Crea experiencias de interacción en tu aplicación de SDK de Aplicaciones para Windows que funcionan bien con el controlador para juegos y la entrada de control remoto, además del mouse, el teclado y la entrada táctil.

Información general

El controlador para juegos y el control remoto son los dispositivos de entrada principales para la experiencia de Xbox de 10 pies. La aplicación Windows debe ser utilizable y accesible a través de estos tipos de entrada, así como los tipos de entrada de PC tradicionales.

Consulta Diseño para Xbox y TV para obtener instrucciones generales de diseño para la experiencia de 10 pies.

APIs clave

Controlador para juegos y botones de control remoto

En la tabla siguiente se enumeran los botones de hardware y qué dispositivo de entrada los admite.

Button Controlador para juegos Control remoto
A/Seleccionar Sí Sí
B/Atrás Sí Sí
D-pad Sí Sí
Menú Sí Sí
Ver Sí Sí
X e Y Sí No
Stick izquierdo/derecho Sí No
Desencadenadores de izquierda y derecha Sí No
Parachoques izquierdo/derecho Sí No

Mapeo de entradas integrado

Windows asigna automáticamente la entrada del teclado al controlador para juegos y al control remoto:

Teclado Controlador para juegos/remoto
Teclas de flecha D-pad (también stick izquierdo en el controlador para juegos)
Barra espaciadora Botón A/Select
Entrar Botón A/Select
Escapar Botón B / Atrás

Navegación con foco XY

La navegación con foco XY permite a los usuarios navegar por la interfaz de usuario de la aplicación en cuatro direcciones (arriba, abajo, izquierda, derecha) mediante el panel D o el stick izquierdo.

Habilitación de la navegación XY

La navegación con foco XY está integrada en el marco XAML. Establezca XYFocusKeyboardNavigation en un contenedor para habilitarlo:

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

Invalidar la navegación direccional

Use las propiedades XYFocusUp, XYFocusDown, XYFocusLeft y XYFocusRight para anular el comportamiento de navegación predeterminado:

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

Indicador visual de foco

El objeto visual de foco es un borde que resalta el elemento de interfaz de usuario centrado actualmente. Usa el objeto visual de enfoque integrado para ayudar a los usuarios a navegar con el controlador para juegos o el control remoto.

En WinUI 3, personalice el objeto visual de foco estableciendo propiedades en FrameworkElement:

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

Enfoque en la participación

La interacción con el foco requiere que el usuario presione el botón A/Seleccionar para interactuar con un control centrado. Esto evita la activación accidental mientras navega con el panel D.

Establezca IsFocusEngagementEnabled en controles que se benefician de este comportamiento:

<Slider IsFocusEngagementEnabled="True"/>

Cuando la interacción de foco está habilitada, el usuario presiona A/Select para "interactuar" con el control, interactúa con él y, a continuación, presiona B para "desconectarse".

Modo del mouse

En el caso de las experiencias de aplicación en las que la navegación con foco XY no es práctica (por ejemplo, mapas o aplicaciones de dibujo), habilite el modo de mouse. Esto permite a los usuarios navegar libremente con un controlador para juegos, similar al uso de un mouse.

Nota:

UWP ofrece una propiedad para toda la aplicación Application.RequiresPointerMode para este escenario. Microsoft.UI.Xaml.Application en WinUI 3 no tiene una propiedad equivalente, por lo que se establece RequiresPointer en cada Page en su lugar.

Para habilitar el modo de mouse para una página específica, establezca RequiresPointer en :Page

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

CommandBar y ContextFlyout

Usa ContextFlyout para proporcionar menús contextuales accesibles a través del botón Menú del controlador para juegos:

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

Prácticas recomendadas

  • Pruebe la aplicación con ambas experiencias: para escritorio (2 pies) y para televisión (10 pies).
  • Asegúrese de que todas las funciones sean accesibles solo con navegación D-pad.
  • Usa XYFocusKeyboardNavigation en los contenedores para habilitar la navegación direccional.
  • Coloque el contenido y los controles más importantes en la parte superior o al principio del diseño.
  • No confíe en botones únicos para un dispositivo de entrada para interacciones críticas.
  • Last updated on