Interaktionen mit Gamepad und Fernbedienung

Viele Interaktionsfunktionen werden zwischen Gamepad, Fernbedienung und Tastatur gemeinsam genutzt.

Erstellen Sie Interaktionserfahrungen in Ihren Windows-Anwendungen, die sicherstellen, dass Ihre App sowohl über die herkömmlichen Eingabetypen von PCs, Laptops und Tablets (Maus, Tastatur, Toucheingabe usw.) als auch über die Eingabetypen, die für fernseh- und Xbox 10-Fuß-Erfahrung typisch sind, wie z. B. gamepad und Fernbedienung, verfügbar ist.

Allgemeine Designanleitungen für Windows-Anwendungen in der 10-Fuß-Erfahrung finden Sie unter Entwerfen für Xbox und TV.

Übersicht

In diesem Thema wird erläutert, was Sie in Ihrem Interaktionsdesign berücksichtigen sollten (oder was Sie nicht tun, wenn die Plattform für Sie aussieht), sowie Anleitungen, Empfehlungen und Vorschläge zum Erstellen von Windows-Anwendungen, die unabhängig von Gerät, Eingabetyp oder Benutzerfähigkeiten und -einstellungen verwendet werden können.

Die Anwendung sollte so intuitiv und einfach in der 2-Fuß-Umgebung wie in der 10-Fuß-Umgebung (und umgekehrt) sein. Unterstützen Sie die bevorzugten Geräte des Benutzers, machen Sie den Benutzeroberflächenfokus klar und unverkennbar, ordnen Sie Inhalte so an, dass die Navigation konsistent und vorhersehbar ist, und geben Sie Benutzern den kürzesten Weg, den sie tun möchten.

Hinweis

Die meisten Codeausschnitte in diesem Thema sind in XAML/C# enthalten; Die Prinzipien und Konzepte gelten jedoch für alle Windows-Apps. Wenn Sie eine HTML/JavaScript-Windows-App für Xbox entwickeln, schauen Sie sich die hervorragende TVHelpers-Bibliothek auf GitHub an.

Optimieren für 2-Fuß- und 10-Fuß-Umgebungen

Es wird mindestens empfohlen, Ihre Anwendungen zu testen, um sicherzustellen, dass sie sowohl in 2-Fuß- als auch in 10-Fuß-Szenarien gut funktionieren, und dass alle Funktionen auffindbar und für das Xbox-Gamepad und die Fernbedienung zugänglich sind.

Hier sind einige weitere Möglichkeiten, wie Sie Ihre App für die Verwendung sowohl in der 2-Fuß- als auch in der 10-Fuß-Oberfläche und mit allen Eingabegeräten optimieren können (jeder Link zum entsprechenden Abschnitt in diesem Thema).

Hinweis

Da Xbox-Gamepads und Fernbedienungen viele Windows-Tastaturverhalten und -umgebungen unterstützen, sind diese Empfehlungen für beide Eingabetypen geeignet. Weitere Informationen zur Tastatur finden Sie unter Tastaturinteraktionen .

Funktion	Beschreibung
XY-Fokusnavigation und Interaktion	Mit der XY-Fokusnavigation kann der Benutzer in der Benutzeroberfläche Ihrer App navigieren. Dies beschränkt den Benutzer jedoch auf die Navigation nach oben, unten, links und rechts. Empfehlungen für den Umgang mit diesen und anderen Überlegungen werden in diesem Abschnitt dargelegt.
Mausmodus	Die Navigation mit dem XY-Fokus ist für einige Arten von Anwendungen, wie z.B. Karten oder Zeichen- und Mal-Apps, unpraktisch oder gar unmöglich. In diesen Fällen können Benutzer im Mausmodus frei mit einem Gamepad oder einer Fernbedienung navigieren, genau wie eine Maus auf einem PC.
Visueller Fokus	Der visuelle Fokus ist ein Rahmen, der das aktuell fokussierte Benutzeroberflächen-Element hervorhebt. Dies hilft dem Benutzer, die Benutzeroberfläche, mit der er navigiert oder interagiert, schnell zu identifizieren.
Fokusaktivierung	Die Fokussierung erfordert, dass der Benutzer die A/Auswahltaste auf einem Gamepad oder einer Fernbedienung drückt, wenn ein Element der Benutzeroberfläche den Fokus hat, um mit ihm zu interagieren.
Hardwaretasten	Das Gamepad und die Fernbedienung bieten sehr unterschiedliche Tasten und Konfigurationen.

Gamepad und Fernbedienung

Genau wie Tastatur und Maus für PC, und touch ist für Smartphone und Tablet, Gamepad und Fernbedienung die wichtigsten Eingabegeräte für die 10-Fuß-Erfahrung. In diesem Abschnitt wird erläutert, was die Hardwaretasten sind und was sie tun. Im XY-Fokusnavigations- und Interaktions - und Mausmodus erfahren Sie, wie Sie Ihre App bei Verwendung dieser Eingabegeräte optimieren.

Die Qualität des Gamepads und des Remoteverhaltens, das Sie sofort erhalten, hängt davon ab, wie gut die Tastatur in Ihrer App unterstützt wird. Eine gute Möglichkeit, um sicherzustellen, dass Ihre App gut mit Gamepad/Fernbedienung funktioniert, besteht darin, sicherzustellen, dass sie gut mit der Tastatur auf dem PC funktioniert, und testen Sie dann mit Gamepad/Fernbedienung, um Schwachstellen auf der Benutzeroberfläche zu finden.

Hardwaretasten

In diesem Dokument werden Schaltflächen durch die im folgenden Diagramm angegebenen Namen verwiesen.

Wie Sie aus dem Diagramm sehen können, gibt es einige Schaltflächen, die auf Gamepads unterstützt werden, die auf der Fernbedienung nicht unterstützt werden, und umgekehrt. Sie können zwar Schaltflächen verwenden, die nur auf einem Eingabegerät unterstützt werden, um die Navigation auf der Benutzeroberfläche zu beschleunigen, beachten Sie jedoch, dass die Verwendung für kritische Interaktionen zu einer Situation führen kann, in der der Benutzer nicht mit bestimmten Teilen der Benutzeroberfläche interagieren kann.

