Interaktionen mit Gamepads und Fernbedienungen

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.

Überblick

In diesem Thema wird erläutert, was Sie in Ihrem Interaktionsdesign berücksichtigen sollten (oder was Sie nicht berücksichtigen müssen, wenn die Plattform dies für Sie übernimmt), sowie Anleitungen, Empfehlungen und Vorschläge zum Erstellen von Windows-Anwendungen gegeben, die unabhängig von Gerät, Eingabetyp oder Benutzerfähigkeiten und -vorlieben mit Freude genutzt werden können.

Die Anwendung sollte in der 2-Fuß-Umgebung genauso intuitiv und einfach sein wie in der 10-Fuß-Umgebung (und umgekehrt). 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.

Optimieren Sie für 2-Fuß- und 10-Fuß-Erfahrungen

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 sowohl für die Verwendung in 2-Fuß- als auch in 10-Fuß-Erlebnissen und mit allen Eingabegeräten optimieren können (jeweils mit Verweis auf den entsprechenden Abschnitt in diesem Thema).

Gamepad und Remotesteuerung

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

Die Qualität der Funktionalität des Gamepads und der Fernbedienung, die Sie direkt beim Auspacken 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 mit den im folgenden Diagramm angegebenen Namen bezeichnet.

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.

Integrierte Schaltflächenunterstützung

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

*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;
}

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

Aktionsschaltflächen sind Schaltflächen, die verwendet werden können, um die Navigation in einer 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 das Gamepad derzeit das einzige Eingabegerät, das Beschleunigerfunktionen für Windows-Apps auf der Xbox One unterstützt.

In der folgenden Tabelle sind die in die UWP integrierte Beschleuniger-Unterstü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.

XY-Fokusnavigation und Interaktion

Wenn Ihre App die korrekte Fokusnavigation für die Tastatur unterstützt, lässt sich dies gut auf Gamepad und Fernbedienung übertragen. 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 der Tastatur als auch vom Gamepad verwendet – sie lösen sowohl KeyDown- als auch KeyUp-Ereignisse aus, und beide navigieren nur zu Steuerelementen, die die Eigenschaften IsTabStop="True" und Visibility="Visible" haben. 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.

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. Setzen Sie UseSystemFocusVisuals="True" oder fügen Sie einen visuellen Fokus manuell hinzu.
• 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.Programmatic festlegen, wodurch die Fokusanzeige sichtbar bleibt, wenn sie vorher sichtbar war, und verborgen, wenn sie vorher verborgen war.

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 Benutzeroberfläche

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 es nicht garantieren, dass das Verhalten 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 des visuellen Baums 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 "Vier" der beste Fokuskandidat. Der Fokus wird jedoch auf Button "Drei" verschoben, weil das übergeordnete Element UserControl den Fokus zwingt, sich dorthin zu bewegen, sobald es sich außerhalb seines visuellen Baums 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 TextBlockzwischen 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

Wenn Sie eine CommandBar verwenden, bedenken Sie das Problem beim Scrollen durch eine Liste, wie unter Problem: UI-Elemente hinter langen Scroll-Listen/Gittern erwähnt. Die folgende Abbildung zeigt ein UI-Layout mit dem CommandBar am unteren Ende einer Liste/eines Rasters. Der Benutzer muss bis zum Ende der Liste/des Rasters scrollen, um zum CommandBar zu gelangen.

Was geschieht, wenn Sie die CommandBaroben aufgeführte Liste/das Raster einfügen? Während ein Benutzer, der in der Liste oder dem Raster nach unten scrollt, zurück nach oben scrollen muss, um die zuerst genannte Option zu erreichen, erfordert dies etwas weniger Aufwand 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 CommandBar-Elemente nicht vertikal stapeln können, besteht eine weitere Möglichkeit darin, sie gegen die Bildlaufrichtung anzuordnen (z. B. links oder rechts von einer vertikal scrollenden Liste oder am oberen oder unteren Rand einer horizontal scrollenden Liste), wenn dies gut zu Ihrem UI-Layout passt.

