Interaktionen mit Gamepads und Fernbedienungen

Erstellen Sie Interaktionserfahrungen in Ihrer Windows App SDK-App, die gut mit Gamepad- und Fernbedienungseingaben funktionieren, zusätzlich zu Maus, Tastatur und Toucheingabe.

Überblick

Gamepad und Fernbedienung sind die primären Eingabegeräte für die Xbox 10-Fuß-Erfahrung. Ihre Windows-App sollte über diese Eingabetypen sowie die herkömmlichen PC-Eingabetypen nutzbar und zugänglich sein.

Unter Design für Xbox und TV finden Sie allgemeine Designanleitungen für die 10-Fuß-Erfahrung.

Wichtige APIs

Gamepad- und Fernbedienungstasten

In der folgenden Tabelle sind die Hardwaretasten und das jeweilige Eingabegerät aufgeführt, das sie unterstützt.

Button Gamepad Remotesteuerung
A/Auswählen Yes Yes
B/Zurück Yes Yes
D-Pad Yes Yes
Menü Yes Yes
Ansicht Yes Yes
X und Y Yes Nein
Linker/rechter Stick Yes Nein
Linker/rechter Auslöser Yes Nein
Linke/rechte Stoßstangen Yes Nein

Integrierte Eingabezuordnung

Windows ordnet Tastatureingaben automatisch Gamepad und Fernbedienung zu:

Tastatur Gamepad/Fernbedienung
Pfeiltasten D-Pad (auch linker Stick am Gamecontroller)
Leertaste A/Auswahl-Taste
Eingeben A/Auswahl-Taste
Flucht Schaltfläche "B/Zurück"

XY-Fokusnavigation

Mit der XY-Fokusnavigation können Benutzer auf der Benutzeroberfläche Ihrer App in vier Richtungen (nach oben, unten, links, rechts) mit dem Steuerkreuz oder dem linken Stick navigieren.

Aktivieren der XY-Navigation

Die XY-Fokusnavigation ist in das XAML-Framework integriert. Legen Sie XYFocusKeyboardNavigation für einen Container fest, um ihn zu aktivieren:

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

Direktionale Navigation überschreiben

Verwenden Sie die Eigenschaften XYFocusUp, XYFocusDown, XYFocusLeft und XYFocusRight, um das Standardnavigationsverhalten zu überschreiben:

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

Visuelle Fokuselemente

Der visuelle Fokus ist ein Rahmen, der das aktuell fokussierte UI-Element hervorhebt. Verwenden Sie die integrierte Fokusanzeige, um Benutzern bei der Navigation mit Gamepad oder Fernbedienung zu helfen.

Passen Sie in WinUI 3 die Fokusvisualisierung an, indem Sie Eigenschaften auf FrameworkElement festlegen:

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

Fokusinteraktion

Die Fokusaktivierung erfordert, dass der Benutzer die A/Auswahl-Schaltfläche drückt, um mit einem fokussierten Steuerelement zu interagieren. Dadurch wird die versehentliche Aktivierung beim Navigieren mit dem D-Pad verhindert.

Legen Sie IsFocusEngagementEnabled für Steuerelemente fest, die von diesem Verhalten profitieren:

<Slider IsFocusEngagementEnabled="True"/>

Wenn die Fokusbindung aktiviert ist, drückt der Benutzer A/Select, um das Steuerelement zu „aktivieren“, interagiert damit und drückt dann B, um es wieder zu „deaktivieren“.

Mausmodus

Aktivieren Sie für App-Oberflächen, bei denen die XY-Fokusnavigation nicht praktisch ist (z. B. Karten oder Zeichnungs-Apps), den Mausmodus. Auf diese Weise können Benutzer frei mit einem Gamepad navigieren, ähnlich wie die Verwendung einer Maus.

Hinweis

UWP hat für dieses Szenario eine app-weite Application.RequiresPointerMode Eigenschaft bereitgestellt. Microsoft.UI.Xaml.Application in WinUI 3 verfügt nicht über eine entsprechende Eigenschaft, daher legen Sie RequiresPointer stattdessen für jedes Page fest.

Um den Mausmodus für eine bestimmte Seite zu aktivieren, setzen Sie RequiresPointer auf der Page:

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

CommandBar und ContextFlyout

Verwenden Sie ContextFlyout, um Kontextmenüs bereitzustellen, auf die über die Menü-Taste auf dem Gamepad zugegriffen werden kann:

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

Bewährte Vorgehensweisen

  • Testen Sie Ihre App sowohl für Desktop- als auch für TV-Benutzererlebnisse aus nächster bzw. aus größerer Entfernung.
  • Stellen Sie sicher, dass alle Funktionen allein über die D-Pad-Navigation zugänglich sind.
  • Verwenden Sie XYFocusKeyboardNavigation auf Containern, um die direktionale Navigation zu aktivieren.
  • Platzieren Sie die wichtigsten Inhalte und Steuerelemente am oberen oder anfang des Layouts.
  • Verlassen Sie sich bei kritischen Interaktionen nicht auf Schaltflächen, die spezifisch für ein bestimmtes Eingabegerät sind.
  • Last updated on