In der folgenden Tabelle sind alle Hardwareschaltflächen aufgeführt, die von Windows-Apps unterstützt werden und welche Eingabegeräte sie unterstützen.

Taste	Gamepad	Remotesteuerung
A/Select button	Ja	Ja
Schaltfläche "B/Zurück"	Ja	Ja
Steuerkreuz (D-Pad)	Ja	Ja
Menüschaltfläche	Ja	Ja
Ansicht-Taste	Ja	Ja
X- und Y-Schaltflächen	Ja	No
Linker Stick	Ja	No
Rechter Stick	Ja	No
Links- und Rechtstrigger	Ja	No
Linke und rechte Bumper	Ja	No
OneGuide-Schaltfläche	No	Ja
Schaltfläche "Lautstärke"	No	Ja
Kanalschaltfläche	No	Ja
Schaltflächen für Mediensteuerelemente	No	Ja
Taste zum Stummschalten	No	Ja

Integrierte Schaltflächenunterstützung

UWP ordnet vorhandene Tastatureingabeverhalten automatisch Gamepad- und Fernbedienungseingaben zu. In der folgenden Tabelle sind diese integrierten Zuordnungen aufgeführt.

Tastatur	Gamepad/Fernbedienung
Pfeiltasten	D-Pad (auch linker Stick auf Gamepad)
Leertaste	A/Select button
EINGABETASTE	A/Select button
Escape	B/Zurück-Taste*

*Wenn weder die KeyDown - noch keyUp-Ereignisse für die B-Schaltfläche von der App behandelt werden, wird das SystemNavigationManager.BackRequested-Ereignis ausgelöst, was zu einer Rückwärtsnavigation innerhalb der App führen sollte. Sie müssen dies jedoch selbst implementieren, wie im folgenden Codeausschnitt:

// This code goes in the MainPage class

public MainPage()
{
    this.InitializeComponent();

    // Handling Page Back navigation behaviors
    SystemNavigationManager.GetForCurrentView().BackRequested +=
        SystemNavigationManager_BackRequested;
}

private void SystemNavigationManager_BackRequested(
    object sender,
    BackRequestedEventArgs e)
{
    if (!e.Handled)
    {
        e.Handled = this.BackRequested();
    }
}

public Frame AppFrame { get { return this.Frame; } }

private bool BackRequested()
{
    // Get a hold of the current frame so that we can inspect the app back stack
    if (this.AppFrame == null)
        return false;

    // Check to see if this is the top-most page on the app back stack
    if (this.AppFrame.CanGoBack)
    {
        // If not, set the event to handled and go back to the previous page in the
        // app.
        this.AppFrame.GoBack();
        return true;
    }
    return false;
}

Hinweis

Wenn die B-Schaltfläche verwendet wird, um zurück zu wechseln, zeigen Sie keine Schaltfläche "Zurück" auf der Benutzeroberfläche an. Wenn Sie eine Navigationsansicht verwenden, wird die Schaltfläche "Zurück" automatisch ausgeblendet. Weitere Informationen zur Rückwärtsnavigation finden Sie unter Navigationsverlauf und Rückwärtsnavigation für Windows-Apps.

Windows-Apps auf Xbox One unterstützen auch das Drücken der Menüschaltfläche , um Kontextmenüs zu öffnen. Weitere Informationen finden Sie unter CommandBar und ContextFlyout.

Accelerator-Unterstützung

Tastenkombinationen sind Schaltflächen, die verwendet werden können, um die Navigation über eine Benutzeroberfläche zu beschleunigen. Diese Schaltflächen können jedoch für ein bestimmtes Eingabegerät eindeutig sein. Denken Sie daher daran, dass nicht alle Benutzer diese Funktionen verwenden können. Tatsächlich ist Gamepad derzeit das einzige Eingabegerät, das Zugriffstastenfunktionen für Windows-Apps auf Xbox One unterstützt.

In der folgenden Tabelle sind die in die UWP integrierten Zugriffstastenunterstützung sowie die Unterstützung aufgeführt, die Sie selbst implementieren können. Nutzen Sie diese Verhaltensweisen in Ihrer benutzerdefinierten Benutzeroberfläche, um eine konsistente und benutzerfreundliche Benutzererfahrung zu ermöglichen.

Interaktion	Tastatur/Maus	Gamepad	Integriert für:	Empfohlen für:
Bild nach oben/unten	Bild nach oben/unten	Links-/Rechtstrigger	CalendarView, ListBox, ListViewBase, ListView, ScrollViewerSelector, LoopingSelector, ComboBox, FlipView	Ansichten, die den vertikalen Bildlauf unterstützen
Seite links/rechts	Keine	Linke/rechte Stoßstangen	ListBox, ListViewBase, ListView, ScrollViewer, Selector, LoopingSelector, FlipView	Ansichten, die horizontalen Bildlauf unterstützen
Vergrößern/Verkleinern	STRG+/-	Links-/Rechtstrigger	Keine	ScrollViewer, Ansichten, die das Vergrößern und Verkleinen unterstützen
Navigationsbereich öffnen/schließen	Keine	Ansicht	Keine	Navigationsbereiche
Suche	Keine	Schaltfläche "Y"	Keine	Verknüpfung zur Hauptsuchfunktion in der App
Kontextmenü öffnen	Klicken Sie mit der rechten Maustaste auf	Menüschaltfläche	ContextFlyout	Kontextmenüs

XY-Fokusnavigation und Interaktion

Wenn Ihre App die richtige Fokusnavigation für die Tastatur unterstützt, wird dies gut in Gamepad und Fernbedienung übersetzt. Die Navigation mit den Pfeiltasten wird dem D-Pad (sowie dem linken Stick auf gamepad) zugeordnet, und die Interaktion mit UI-Elementen wird der EINGABETASTE/Auswahltaste zugeordnet (siehe Gamepad und Fernbedienung).