Wenn Ihre App über ein CommandBar verfügt, dessen Elemente von den Benutzern leicht zugänglich sein müssen, sollten Sie diese Elemente in einem ContextFlyout platzieren und aus dem CommandBar entfernen. ContextFlyout ist 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 ContextFlyout klicken, wird das Kontextmenü eingeblendet. 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.

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
• Fokusengagement
• Mausmodus

Problem: UI-Elemente nach langen Scroll-Listen/Rastern

Die in der folgenden Abbildung angezeigte ListView der Eigenschaften ist eine sehr lange scrollbare Liste. Wenn das Engagement nicht erforderlich ist, wird der Fokus auf das erste Element in der Liste gesetzt, wenn der Benutzer zur 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 es schmerzhaft ist, dass der Benutzer die gesamte Liste durchlaufen muss – das heißt, wenn die Liste nicht kurz genug ist, um diese Erfahrung akzeptabel zu machen – sollten Sie andere Optionen in Betracht ziehen.

Solutions

Neuanordnen der Benutzeroberfläche

Wenn Ihr anfänglicher Fokus nicht auf den unteren Rand der Seite gelegt wird, sind UI-Elemente, die über einer langen Scrolling-Liste platziert werden, in der Regel einfacher zugänglich als wenn sie darunter 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 vertikal scrollenden Liste oder vertikal zu einer horizontal scrollenden Liste) eine noch bessere Barrierefreiheit verbessert.

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 darauf beruht, dass immer nur ein fokussierbares UI-Element auf einmal angesteuert wird, kann ein ScrollViewer, der keine fokussierbaren Elemente enthält (wie etwa einer, der nur aus Text besteht, wie in diesem Beispiel), dazu führen, dass der Benutzer nicht in der Lage ist, den gesamten Inhalt im ScrollViewer 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 Zeiger über die gesamte Seite verschieben kann, wobei die Erfahrung mit Gamepad oder Fernbedienung ähnlich ist wie bei der Nutzung einer Maus auf einem PC.

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 beispielsweise eine Seite mit einem WebView Steuerelement haben, das im Mausmodus nur innerhalb des Steuerelements arbeitet, während die XY-Fokusnavigation überall sonst verwendet wird. Um einen Zeiger anzufordern, können Sie angeben, ob Sie ihn wünschen, wenn ein Steuerelement oder eine Seite aktiv ist oder wenn eine Seite den Fokus hat.

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. Um dies zu tun, legen Sie die Application.RequiresPointerMode-Eigenschaft so auf WhenRequested fest, dass der Mausmodus nur aktiviert wird, wenn ein Steuerelement oder eine Seite dies erfordert.

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.

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 mit RequiresPointer="WhenEngaged" betätigt, wird der Mausmodus auf dem Steuerelement aktiviert, bis der Benutzer die Steuerung loslässt. 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>

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 ist, während ein untergeordnetes Element es nicht ist.

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 das Vergeben einer Seite dieser Eigenschaft:

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

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 ihn 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 Pagefest RequiresPointer="WhenFocused".
3. Setzen Sie für den Vollbildmodus Page, RequiresPointer="Never" fest.

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

Visuelle Fokuselemente

Das Fokusvisual ist der Rahmen um das UI-Element, das derzeit den Fokus besitzt. Dies hilft dem Benutzer, sich zu orientieren, sodass er die Benutzeroberfläche einfach navigieren kann, ohne verloren zu gehen.

Mit einem visuellen Update und zahlreichen Anpassungsoptionen, die dem Fokusvisual 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/Fernbedienung 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.

Positionierung des anfänglichen visuellen 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 dort der Inhaltsfluss der App in der Regel beginnt.

Klares Sichtbarmachen des Fokus

Ein Fokusvisual sollte immer auf dem Bildschirm sichtbar sein, damit der Benutzer weitermachen kann, wo 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 zu dieser Regel wäre für Vollbild-Erfahrungen wie das Ansehen von Videos oder Bilder, in deren Fall es nicht angebracht wäre, die Fokusanzeige zu zeigen.

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 gibt der Reveal-Fokus den Benutzern ein besseres Verständnis darüber, wo der Fokus liegt und wohin er sich bewegt.

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

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

