Gamepad i interakcje zdalnego sterowania

Twórz środowiska interakcji w aplikacji Zestaw SDK do aplikacji systemu Windows, które działają dobrze z gamepadem i wejściem zdalnego sterowania, oprócz myszy, klawiatury i dotyku.

Przegląd

Gamepad i pilot zdalnego sterowania są podstawowymi urządzeniami wejściowymi w interfejsie Xbox 10-foot. Aplikacja Windows powinna być użyteczna i dostępna za pośrednictwem tych typów danych wejściowych, a także tradycyjnych typów danych wejściowych komputera.

Zobacz Projektowanie dla konsol Xbox i telewizorów, aby uzyskać ogólne wskazówki projektowe dotyczące środowiska 10-foot.

Kluczowe interfejsy API

Gamepad i przyciski zdalnego sterowania

W poniższej tabeli wymieniono przyciski sprzętowe i urządzenia wejściowe, które je obsługuje.

Button Kontroler Zdalne sterowanie
A/Wybierz Tak Tak
B/Wstecz Tak Tak
D-pad Tak Tak
Menu Tak Tak
View Tak Tak
X i Y Tak Nie.
Lewy/prawy kij Tak Nie.
Lewy/prawy przycisk Tak Nie.
Zderzaki z lewej/prawej Tak Nie.

Wbudowane mapowanie danych wejściowych

Windows automatycznie mapuje dane wejściowe klawiatury na gamepad i zdalne sterowanie:

Keyboard Gamepad/remote
klawisze strzałek D-pad (również lewy kij na gamepad)
Spacja Przycisk A/Select
Wejść Przycisk A/Select
Ucieczka Przycisk B lub Wstecz

Nawigacja fokusem XY

Funkcja nawigacji fokusu XY umożliwia użytkownikom poruszanie się po interfejsie użytkownika aplikacji w czterech kierunkach (w górę, w dół, w lewo i w prawo) za pomocą D-pada lub lewego drążka.

Włączanie nawigacji XY

Nawigacja fokusu XY jest wbudowana w strukturę XAML. Ustaw XYFocusKeyboardNavigation dla kontenera, aby go włączyć:

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

Zastąpienie nawigacji kierunkowej

Użyj właściwości XYFocusUp, XYFocusDown, XYFocusLeft i XYFocusRight, aby zastąpić domyślne działanie nawigacji:

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

Wizualizacja fokusu

Wizualizacja fokusu to obramowanie, które wyróżnia obecnie skoncentrowany element interfejsu użytkownika. Użyj wbudowanej wizualizacji fokusu, aby ułatwić użytkownikom nawigację za pomocą gamepadu lub zdalnego sterowania.

W programie WinUI 3 dostosuj wizualizację fokusu, ustawiając właściwości na :FrameworkElement

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

Skupienie na zaangażowaniu

Zaangażowanie fokusu wymaga od użytkownika naciśnięcia przycisku A/Select w celu interakcji z fokusową kontrolką. Zapobiega to przypadkowej aktywacji podczas nawigowania za pomocą konsoli D.

Ustaw wartość IsFocusEngagementEnabled dla kontrolek, dla których to zachowanie jest korzystne:

<Slider IsFocusEngagementEnabled="True"/>

Gdy włączony jest tryb przechwycenia fokusu, użytkownik naciska przycisk A/Select, aby „uaktywnić” kontrolkę, korzysta z niej, a następnie naciska przycisk B, aby ją „wyłączyć”.

Tryb pracy myszy

W przypadku środowisk aplikacji, w których nawigacja fokusu XY nie jest praktyczna (np. mapy lub aplikacje do rysowania), włącz tryb myszy. Dzięki temu użytkownicy mogą swobodnie poruszać się za pomocą gamepadu, podobnie jak przy użyciu myszy.

Uwaga / Notatka

Platforma UWP udostępniała w tym scenariuszu właściwość dla całej aplikacji Application.RequiresPointerMode. Microsoft.UI.Xaml.Application W WinUI 3 nie ma równoważnej właściwości, więc zamiast tego ustaw RequiresPointer dla każdego Page.

Aby włączyć tryb myszy dla określonej strony, ustaw wartość RequiresPointer na :Page

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

CommandBar i ContextFlyout

Użyj elementu ContextFlyout, aby udostępnić menu kontekstowe dostępne za pomocą przycisku Menu na kontrolerze:

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

Najlepsze praktyki

  • Przetestuj aplikację zarówno w środowisku 2 stóp (komputery stacjonarne), jak i 10 stóp (telewizory).
  • Upewnij się, że wszystkie funkcje są dostępne tylko za pomocą nawigacji W-pad.
  • Użyj elementu XYFocusKeyboardNavigation w kontenerach, aby włączyć nawigację kierunkową.
  • Umieść najważniejszą zawartość i kontrolki u góry lub na początku układu.
  • Nie należy polegać na przyciskach unikatowych dla jednego urządzenia wejściowego w przypadku interakcji krytycznych.
  • Last updated on