Viele Ereignisse und Eigenschaften werden sowohl von Tastatur als auch gamepad verwendet– sie werden sowohl ausgelöst als auch Ereignisse, KeyDown KeyUp und beide werden nur zu Steuerelementen navigieren, die über die Eigenschaften IsTabStop="True" verfügen.Visibility="Visible" Anleitungen zum Tastaturentwurf finden Sie unter Tastaturinteraktionen.

Wenn die Tastaturunterstützung ordnungsgemäß implementiert ist, funktioniert Ihre App vernünftigerweise. Es kann jedoch einige zusätzliche Arbeit geben, um jedes Szenario zu unterstützen. Überlegen Sie sich die spezifischen Anforderungen Ihrer App, um die bestmögliche Benutzererfahrung zu bieten.

Wichtig

Der Mausmodus ist für Windows-Apps, die auf Xbox One ausgeführt werden, standardmäßig aktiviert. Um den Mausmodus zu deaktivieren und die XY-Fokusnavigation zu aktivieren, legen Sie fest Application.RequiresPointerMode=WhenRequested.

Debuggen von Fokusproblemen

Die FocusManager.GetFocusedElement-Methode teilt Ihnen mit, welches Element derzeit den Fokus hat. Dies ist nützlich für Situationen, in denen die Position des Fokusvisuals möglicherweise nicht offensichtlich ist. Sie können diese Informationen wie folgt im Visual Studio-Ausgabefenster protokollieren:

page.GotFocus += (object sender, RoutedEventArgs e) =>
{
    FrameworkElement focus = FocusManager.GetFocusedElement() as FrameworkElement;
    if (focus != null)
    {
        Debug.WriteLine("got focus: " + focus.Name + " (" +
            focus.GetType().ToString() + ")");
    }
};

Es gibt drei häufige Gründe, warum die XY-Navigation möglicherweise nicht wie erwartet funktioniert:

• Die IsTabStop - oder Visibility-Eigenschaft ist falsch festgelegt.
• Das Steuerelement, das den Fokus erhält, ist tatsächlich größer als Sie denken – XY-Navigation betrachtet die Gesamtgröße des Steuerelements (ActualWidth und ActualHeight), nicht nur den Teil des Steuerelements, der etwas Interessantes rendert.
• Ein fokussierbares Steuerelement befindet sich über einem anderen. Die XY-Navigation unterstützt keine Steuerelemente, die sich überlappen.

Wenn die XY-Navigation nach der Behebung dieser Probleme immer noch nicht wie erwartet funktioniert, können Sie manuell auf das Element verweisen, das Sie mithilfe der unter Außerkraftsetzung der Standardnavigation beschriebenen Methode fokussieren möchten.

Wenn die XY-Navigation wie beabsichtigt funktioniert, aber keine Fokusanzeige angezeigt wird, kann eine der folgenden Probleme die Ursache sein:

• Sie haben das Steuerelement neu erstellt und keine Fokusanzeige einbezogen. Festlegen UseSystemFocusVisuals="True" oder Hinzufügen eines visuellen Fokus manuell.
• Sie haben den Fokus durch Aufrufen Focus(FocusState.Pointer)verschoben. Der FocusState-Parameter steuert, was mit dem visuellen Fokus geschieht. Im Allgemeinen sollten Sie dies auf FocusState.Programmaticfestlegen, wodurch das Fokusbild sichtbar bleibt, wenn es vorher sichtbar war, und ausgeblendet, wenn es zuvor ausgeblendet wurde.

Der Rest dieses Abschnitts enthält ausführliche Informationen zu allgemeinen Entwurfsproblemen bei der Verwendung der XY-Navigation und bietet verschiedene Möglichkeiten, diese zu lösen.

Nicht zugängliche Ui

Da die XY-Fokusnavigation den Benutzer auf die Bewegung nach oben, unten, links und rechts beschränkt, können Sie szenarien verwenden, in denen Teile der Benutzeroberfläche nicht zugänglich sind. Das folgende Diagramm zeigt ein Beispiel für die Art des UI-Layouts, das die XY-Fokusnavigation nicht unterstützt. Beachten Sie, dass das Element in der Mitte nicht über Gamepad/Fernbedienung zugegriffen werden kann, da die vertikale und horizontale Navigation priorisiert wird und das mittlere Element nie hoch genug Priorität hat, um den Fokus zu erhalten.

Wenn das Neuanordnen der Benutzeroberfläche aus irgendeinem Grund nicht möglich ist, verwenden Sie eine der im nächsten Abschnitt erläuterten Techniken, um das Standardfokusverhalten außer Kraft zu setzen.

Überschreiben der Standardnavigation

Während die Universelle Windows-Plattform versucht, sicherzustellen, dass die D-Pad/linke Sticknavigation für den Benutzer sinnvoll ist, kann das Verhalten nicht garantiert werden, das für die Absichten Ihrer App optimiert ist. Die beste Möglichkeit, sicherzustellen, dass die Navigation für Ihre App optimiert ist, besteht darin, sie mit einem Gamepad zu testen und zu bestätigen, dass auf jedes UI-Element der Benutzer in einer Weise zugegriffen werden kann, die für die Szenarien Ihrer App sinnvoll ist. Falls die Szenarien Ihrer App ein Verhalten aufrufen, das nicht über die bereitgestellte XY-Fokusnavigation erreicht wird, sollten Sie die Empfehlungen in den folgenden Abschnitten befolgen und/oder das Verhalten außer Kraft setzen, um den Fokus auf ein logisches Element zu setzen.

Der folgende Codeausschnitt zeigt, wie Sie das XY-Fokusnavigationsverhalten außer Kraft setzen können:

