Interazioni con game pad e telecomando

Crea esperienze di interazione nella tua app SDK per app di Windows che funzionano bene con game pad e input di controllo remoto, oltre a mouse, tastiera e tocco.

Informazioni generali

Game pad e telecomando sono i dispositivi di input principali per l'esperienza Xbox a 10 piedi. L'app Windows deve essere utilizzabile e accessibile tramite questi tipi di input, nonché i tipi di input del PC tradizionali.

Vedi Progettazione per Xbox e TV per indicazioni di progettazione generali per l'esperienza di 10 piedi.

API chiave

Pulsanti di controllo remoto e game pad

La tabella seguente elenca i pulsanti hardware e il dispositivo di input che li supporta.

Button Game pad Telecomando
A/Seleziona Yes Yes
B/Indietro Yes Yes
D-pad Yes Yes
Menù Yes Yes
View Yes Yes
X e Y Yes NO
Levetta sinistra/destra Yes NO
Trigger sinistri/destri Yes NO
Paraurti sinistro/destro Yes NO

Mappatura di input integrata

Windows associa automaticamente l'input da tastiera al gamepad e al telecomando:

Keyboard Gamepad/telecomando
Tasti freccia D-pad (e anche levetta sinistra sul gamepad)
Barra spaziatrice Pulsante A/Seleziona
Entrare Pulsante A/Seleziona
Fuga Tasto B/Indietro

Navigazione del focus XY

Lo spostamento dello stato attivo XY consente agli utenti di spostarsi nell'interfaccia utente dell'app in quattro direzioni (su, giù, sinistra, destra) usando il D-pad o il joystick sinistro.

Abilita la navigazione XY

La navigazione dello stato attivo XY è integrata nel framework XAML. Impostare XYFocusKeyboardNavigation su un contenitore per abilitarlo:

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

Ignorare la navigazione direzionale

Utilizza le proprietà XYFocusUp, XYFocusDown, XYFocusLeft e XYFocusRight per sovrascrivere il comportamento di navigazione predefinito:

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

Indicatore visivo di messa a fuoco

L'indicatore visivo di messa a fuoco è un bordo che evidenzia l'elemento dell'interfaccia utente attualmente focalizzato. Usa l'indicatore visivo dello stato attivo integrato per aiutare gli utenti a navigare con gamepad o telecomando.

In WinUI 3, personalizza l'indicatore visivo dello stato attivo configurando le proprietà di FrameworkElement:

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

Focalizzazione sull'engagement

L'attivazione dello stato attivo richiede che l'utente prema il pulsante A/Seleziona per interagire con un controllo attivo. Ciò impedisce l'attivazione accidentale durante lo spostamento con il D-pad.

Impostare IsFocusEngagementEnabled sui controlli che traggono vantaggio da questo comportamento:

<Slider IsFocusEngagementEnabled="True"/>

Quando la modalità focus è abilitata, l'utente preme A/Select per attivare il controllo, interagisce con esso e quindi preme B per disattivarlo.

Modalità mouse

Per le esperienze delle app in cui la navigazione del focus XY non è pratica (come le mappe o le app di disegno), attiva la modalità mouse. Ciò consente agli utenti di spostarsi liberamente con un game pad, simile all'uso di un mouse.

Annotazioni

UWP metteva a disposizione una proprietà Application.RequiresPointerMode valida per l'intera app per questo scenario. Microsoft.UI.Xaml.Application in WinUI 3 non ha una proprietà equivalente, quindi imposta RequiresPointer su ogni Page.

Per abilitare la modalità mouse per una pagina specifica, impostare RequiresPointer su Page:

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

CommandBar e ContextFlyout

Usa ContextFlyout per fornire menu di scelta rapida accessibili tramite il pulsante Menu nel game pad:

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

Procedure consigliate

  • Testa l'app con entrambe le esperienze: 2-foot (desktop) e 10-foot (TV).
  • Assicurarsi che tutte le funzionalità siano accessibili solo con lo spostamento tramite D-pad.
  • Usare XYFocusKeyboardNavigation nei contenitori per abilitare la navigazione direzionale.
  • Posizionare il contenuto e i controlli più importanti all'inizio o all'inizio del layout.
  • Non fare affidamento sui pulsanti univoci per un dispositivo di input per le interazioni critiche.
  • Last updated on