Interacties tussen Gamepad en beheer op afstand

Bouw interactie-ervaringen in uw Windows App SDK-app die goed werken met gamepad- en afstandsbedieningsinvoer, naast muis, toetsenbord en aanraakscherm.

Overzicht

Een gamepad en een afstandsbediening zijn de belangrijkste invoermiddelen voor de Xbox 10-foot-interface. Uw Windows-app moet bruikbaar en toegankelijk zijn via deze invoertypen, evenals de traditionele pc-invoertypen.

Zie Ontwerpen voor Xbox en TV voor algemene ontwerprichtlijnen voor de 10-foot-ervaring.

Sleutel-API's

• Windows.Gaming.Input
• Windows.Gaming.Input.Gamepad
• XYFocusKeyboardNavigation

Gamepad- en afstandsbediening-knoppen

De volgende tabel bevat hardwareknoppen en welk invoerapparaat deze ondersteunt.

Ingebouwde invoerkoppeling

Windows wijst automatisch toetsenbordinvoer toe aan gamepad en afstandsbediening:

Navigatie met XY-focus

Met XY-focusnavigatie kunnen gebruikers door de gebruikersinterface van uw app navigeren in vier richtingen (omhoog, omlaag, links, rechts) met behulp van het D-pad of de linkerstick.

XY-navigatie inschakelen

XY-focusnavigatie is ingebouwd in het XAML-framework. Stel XYFocusKeyboardNavigation in op een container om deze in te schakelen:

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

Richtingsnavigatie overschrijven

Gebruik de eigenschappen XYFocusUp, XYFocusDown, XYFocusLeft en XYFocusRight om het standaardnavigatiegedrag te overschrijven:

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

Focus visueel

De focus visual is een rand die het UI-element met de huidige focus markeert. Gebruik de ingebouwde focusvisual om gebruikers te helpen navigeren met gamepad of beheer op afstand.

Pas in WinUI 3 de focusvisual aan door eigenschappen in te stellen op FrameworkElement:

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

Focus op betrokkenheid

Voor focusbetrokkenheid moet de gebruiker op de knop A/Selecteren drukken om te communiceren met een gericht besturingselement. Dit voorkomt onbedoelde activering tijdens het navigeren met het D-pad.

Stel IsFocusEngagementEnabled in voor besturingselementen die baat hebben bij dit gedrag:

<Slider IsFocusEngagementEnabled="True"/>

Wanneer focusbetrokkenheid is ingeschakeld, drukt de gebruiker op A/Select om het besturingselement te 'betrekken', communiceert met het besturingselement en drukt vervolgens op B om 'los te schakelen'.

Muismodus

Voor app-ervaringen waarbij XY-focusnavigatie niet praktisch is (zoals kaarten of teken-apps), schakelt u de muismodus in. Hierdoor kunnen gebruikers vrij navigeren met een gamepad, vergelijkbaar met het gebruik van een muis.

Als u de muismodus voor een specifieke pagina wilt inschakelen, stelt u RequiresPointer in op de Page:

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

CommandBar en ContextFlyout

Gebruik ContextFlyout dit om contextmenu's toegankelijk te maken via de menuknop op gamepad:

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

Aanbevolen procedures

• Test uw app met ervaringen van 2 voet (desktop) en 10 voet (TV).
• Zorg ervoor dat alle functionaliteit alleen toegankelijk is met navigatie via D-pad.
• Gebruik XYFocusKeyboardNavigation op containers om directionele navigatie in te schakelen.
• Plaats de belangrijkste inhoud en besturingselementen boven of aan het begin van uw indeling.
• Vertrouw niet op knoppen die uniek zijn voor één invoerapparaat voor kritieke interacties.

Verwante artikelen

• Ontwerpen voor Xbox en tv
• Toetsenbordinteracties
• Navigeren met focus