<StackPanel>
    <Button x:Name="MyBtnLeft"
            Content="Search" />
    <Button x:Name="MyBtnRight"
            Content="Delete"/>
    <Button x:Name="MyBtnTop"
            Content="Update" />
    <Button x:Name="MyBtnDown"
            Content="Undo" />
    <Button Content="Home"  
            XYFocusLeft="{x:Bind MyBtnLeft}"
            XYFocusRight="{x:Bind MyBtnRight}"
            XYFocusDown="{x:Bind MyBtnDown}"
            XYFocusUp="{x:Bind MyBtnTop}" />
</StackPanel>

Wenn sich der Fokus in diesem Fall auf der Home Schaltfläche befindet und der Benutzer nach links navigiert, wechselt der Fokus zur MyBtnLeft Schaltfläche. Wenn der Benutzer nach rechts navigiert, wird der Fokus auf die MyBtnRight Schaltfläche verschoben usw.

Um zu verhindern, dass sich der Fokus von einem Steuerelement in einer bestimmten Richtung bewegt, verwenden Sie die XYFocus* Eigenschaft, um ihn auf dasselbe Steuerelement zu zeigen:

<Button Name="HomeButton"  
        Content="Home"  
        XYFocusLeft ="{x:Bind HomeButton}" />

Mithilfe dieser XYFocus Eigenschaften kann ein übergeordnetes Steuerelement auch die Navigation seiner untergeordneten Elemente erzwingen, wenn sich der nächste Fokuskandidat außerhalb der visuellen Struktur befindet, es sei denn, das untergeordnete Element, das den Fokus hat, verwendet dieselbe XYFocus Eigenschaft.

<StackPanel Orientation="Horizontal" Margin="300,300">
    <UserControl XYFocusRight="{x:Bind ButtonThree}">
        <StackPanel>
            <Button Content="One"/>
            <Button Content="Two"/>
        </StackPanel>
    </UserControl>
    <StackPanel>
        <Button x:Name="ButtonThree" Content="Three"/>
        <Button Content="Four"/>
    </StackPanel>
</StackPanel>

Wenn sich der Fokus im obigen Beispiel auf Button "Zwei" befindet und der Benutzer nach rechts navigiert, ist Button der beste Fokuskandidat vier. Der Fokus wird jedoch auf Button "Drei" verschoben, da das übergeordnete Element UserControl gezwungen wird, dort zu navigieren, wenn er sich außerhalb der visuellen Struktur befindet.

Pfad der geringsten Klicks

Versuchen Sie, dem Benutzer die am häufigsten verwendeten Aufgaben in der geringsten Anzahl von Klicks zu ermöglichen. Im folgenden Beispiel wird der TextBlock zwischen der Wiedergabeschaltfläche (die anfangs den Fokus erhält) und einem häufig verwendeten Element platziert, sodass ein unnötiges Element zwischen Prioritätsaufgaben platziert wird.

Im folgenden Beispiel wird der TextBlock stattdessen über der Schaltfläche "Wiedergeben " platziert. Durch einfaches Neuanordnen der Benutzeroberfläche werden unnötige Elemente nicht zwischen Prioritätsaufgaben platziert, wodurch die Benutzerfreundlichkeit Ihrer App erheblich verbessert wird.

CommandBar und ContextFlyout

Bedenken Sie bei der Verwendung einer CommandBar das Problem des Bildlaufs durch eine Liste, wie in "Problem" erwähnt: UI-Elemente, die sich nach langen Bildlauflisten/Rastern befinden. Die folgende Abbildung zeigt ein UI-Layout mit dem CommandBar unteren Rand einer Liste/eines Rasters. Der Benutzer müsste bis zum Ende der Liste/des Rasters scrollen, um die Liste/das CommandBarRaster zu erreichen.

Was geschieht, wenn Sie die CommandBar oben aufgeführte Liste/das Raster einfügen? Während ein Benutzer, der einen Bildlauf nach unten in der Liste/des Rasters ausgeführt hat, einen Bildlauf nach oben durchführen muss, um die CommandBarNavigation zu erreichen, ist es etwas weniger Navigation als die vorherige Konfiguration. Beachten Sie, dass dies davon ausgeht, dass der anfängliche Fokus Ihrer App neben oder oberhalb des CommandBarBereichs platziert wird. Dieser Ansatz funktioniert nicht so gut, wenn sich der anfängliche Fokus unterhalb der Liste/des Rasters befindet. Wenn es sich bei diesen CommandBar Elementen um globale Aktionselemente handelt, auf die nicht sehr häufig zugegriffen werden muss (z. B. eine Schaltfläche "Synchronisieren "), kann es akzeptabel sein, sie über dem Listen-/Raster zu haben.

Obwohl Sie die CommandBarElemente nicht vertikal stapeln können, ist es eine weitere Option, die Sie möglicherweise berücksichtigen möchten, wenn sie in der Bildlaufrichtung (z. B. links oder rechts von einer liste mit vertikalem Bildlauf oder am oberen oder unteren Rand einer horizontal scrollenden Liste) angezeigt werden.

Wenn Ihre App über eine CommandBar App verfügt, deren Elemente von Benutzern leicht zugänglich sein müssen, sollten Sie diese Elemente in einem ContextFlyout platzieren und aus dem CommandBarElement entfernen. ContextFlyoutist eine Eigenschaft von UIElement und ist das Kontextmenü, das diesem Element zugeordnet ist. Wenn Sie auf dem PC mit der rechten Maustaste auf ein Element mit einem ContextFlyoutKontextmenü klicken, wird dieses Kontextmenü angezeigt. Auf Xbox One geschieht dies, wenn Sie die Menüschaltfläche drücken, während sich der Fokus auf einem solchen Element befindet.

Herausforderungen beim Ui-Layout

Einige UI-Layouts sind aufgrund der Art der XY-Fokusnavigation schwieriger und sollten fallweise ausgewertet werden. Es gibt zwar keinen einzigen "richtigen" Weg, und welche Lösung Sie auswählen, liegt zwar an den spezifischen Anforderungen Ihrer App, es gibt jedoch einige Techniken, mit denen Sie eine großartige TV-Erfahrung erzielen können.