Weitere Informationen finden Sie in der Anleitung für Reveal Focus.

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.

Overlay-Lichtausblendung

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 an jedem FlyoutBase festlegen, um die Rauchschicht zu aktivieren oder zu deaktivieren. Standardmäßig ist es auf Auto so, dass sie auf Xbox aktiviert und auf anderen Plattformen deaktiviert ist. Weitere Informationen finden Sie unter „Modal vs light dismiss“.

Fokusinteraktion

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

Wenn die Eigenschaft IsFocusEngagementEnabled bei einem FrameworkElement-Objekt auf True festgelegt ist, wird das Steuerelement als fokuserforderlich markiert. Dies bedeutet, dass der Benutzer die A/Select-Schaltfläche drücken muss, um das Steuerelement zu aktivieren und damit zu interagieren. Wenn sie fertig sind, können sie die Taste "B/Zurück" drücken, um die Steuerung zu deaktivieren und zu verlassen.

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 eine UI, die eine Fokusfalle 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 eintreten: Wenn der Benutzer das erste Mal nach rechts drückt, würde der Fokus auf Slider verschoben, und wenn er erneut nach rechts drückt, würde der Slider-Knopf nach rechts bewegt werden. Der Benutzer würde den Griff nach rechts schieben und erreicht die Schaltfläche nicht.

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

Nun kann der Benutzer zu jedem der Steuerelemente navigieren, indem er auf dem D-Pad oder dem linken Stick nach oben und unten drückt. Wenn der Slider im Fokus ist, kann er nach links und rechts drücken, um den Slider Regler wie erwartet zu bewegen.

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

Wenn eine Fokusverlagerung in Slider 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.

Steuerelemente für Elemente

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

• ListBox
• ListView
• GridView
• FlipView

Im Gegensatz zu dem Slider-Steuerelement fangen diese Steuerelemente den Fokus nicht in sich selbst ein; jedoch können sie bei großen Datenmengen zu Problemen mit der Benutzerfreundlichkeit führen. Im Folgenden ist ein Beispiel für ein ListView, das eine große Datenmenge 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 zuerst durch jedes Element im ListView navigieren. Wenn ListView eine große Menge an Daten enthält, kann dies unangenehm und keine optimale Benutzererfahrung sein.

Um dieses Problem zu lösen, setzen Sie die Eigenschaft IsFocusEngagementEnabled="True" auf ListView so, dass eine Interaktion erforderlich ist. Auf diese Weise kann der Benutzer ListView schnell überspringen, indem er einfach eine Taste 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 einen ScrollViewer mit fokussierbarem Inhalt haben, können Sie durch Navigation zu ScrollViewer standardmäßig seine fokussierbaren Elemente durchlaufen. Wie in einem ListView, müssen Sie durch jedes Element scrollen, um außerhalb des ScrollViewerElements zu navigieren.

Wenn der ScrollViewerkeinen fokussierbaren Inhalt hat, z. B. wenn er nur Text enthält, können Sie IsFocusEngagementEnabled="True" so festlegen, dass der Benutzer die ScrollViewer mit der A/Select-Schaltfläche aktivieren 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, IsTabStop="True" auf dem ScrollViewer festzulegen, 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 ScrollViewer vorhanden sind.

Standardeinstellungen für die Fokusaktivierung

Einige Steuerelemente führen häufig zu einem Einfangen des Fokus, sodass deren Standardeinstellungen eine Fokusaktivierung erfordern. Andere hingegen haben standardmäßig die Fokusaktivierung deaktiviert, können aber von einer Aktivierung profitieren. In der folgenden Tabelle sind diese Steuerelemente und ihre standardmäßigen Fokusaktivierungsverhalten aufgeführt.

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. Die universelle Windows-Plattform ermöglicht ihnen jedoch auch das Erstellen von Apps, 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. Durch das Befolgen der Empfehlungen in diesem Artikel können Sie sicherstellen, dass Ihre App sowohl auf dem Fernseher als auch auf einem PC so gut wie möglich ist.

Verwandte Artikel

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