Um dies besser zu verstehen, sehen wir uns eine imaginäre App an, die einige dieser Probleme und Techniken veranschaulicht, um sie zu überwinden.

Hinweis

Diese gefälschte App soll UI-Probleme und potenzielle Lösungen für sie veranschaulichen und nicht die beste Benutzererfahrung für Ihre jeweilige App anzeigen.

Es folgt eine imaginäre Immobilien-App, die eine Liste der zum Verkauf verfügbaren Häuser, eine Karte, eine Beschreibung einer Immobilie und andere Informationen anzeigt. Diese App stellt drei Herausforderungen dar, die Sie mithilfe der folgenden Techniken überwinden können:

• Neuanordnen der Benutzeroberfläche
• Fokusaktivierung
• Mausmodus

Problem: UI-Elemente, die sich nach langen Bildlauflisten/Rastern befinden

Die ListView von Eigenschaften, die in der folgenden Abbildung angezeigt werden, ist eine sehr lange Bildlaufliste. Wenn für das ListViewEngagement nicht erforderlich ist, wird der Fokus auf das erste Element in der Liste gesetzt, wenn der Benutzer zu der Liste navigiert. Damit der Benutzer die Schaltfläche "Zurück " oder "Weiter " erreicht, muss er alle Elemente in der Liste durchlaufen. In Solchen Fällen, in denen der Benutzer die gesamte Liste durchlaufen muss, ist schmerzhaft – d. h., wenn die Liste nicht kurz genug ist, damit diese Erfahrung akzeptabel ist – sie sollten andere Optionen in Betracht ziehen.

Lösungen

Neuanordnen der Benutzeroberfläche

Wenn Der anfängliche Fokus nicht am unteren Rand der Seite platziert wird, sind UI-Elemente, die über einer langen Bildlaufliste platziert werden, in der Regel einfacher zugänglich, als wenn sie unten platziert werden. Wenn dieses neue Layout für andere Geräte funktioniert, kann das Ändern des Layouts für alle Gerätefamilien anstelle spezieller UI-Änderungen nur für Xbox One ein kostengünstigerer Ansatz sein. Darüber hinaus wird durch das Platzieren von UI-Elementen gegen die Bildlaufrichtung (d. h. horizontal zu einer liste mit vertikalem Bildlauf oder vertikal zu einer horizontal scrollenden Liste) eine noch bessere Barrierefreiheit erzielt.

Fokusaktivierung

Wenn das Engagement erforderlich ist, wird das gesamte ListView zu einem einzigen Fokusziel. Der Benutzer kann den Inhalt der Liste umgehen, um zum nächsten fokussierbaren Element zu gelangen. Erfahren Sie mehr darüber, welche Steuerelemente das Engagement unterstützen und wie sie bei der Fokusaktivierung verwendet werden.

Problem: ScrollViewer ohne fokussierbare Elemente

Da die XY-Fokusnavigation von der Navigation zu einem fokussierbaren UI-Element gleichzeitig verwendet wird, kann ein ScrollViewer , der keine fokussierbaren Elemente enthält (z. B. eines mit nur Text, wie in diesem Beispiel), zu einem Szenario führen, in dem der Benutzer nicht in der ScrollViewerLage ist, den gesamten Inhalt im Bereich anzuzeigen. Lösungen zu diesem und anderen zugehörigen Szenarien finden Sie unter Focus Engagement.

Problem: Ui mit freiem Bildlauf

Wenn Ihre App eine benutzeroberfläche mit freiem Bildlauf erfordert, z. B. eine Zeichnungsoberfläche oder in diesem Beispiel eine Karte, funktioniert die XY-Fokusnavigation einfach nicht. In solchen Fällen können Sie den Mausmodus aktivieren, damit der Benutzer innerhalb eines UI-Elements frei navigieren kann.

Mausmodus

Wie in XY-Fokusnavigation und -interaktion beschrieben, wird auf Xbox One der Fokus mithilfe eines XY-Navigationssystems verschoben, sodass der Benutzer den Fokus von Steuerelement zu Steuerelement verschieben kann, indem er nach oben, unten, links und rechts bewegt wird. Einige Steuerelemente, z . B. WebView und MapControl, erfordern jedoch eine mausähnliche Interaktion, bei der Benutzer den Mauszeiger frei innerhalb der Grenzen des Steuerelements bewegen können. Es gibt auch einige Apps, in denen es sinnvoll ist, dass der Benutzer den Mauszeiger über die gesamte Seite verschieben kann, mit einer Erfahrung mit Gamepad/Remote, ähnlich wie benutzer auf einem PC mit einer Maus.

Für diese Szenarien sollten Sie einen Zeiger (Mausmodus) für die gesamte Seite oder auf einem Steuerelement innerhalb einer Seite anfordern. Ihre App könnte z. B. eine Seite mit einem WebView Steuerelement haben, das den Mausmodus nur während des Steuerelements verwendet, und die XY-Fokusnavigation überall sonst. Um einen Zeiger anzufordern, können Sie angeben, ob ein Steuerelement oder eine Seite eingebunden wird oder wenn eine Seite den Fokus hat.

Hinweis

Das Anfordern eines Zeigers, wenn ein Steuerelement den Fokus erhält, wird nicht unterstützt.

Sowohl für XAML als auch für gehostete Web-Apps, die auf Xbox One ausgeführt werden, ist der Mausmodus für die gesamte App standardmäßig aktiviert. Es wird dringend empfohlen, diese Option zu deaktivieren und ihre App für die XY-Navigation zu optimieren. Legen Sie dazu die Application.RequiresPointerMode Eigenschaft so WhenRequested fest, dass Sie den Mausmodus nur aktivieren, wenn ein Steuerelement oder eine Seite dafür aufruft.

Verwenden Sie dazu in einer XAML-App den folgenden Code in Ihrer App Klasse:

public App()
{
    this.InitializeComponent();
    this.RequiresPointerMode =
        Windows.UI.Xaml.ApplicationRequiresPointerMode.WhenRequested;
    this.Suspending += OnSuspending;
}

Weitere Informationen, einschließlich Beispielcode für HTML/JavaScript, finden Sie unter Deaktivieren des Mausmodus.

Das folgende Diagramm zeigt die Tastenzuordnungen für Gamepads/Fernbedienungen im Mausmodus.

Hinweis

Der Mausmodus wird nur auf Xbox One mit Gamepad/Fernbedienung unterstützt. Bei anderen Gerätefamilien und Eingabetypen wird sie automatisch ignoriert.

Verwenden Sie die RequiresPointer-Eigenschaft auf einem Steuerelement oder einer Seite, um den Mausmodus darauf zu aktivieren. Diese Eigenschaft weist drei mögliche Werte auf: Never (Standardwert), WhenEngagedund WhenFocused.

Aktivieren des Mausmodus auf einem Steuerelement

Wenn der Benutzer ein Steuerelement verwendet RequiresPointer="WhenEngaged", wird der Mausmodus auf dem Steuerelement aktiviert, bis der Benutzer es deaktiviert. Der folgende Codeausschnitt veranschaulicht einen einfachen MapControl Codeausschnitt, der den Mausmodus aktiviert, wenn er aktiviert wird:

<Page>
    <Grid>
        <MapControl IsEngagementRequired="true"
                    RequiresPointer="WhenEngaged"/>
    </Grid>
</Page>

Hinweis

Wenn ein Steuerelement den Mausmodus aktiviert, muss es auch eine Interaktion mit IsEngagementRequired="true"erfordern. Andernfalls wird der Mausmodus nie aktiviert.

Wenn sich ein Steuerelement im Mausmodus befindet, befinden sich auch die geschachtelten Steuerelemente im Mausmodus. Der angeforderte Modus seiner untergeordneten Elemente wird ignoriert – es ist unmöglich, dass ein übergeordnetes Element im Mausmodus, aber ein untergeordnetes Element nicht sein kann.

Darüber hinaus wird der angeforderte Modus eines Steuerelements nur überprüft, wenn es den Fokus erhält, sodass sich der Modus nicht dynamisch ändert, während es den Fokus hat.

Aktivieren des Mausmodus auf einer Seite

Wenn eine Seite über die Eigenschaft RequiresPointer="WhenFocused"verfügt, wird der Mausmodus für die gesamte Seite aktiviert, wenn sie den Fokus erhält. Der folgende Codeausschnitt veranschaulicht die Angabe einer Seite mit dieser Eigenschaft:

<Page RequiresPointer="WhenFocused">
    ...
</Page>

Hinweis

Der WhenFocused Wert wird nur für Page-Objekte unterstützt. Wenn Sie versuchen, diesen Wert für ein Steuerelement festzulegen, wird eine Ausnahme ausgelöst.

Deaktivieren des Mausmodus für Vollbildinhalte

In der Regel sollten Sie den Cursor ausblenden, wenn Video oder andere Inhaltstypen im Vollbildmodus angezeigt werden, da er den Benutzer ablenken kann. Dieses Szenario tritt auf, wenn der Rest der App den Mausmodus verwendet, sie aber beim Anzeigen von Vollbildinhalten deaktivieren möchten. Um dies zu erreichen, platzieren Sie den Vollbildinhalt eigenständig Page, und führen Sie die folgenden Schritte aus.

1. Legen Sie im App Objekt fest RequiresPointerMode="WhenRequested".
2. Legen Sie in jedem Page Objekt mit Ausnahme des Vollbildmodus PagefestRequiresPointer="WhenFocused".
3. Legen Sie für den Vollbildmodus Pagefest RequiresPointer="Never".

Auf diese Weise wird der Cursor nie angezeigt, wenn Der Vollbildinhalt angezeigt wird.

Visueller Fokus

Das Fokusvisual ist der Rahmen um das UI-Element, das derzeit den Fokus besitzt. Dies hilft dem Benutzer dabei, den Benutzer so zu orientieren, dass er auf einfache Weise in der Benutzeroberfläche navigieren kann, ohne verloren zu gehen.

Mit einem visuellen Update und zahlreichen Anpassungsoptionen, die dem Visuellen Fokus hinzugefügt wurden, können Entwickler darauf vertrauen, dass ein einzelnes Fokusvisual gut auf PCs und Xbox One sowie auf allen anderen Windows-Geräten funktioniert, die Tastatur und/oder Gamepad/Remote unterstützen.

Während dasselbe Fokusvisual auf verschiedenen Plattformen verwendet werden kann, unterscheidet sich der Kontext, in dem der Benutzer sie findet, für die 10-Fuß-Erfahrung geringfügig. Sie sollten davon ausgehen, dass der Benutzer nicht voll auf den gesamten FERNSEHbildschirm achtet, und daher ist es wichtig, dass das aktuell fokussierte Element für den Benutzer jederzeit deutlich sichtbar ist, um die Frustration der Suche nach dem Visuellen zu vermeiden.

Es ist auch wichtig zu beachten, dass das Fokusvisual standardmäßig bei Verwendung eines Gamepads oder einer Fernbedienung, aber nicht einer Tastatur angezeigt wird. Selbst wenn Sie sie nicht implementieren, wird sie daher angezeigt, wenn Sie Ihre App auf Xbox One ausführen.

Visuelle Platzierung des anfänglichen Fokus

Platzieren Sie beim Starten einer App oder beim Navigieren zu einer Seite den Fokus auf ein UI-Element, das als erstes Element sinnvoll ist, für das der Benutzer Maßnahmen ergreifen würde. Beispielsweise kann eine Foto-App den Fokus auf das erste Element in der Galerie setzen, und eine Musik-App, die zu einer detaillierten Ansicht eines Liedes navigiert wurde, könnte den Fokus auf die Wiedergabeschaltfläche setzen, um Die Wiedergabe von Musik zu erleichtern.

Versuchen Sie, den anfänglichen Fokus in den oberen linken Bereich Ihrer App zu setzen (oder oben rechts für einen Rechts-nach-links-Fluss). Die meisten Benutzer neigen dazu, sich zuerst auf diese Ecke zu konzentrieren, da der App-Inhaltsfluss im Allgemeinen beginnt.

Klares Sichtbarmachen des Fokus

Ein Fokusvisual sollte immer auf dem Bildschirm sichtbar sein, damit der Benutzer an der Stelle aufgehört hat, an der er aufgehört hat, ohne nach dem Fokus zu suchen. Ebenso sollte immer ein fokussierbares Element auf dem Bildschirm vorhanden sein, z. B. keine Popups mit nur Text und keine fokussierbaren Elemente.

Eine Ausnahme dieser Regel wäre für Vollbildfunktionen, z. B. das Ansehen von Videos oder das Anzeigen von Bildern, in denen es nicht angebracht wäre, das Fokusvisual anzuzeigen.

Reveal Focus

Der Reveal-Fokus ist ein Lichteffekt, der den Rahmen von fokussierbaren Elementen animiert, z. B. eine Schaltfläche, wenn der Benutzer Gamepad oder Tastaturfokus darauf verschiebt. Durch das Animieren des Leuchteffekts um den Rahmen der fokussierten Elemente bietet Reveal-Fokus benutzern ein besseres Verständnis darüber, wo sich der Fokus befindet und wo sich der Fokus befindet.

Der Reveal-Fokus ist standardmäßig deaktiviert. Für 10 Fuß-Umgebungen sollten Sie den Fokus einblenden, indem Sie die Application.FocusVisualKind-Eigenschaft in Ihrem App-Konstruktor festlegen.

    if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
    {
        this.FocusVisualKind = FocusVisualKind.Reveal;
    }

Weitere Informationen finden Sie in den Anleitungen für den Reveal-Fokus.

Anpassen des visuellen Fokus

Wenn Sie die Fokusanzeige anpassen möchten, können Sie dies tun, indem Sie die Eigenschaften ändern, die mit der Fokusanzeige für jedes Steuerelement zusammenhängen. Es gibt mehrere solche Eigenschaften, die Sie nutzen können, um Ihre App zu personalisieren.

Sie können sogar die vom System bereitgestellten Fokusanzeigen deaktivieren, indem Sie ihre eigenen visuellen Zustände verwenden. Weitere Informationen finden Sie unter VisualState.

Überlagerung mit hellem Ausblenden

Um die Aufmerksamkeit des Benutzers auf die UI-Elemente zu lenken, die der Benutzer gerade mit dem Gamecontroller oder der Fernbedienung manipuliert, fügt UWP automatisch eine "Rauch"-Ebene hinzu, die Bereiche außerhalb der Popup-UI abdeckt, wenn die App auf Xbox One ausgeführt wird. Dies erfordert keine zusätzliche Arbeit, ist aber etwas, das Sie beim Entwerfen der Benutzeroberfläche berücksichtigen sollten. Sie können die Eigenschaft für jede FlyoutBase Einstellung LightDismissOverlayMode festlegen, um die Rauchschicht zu aktivieren oder zu deaktivieren. Standardmäßig wird Autosie auf Xbox aktiviert und an anderer Stelle deaktiviert. Weitere Informationen finden Sie unter "Modal vs light dismiss".

Fokusaktivierung

Die Fokusaktivierung soll die Verwendung eines Gamepads oder einer Fernbedienung für die Interaktion mit einer App vereinfachen.

Hinweis

Das Festlegen der Fokusaktivierung wirkt sich nicht auf tastatur oder andere Eingabegeräte aus.

Wenn die Eigenschaft IsFocusEngagementEnabled für ein FrameworkElement-Objekt auf /> festgelegt Trueist, markiert sie das Steuerelement als erfordernde Fokusaktivierung. Dies bedeutet, dass der Benutzer die A/Select-Schaltfläche drücken muss, um das Steuerelement zu "interagieren" und damit zu interagieren. Wenn sie fertig sind, können sie die Taste "B/Zurück " drücken, um das Steuerelement zu deaktivieren und davon zu navigieren.

Hinweis

IsFocusEngagementEnabled ist eine neue API und noch nicht dokumentiert.

Fokusfang

Die Fokusfangung geschieht, wenn ein Benutzer versucht, in der Benutzeroberfläche einer App zu navigieren, aber innerhalb eines Steuerelements "gefangen" wird, wodurch es schwierig oder sogar unmöglich ist, außerhalb dieses Steuerelements zu navigieren.

Das folgende Beispiel zeigt die Benutzeroberfläche, die die Fokusfangung erstellt.

Wenn der Benutzer von der linken Schaltfläche zur rechten Schaltfläche navigieren möchte, wäre es logisch, davon auszugehen, dass alles, was er tun müsste, zweimal auf dem D-Pad/linken Stick rechts drücken muss. Wenn der Schieberegler jedoch keine Interaktion erfordert, würde das folgende Verhalten auftreten: Wenn der Benutzer das erste Mal nach rechts drückt, würde der Fokus auf den SliderSchieberegler verschoben, und wenn er erneut nach rechts drückt, würde der SliderZiehpunkt nach rechts verschoben. Der Benutzer würde den Ziehpunkt nach rechts verschieben und könnte nicht zur Schaltfläche gelangen.

Es gibt mehrere Ansätze, um dieses Problem zu umgehen. Eine besteht darin, ein anderes Layout zu entwerfen, ähnlich wie das Beispiel für die Immobilien-App in der XY-Fokusnavigation und -interaktion, bei der wir die Schaltflächen "Zurück" und "Weiter" über der ListViewSchaltfläche "Zurück" verschoben haben. Das vertikale Stapeln der Steuerelemente statt horizontal wie in der folgenden Abbildung würde das Problem lösen.

Nun kann der Benutzer zu den einzelnen Steuerelementen navigieren, indem er auf dem D-Pad/linken Stick nach oben und unten drückt, und wenn der Slider Fokus hat, kann er nach links und rechts drücken, um den Slider Ziehpunkt wie erwartet zu bewegen.

Ein weiterer Ansatz zur Lösung dieses Problems besteht darin, ein Engagement für das SliderProblem zu erfordern. Wenn Sie festlegen IsFocusEngagementEnabled="True", führt dies zu dem folgenden Verhalten.

Wenn die Slider Fokusaktivierung erforderlich ist, kann der Benutzer einfach auf die Schaltfläche auf der rechten Seite gelangen, indem er zweimal auf dem D-Pad/linken Stick nach rechts drückt. Diese Lösung ist großartig, da keine UI-Anpassung erforderlich ist und das erwartete Verhalten erzeugt wird.

Elementsteuerelemente

Neben dem Schieberegler-Steuerelement gibt es andere Steuerelemente, die Sie möglicherweise benötigen möchten, z. B.:

• ListBox
• ListView
• GridView
• FlipView

Slider Im Gegensatz zum Steuerelement fallen diese Steuerelemente nicht in sich selbst auf. Sie können jedoch Probleme mit der Benutzerfreundlichkeit verursachen, wenn sie große Datenmengen enthalten. Im Folgenden finden Sie ein Beispiel für eine ListView Datenmenge, die eine große Menge an Daten enthält.

Ähnlich wie im Slider Beispiel versuchen wir, von der Schaltfläche oben zur Schaltfläche unten mit einem Gamepad/Fernbedienung zu navigieren. Beginnend mit dem Fokus auf der oberen Taste wird durch Drücken auf das D-Pad/Stick der Fokus auf das erste Element im ListView ("Element 1") gesetzt. Wenn der Benutzer erneut nach unten drückt, erhält das nächste Element in der Liste den Fokus, nicht die Schaltfläche unten. Um zur Schaltfläche zu gelangen, muss der Benutzer durch jedes Element im ListView ersten Navigieren navigieren. Wenn die große Menge an Daten enthält, kann dies ListView unannelich und nicht eine optimale Benutzererfahrung sein.

Um dieses Problem zu lösen, legen Sie die Eigenschaft IsFocusEngagementEnabled="True" für die Anforderung eines ListView Engagements fest. Auf diese Weise kann der Benutzer den Vorgang schnell überspringen ListView , indem er einfach nach unten drückt. Sie können jedoch nicht durch die Liste scrollen oder ein Element daraus auswählen, es sei denn, sie aktivieren sie, indem sie die A/Select-Schaltfläche drücken, wenn sie den Fokus hat, und dann die Schaltfläche "B/Zurück " drücken, um das Element zu deaktivieren.

ScrollViewer

Etwas von diesen Steuerelementen unterscheidet sich der ScrollViewer, der eigene Eigenheiten zu berücksichtigen hat. Wenn Sie über einen ScrollViewer fokussierbaren Inhalt verfügen, können Sie standardmäßig zu den ScrollViewer fokussierbaren Elementen navigieren. Wie in einem ListView, müssen Sie durch jedes Element scrollen, um außerhalb des ScrollViewerElements zu navigieren.

Wenn der ScrollViewer Fokus keinen fokussierbaren Inhalt aufweist , z. B. wenn er nur Text enthält, können Sie festlegen IsFocusEngagementEnabled="True" , dass der Benutzer die ScrollViewer Interaktion mithilfe der A/Select-Schaltfläche ausführen kann. Nachdem sie sich engagiert haben, können sie mit dem D-Pad/linken Stick durch den Text scrollen und dann die Taste "B/Zurück " drücken, um den Text zu deaktivieren, wenn sie fertig sind.

Ein anderer Ansatz wäre das Festlegen IsTabStop="True" , ScrollViewer sodass der Benutzer das Steuerelement nicht einbinden muss – er kann einfach den Fokus darauf setzen und dann mit dem D-Pad/linken Stick scrollen, wenn keine fokussierbaren Elemente innerhalb des ScrollViewerSteuerelements vorhanden sind.

Standardeinstellungen für die Fokusaktivierung

Einige Steuerelemente verursachen die Fokusabfangung häufig genug, um ihre Standardeinstellungen so zu garantieren, dass die Fokusaktivierung erforderlich ist, während andere standardmäßig die Fokusaktivierung deaktiviert haben, aber von der Aktivierung profitieren können. In der folgenden Tabelle sind diese Steuerelemente und ihre standardmäßigen Fokusaktivierungsverhalten aufgeführt.

Control	Standardeinstellung für die Fokusaktivierung
CalendarDatePicker	Ein
FlipView	Aus
GridView	Aus
ListBox	Aus
ListView	Aus
ScrollViewer	Aus
SemanticZoom	Aus
Schieberegler	Ein

Alle anderen Windows-Steuerelemente führen zu keinen Verhaltens- oder visuellen Änderungen, wenn IsFocusEngagementEnabled="True".

Zusammenfassung

Sie können Windows-Anwendungen erstellen, die für ein bestimmtes Gerät oder eine bestimmte Oberfläche optimiert sind, aber mit dem Universelle Windows-Plattform können Sie auch Apps erstellen, die auf allen Geräten erfolgreich verwendet werden können, sowohl in der 2-Fuß- als auch in der 10-Fuß-Benutzeroberfläche und unabhängig von der Eingabegerät- oder Benutzerfähigkeit. Die Verwendung der Empfehlungen in diesem Artikel kann sicherstellen, dass Ihre App so gut wie auf dem Fernsehgerät und auf einem PC sein kann.

Verwandte Artikel

• Entwerfen für Xbox und Fernsehgeräte
• Gerätefibel für Windows-Apps