Entwerfen für Xbox und FernsehgeräteDesigning for Xbox and TV

Entwerfen Sie Ihre Windows-APP so, dass Sie gut aussieht und gut auf Xbox One-und TV-Bildschirmen funktioniert.Design your Windows app so that it looks good and functions well on Xbox One and television screens.

Unter Gamepad-und Remote Steuerungs Interaktionen finden Sie Anleitungen zur Interaktion bei UWP-Anwendungen mit der 10-Fuß- Erfahrung.See Gamepad and remote control interactions for guidance on interaction experiences in UWP applications in the 10-foot experience.

ÜbersichtOverview

Dank der universellen Windows-Plattform können Sie großartige Benutzeroberflächen für verschiedene Windows 10-Geräte erstellen.The Universal Windows Platform lets you create delightful experiences across multiple Windows 10 devices. Die Mehrzahl der durch das UWP Framework bereitgestellten Funktionen ermöglichen Apps, auf diesen Geräten ohne zusätzlichen Aufwand die gleiche Benutzeroberfläche (UI) zu verwenden.Most of the functionality provided by the UWP framework enables apps to use the same user interface (UI) across these devices, without additional work. Das Anpassen und Optimieren Ihrer App an Xbox One- und Fernsehbildschirme erfordert jedoch besondere Überlegungen.However, tailoring and optimizing your app to work great on Xbox One and TV screens requires special considerations.

Die Erfahrung, die Sie machen, wenn Sie auf dem Sofa sitzen und mittels eines Gamepads oder einer Fernbedienung mit Ihrem Fernsehgerät interagieren, wird als 3-Meter-Erfahrung (10-Fuß-Erfahrung) bezeichnet.The experience of sitting on your couch across the room, using a gamepad or remote to interact with your TV, is called the 10-foot experience. Der Name kommt daher, dass sich der Benutzer im Allgemeinen ungefähr 3 Meter (10 Fuß) vom Bildschirm entfernt befindet.It is so named because the user is generally sitting approximately 10 feet away from the screen. Dies stellt eine besondere Herausforderung dar, die beispielsweise bei einer 50-cm-Erfahrung (2-Fuß-Erfahrung) oder bei der Interaktion mit einem PC nicht vorhanden ist.This provides unique challenges that aren't present in, say, the 2-foot experience, or interacting with a PC. Wenn Sie eine App für Xbox One oder ein anderes Gerät entwickeln, das Inhalte auf einem Fernsehbildschirm ausgibt und eine Steuerung verwendet, sollten Sie dies stets bedenken.If you are developing an app for Xbox One or any other device that outputs to the TV screen and uses a controller for input, you should always keep this in mind.

Nicht alle Schritte in diesem Artikel sind erforderlich, damit Ihre App gut in 10 Fuß-Umgebungen funktioniert. Wenn Sie diese jedoch kennen und für Ihre App die entsprechenden Entscheidungen treffen, führt dies zu einer besseren 10-Fuß-Erfahrung, die an die spezifischen Anforderungen Ihrer App angepasst ist.Not all of the steps in this article are required to make your app work well for 10-foot experiences, but understanding them and making the appropriate decisions for your app will result in a better 10-foot experience tailored for your app's specific needs. Berücksichtigen Sie die folgenden Designrichtlinien, wenn Sie eine App für eine 10-Fuß-Umgebung entwickeln.As you bring your app to life in the 10-foot environment, consider the following design principles.

EinfachSimple

Ein Entwurf für eine 10-Fuß-Umgebung bedeutet einen einzigartigen Satz von Herausforderungen.Designing for the 10-foot environment presents a unique set of challenges. Auflösung und Anzeigeabstand kann es Menschen schwer machen, zu viele Informationen zu verarbeiten.Resolution and viewing distance can make it difficult for people to process too much information. Versuchen Sie, Ihr Design klar zu halten und auf die einfachsten Komponenten zu reduzieren, die möglich sind.Try to keep your design clean, reduced to the simplest possible components. Die Menge der auf einem Fernseher angezeigten Informationen sollte mit der vergleichbar sein, die Ihnen auf einem Mobiltelefon angezeigt werden, nicht auf einem Desktop.The amount of information displayed on a TV should be comparable to what you'd see on a mobile phone, rather than on a desktop.

Xbox One-Startseite

EinheitlichCoherent

UWP-Apps in 10-Fuß-Umgebungen sollten intuitiv und benutzerfreundlich sein.UWP apps in the 10-foot environment should be intuitive and easy to use. Sorgen Sie für einen klaren und unverkennbaren Fokus.Make the focus clear and unmistakable. Ordnen Sie Inhalte so an, dass Verschiebungen auf dem Bildschirm konsistent und vorhersagbar sind.Arrange content so that movement across the space is consistent and predictable. Stellen Sie Menschen den kürzesten Weg zu dem bereit, was sie tun möchten.Give people the shortest path to what they want to do.

Xbox One-Film-App

Alle im Screenshot gezeigten Filme sind in Microsoft Movies & TV verfügbar.All movies shown in the screenshot are available on Microsoft Movies & TV.

FesselndCaptivating

Der große Bildschirm bietet äußerst faszinierende Erfahrungen, ähnlich wie ein Kino.The most immersive, cinematic experiences take place on the big screen. Rand-Rand-Design, elegante Bewegungen und brillante Farben und Typografien eröffnen Ihren Apps neue Dimensionen.Edge-to-edge scenery, elegant motion, and vibrant use of color and typography take your apps to the next level. Seien Sie mutig, und bieten Sie ein ansprechendes Design.Be bold and beautiful.

Xbox One Avatar-App

Optimierungen für die 10-Fuß-ErfahrungOptimizations for the 10-foot experience

Da Sie nun mit den Grundsätzen eines guten UWP-App-Designs für die 10-Fuß-Erfahrung vertraut sind, lesen Sie die folgenden Übersicht über die verschiedenen Arten, wie Sie Ihre App optimieren und eine hervorragende Benutzerumgebung bereitstellen können.Now that you know the principles of good UWP app design for the 10-foot experience, read through the following overview of the specific ways you can optimize your app and make for a great user experience.

FunktionFeature BESCHREIBUNGDescription
Anpassen von BenutzeroberflächenelementenUI element sizing Die Universelle Windows-Plattform verwendet Skalierung und effektive Pixel, um die Benutzeroberfläche gemäß dem Anzeigeabstand zu skalieren.The Universal Windows Platform uses scaling and effective pixels to scale the UI according to the viewing distance. Wenn Sie verstehen, wie Sie Größen anpassen und auf Ihre Benutzeroberfläche anwenden, hilft Ihnen dies, Ihre App für die 10-Fuß-Umgebung zu optimieren.Understanding sizing and applying it across your UI will help optimize your app for the 10-foot environment.
Fernsehsicherer BereichTV-safe area Die UWP vermeidet automatisch und standardmäßig die Anzeige von Benutzeroberflächenelementen in nicht fernsehsicheren Bereichen (nahe dem Bildschirmrand).The UWP will automatically avoid displaying any UI in TV-unsafe areas (areas close to the edges of the screen) by default. Dies führt jedoch zu einem „Schachteleffekt“, so dass die Benutzeroberfläche einem Briefkastenschlitz ähnelt.However, this creates a "boxed-in" effect in which the UI looks letterboxed. Damit Ihre App auf Fernsehgeräten wirklich immersiv ist, müssen Sie diese so anpassen, dass sie sich auf Fernsehgeräten, die dies unterstützen, bis zu den Rändern erweitert wird.For your app to be truly immersive on TV, you will want to modify it so that it extends to the edges of the screen on TVs that support it.
FarbenColors Die UWP unterstützt Farbdesigns. Daher wird eine App, die das Systemdesign berücksichtigt, auf Xbox One standardmäßig auf dark festgelegt.The UWP supports color themes, and an app that respects the system theme will default to dark on Xbox One. Wenn Ihre App ein bestimmtes Farbdesign verwendet, sollten Sie daran denken, dass sich einige Farben nicht gut für Fernsehbildschirme eignen und daher vermieden werden sollten.If your app has a specific color theme, you should consider that some colors don't work well for TV and should be avoided.
SoundSound Sounds spielen bei der 10 Fuß-Erfahrung eine wichtige Rolle. Sie helfen den Benutzern sich zu vertiefen und liefern Feedback.Sounds play a key role in the 10-foot experience, helping to immerse and give feedback to the user. Die UWP bietet Funktionen, mit denen Sounds für allgemeine Steuerelemente automatisch aktiviert werden, wenn die App auf Xbox One ausgeführt wird.The UWP provides functionality that automatically turns on sounds for common controls when the app is running on Xbox One. Erfahren Sie mehr über die in der Universellen Windows-Plattform integrierte Unterstützung von Sound, und erfahren Sie, wie Sie davon profitieren.Find out more about the sound support built into the UWP and learn how to take advantage of it.
Richtlinien für BenutzeroberflächensteuerelementeGuidelines for UI controls Es gibt mehrere Benutzeroberflächen-Steuerelemente, die auf mehreren Geräten gut funktionieren. Wenn diese jedoch auf Fernsehgeräten verwendet werden, müssen bestimmte Aspekte berücksichtigt werden.There are several UI controls that work well across multiple devices, but have certain considerations when used on TV. Informieren Sie sich über einige bewährte Methoden für die Verwendung dieser Steuerelemente beim Entwerfen für die 10 Fuß-Erfahrung.Read about some best practices for using these controls when designing for the 10-foot experience.
Benutzerdefinierter visueller Zustandsauslöser für XboxCustom visual state trigger for Xbox Um Ihre UWP-App an die 10-Fuß-Erfahrung anzupassen, empfehlen wir Ihnen, einen benutzerdefinierten visuellen Zustandsauslöser zu verwenden, um das Layout zu ändern, wenn die App erkennt, dass sie auf einer Xbox-Konsole gestartet wurde.To tailor your UWP app for the 10-foot experience, we recommend that you use a custom visual state trigger to make layout changes when the app detects that it has been launched on an Xbox console.

Zusätzlich zu den vorangehenden Entwurfs-und layoutüberlegungen gibt es eine Reihe von Optimierungs Optimierungen für Gamepad und Remote Steuerung , die Sie beim Erstellen Ihrer APP berücksichtigen sollten.In addition to the preceding design and layout considerations, there are a number of gamepad and remote control interaction optimizations you should consider when building your app.

FunktionFeature BESCHREIBUNGDescription
XY-Fokusnavigation und -interaktionXY focus navigation and interaction Die XY-Fokus Navigation ermöglicht dem Benutzer, um die Benutzeroberfläche Ihrer APP zu navigieren.XY focus navigation enables the user to navigate around your app's UI. Dies begrenzt Benutzer jedoch auf eine Navigation nach oben, unten, links und rechts.However, this limits the user to navigating up, down, left, and right. In diesem Abschnitt finden Sie Empfehlungen für den Umgang mit diesen und anderen Überlegungen.Recommendations for dealing with this and other considerations are outlined in this section.
MausmodusMouse mode Die XY-Fokus Navigation ist für einige Arten von Anwendungen, z. b. Karten oder das Zeichnen und Zeichnen von apps, nicht praktikabel oder sogar möglich.XY focus navigation isn't practical, or even possible, for some types of applications, such as maps or drawing and painting apps. In diesen Fällen ermöglicht der Maus Modus Benutzern, mit einem Gamepad oder einer Remote Steuerung wie der Maus auf einem PC frei zu navigieren.In these cases, mouse mode lets users navigate freely with a gamepad or remote control, just like a mouse on a PC.
FokusanzeigeFocus visual Das visuelle Fokus Element ist ein Rahmen, der das aktuell fokussierte Benutzeroberflächen Element hervorhebt.The focus visual is a border that highlights the currently focused UI element. Dadurch kann der Benutzer schnell die Benutzeroberfläche identifizieren, durch die Sie navigieren oder mit der Sie interagieren.This helps the user quickly identify the UI they are navigating through or interacting with.
Fokus EinbindungFocus engagement Der Fokus Engagement erfordert, dass der Benutzer die A/Select- Schaltfläche in einem Gamepad oder der Remote Steuerung drückt, wenn ein Benutzeroberflächen Element den Fokus besitzt, um damit zu interagieren.Focus engagement requires the user to press the A/Select button on a gamepad or remote control when a UI element has focus in order to interact with it.
HardwaretastenHardware buttons Das Gamepad und die Remote Steuerung bieten sehr unterschiedliche Schaltflächen und Konfigurationen.The gamepad and remote control provide very different buttons and configurations.

Hinweis

Die meisten Codeausschnitte in diesem Thema wurden in XAML/C# verfasst. Die Grundsätze und Konzepte gelten jedoch für alle UWP-Apps.Most of the code snippets in this topic are in XAML/C#; however, the principles and concepts apply to all UWP apps. Wenn Sie eine HTML/JavaScript-UWP-App für Xbox entwickeln, steht Ihnen die hervorragende TVHelpers-Bibliothek auf GitHub zur Verfügung.If you're developing an HTML/JavaScript UWP app for Xbox, check out the excellent TVHelpers library on GitHub.

Anpassen von BenutzeroberflächenelementenUI element sizing

Da Benutzer von Apps in 10-Fuß-Umgebungen Fernbedienungen oder Gamepads verwenden und sich mehrere Meter vom Bildschirm entfernt befinden, gibt es einige Überlegungen in Bezug auf die Benutzeroberfläche, die Sie für Ihren Entwurf berücksichtigen müssen.Because the user of an app in the 10-foot environment is using a remote control or gamepad and is sitting several feet away from the screen, there are some UI considerations that need to be factored into your design. Stellen Sie sicher, dass die Benutzeroberfläche über eine geeignete Inhaltsdichte verfügt und nicht zu überladen ist, damit Benutzer einfach navigieren und Elemente auswählen können.Make sure that the UI has an appropriate content density and is not too cluttered so that the user can easily navigate and select elements. Denken Sie daran: Einfachheit ist der Schlüssel.Remember: simplicity is key.

Skalierungsfaktor und adaptives LayoutScale factor and adaptive layout

Der Skalierungsfaktor trägt dazu bei, dass Benutzeroberflächenelemente in der richtigen Größe für das Gerät angezeigt werden, auf dem die App ausgeführt wird.Scale factor helps with ensuring that UI elements are displayed with the right sizing for the device on which the app is running. Auf Desktops befindet sich diese Einstellung in Einstellungen > System > Anzeige als gleitender Wert.On desktop, this setting can be found in Settings > System > Display as a sliding value. Diese Einstellung ist auch auf Mobiltelefonen vorhanden, wenn das Gerät diese unterstützt.This same setting exists on phone as well if the device supports it.

Ändern der Größe von Text, Apps und anderen Elementen

Auf Xbox One gibt es diese Systemeinstellung nicht. UWP-UI-Elemente, die für Fernsehgeräte angepasst werden, werden jedoch standardmäßig auf 200 % für XAML-Apps und 150 % für HTML-Apps skaliert.On Xbox One, there is no such system setting; however, for UWP UI elements to be sized appropriately for TV, they are scaled at a default of 200% for XAML apps and 150% for HTML apps. Solange Benutzeroberflächenelemente für andere Geräte korrekt angepasst werden, werden sie auch für Fernsehgeräte angepasst.As long as UI elements are appropriately sized for other devices, they will be appropriately sized for TV. Xbox One rendert Ihre App mit 1080p (1920 x 1080 Pixel).Xbox One renders your app at 1080p (1920 x 1080 pixels). Stellen Sie daher mittels adaptiver Techniken sicher, dass die UI bei 960 x 540 px und einer Skalierung von 100 % (oder bei 1280 x 720 px und einer Skalierung von 100 % für HTML-Apps) gut aussieht, wenn Sie eine App von anderen Geräten wie PCs übertragen.Therefore, when bringing an app from other devices such as PC, ensure that the UI looks great at 960 x 540 px at 100% scale (or 1280 x 720 px at 100% scale for HTML apps) utilizing adaptive techniques.

Das Entwerfen für Xbox unterscheidet sich etwas vom Entwerfen für PCs, da Sie lediglich eine Auflösung von 1920 x 1080 berücksichtigen müssen.Designing for Xbox is a little different from designing for PC because you only need to worry about one resolution, 1920 x 1080. Es spielt keine Rolle, ob der Benutzer ein Fernsehgerät mit einer besseren Auflösung besitzt—UWP-Apps werden stets auf 1080p skaliert.It doesn't matter if the user has a TV that has better resolution—UWP apps will always scale to 1080p.

Bei der Ausführung auf Xbox One werden darüber hinaus korrekte Ressourcengrößen aus dem Satz mit 200 % (oder 150 % für HTML-Apps) für Ihre App aufgerufen, unabhängig von der Auflösung des Fernsehgeräts.Correct asset sizes from the 200% (or 150% for HTML apps) set will also be pulled in for your app when running on Xbox One, regardless of TV resolution.

InhaltsdichteContent density

Denken Sie beim Entwerfen Ihrer App daran, dass Benutzer die Benutzeroberfläche aus der Entfernung sieht und mittels einer Fernbedienung oder einem Gamecontroller mit dieser interagiert. Dies dauert länger als die Verwendung von Maus- oder Toucheingaben.When designing your app, remember that the user will be viewing the UI from a distance and interacting with it by using a remote or game controller, which takes more time to navigate than using mouse or touch input.

Größen von BenutzeroberflächensteuerelementenSizes of UI controls

Interaktive Benutzeroberflächenelemente sollten eine Mindesthöhe von 32 epx (effektive Pixel) besitzen.Interactive UI elements should be sized at a minimum height of 32 epx (effective pixels). Dies ist die Standardeinstellung für allgemeine UWP-Steuerelemente. Wenn diese bei einer Skalierung von 200 % verwendet wird, ist sichergestellt, dass Benutzeroberflächenelemente aus der Entfernung erkennbar sind. Darüber hinaus trägt dies zur Reduzierung der Inhaltsdichte bei.This is the default for common UWP controls, and when used at 200% scale, it ensures that UI elements are visible from a distance and helps reduce content density.

UWP-Schaltfläche bei einer Skalierung von 100 % und 200 %

Anzahl der KlicksNumber of clicks

Um Ihre Benutzeroberfläche zu vereinfachen, sollten Benutzer nicht mehr als sechs Klicks benötigen, wenn sie von einem Rand des Fernsehbildschirms zum anderen navigieren.When the user is navigating from one edge of the TV screen to the other, it should take no more than six clicks to simplify your UI. Auch hier gilt der Grundsatz der Einfachheit.Again, the principle of simplicity applies here.

6 Symbole insgesamt

TextgrößenText sizes

Wenden Sie die folgenden Faustregeln an, damit Ihre Benutzeroberfläche aus der Entfernung erkennbar ist:To make your UI visible from a distance, use the following rules of thumb:

  • Haupttext und Lesen von Inhalten: mindestens 15 epxMain text and reading content: 15 epx minimum
  • Nicht kritische Texte und ergänzende Inhalte: mindestens 12 epxNon-critical text and supplemental content: 12 epx minimum

Wenn Sie in der Benutzeroberfläche einen größeren Text verwenden, sollten Sie eine Größe wählen, die die verfügbare Bildschirmfläche nicht zu sehr begrenzt, indem sie Platz beansprucht, der potenziell von anderen Inhalten ausgefüllt werden kann.When using larger text in your UI, pick a size that does not limit screen real estate too much, taking up space that other content could potentially fill.

Deaktivieren des SkalierungsfaktorsOpting out of scale factor

Wir empfehlen Ihnen, für Ihre App die Vorteile der Skalierungsfaktorunterstützung zu nutzen. Dies trägt dazu bei, dass sie auf allen Geräten korrekt ausgeführt wird, indem sie für jeden Gerätetyp skaliert wird.We recommend that your app take advantage of scale factor support, which will help it run appropriately on all devices by scaling for each device type. Es ist jedoch möglich, dieses Verhalten zu deaktivieren und alle Benutzeroberflächenelemente für eine Skalierung von 100 % zu entwerfen.However, it is possible to opt out of this behavior and design all of your UI at 100% scale. Beachten Sie, dass Sie den Skalierungsfaktor nicht in einen anderen Wert als 100 % ändern können.Note that you cannot change the scale factor to anything other than 100%.

Sie können den Skalierungsfaktor für HTML-Apps deaktivieren, indem Sie den folgenden Codeausschnitt verwenden:For XAML apps, you can opt out of scale factor by using the following code snippet:

bool result =
    Windows.UI.ViewManagement.ApplicationViewScaling.TrySetDisableLayoutScaling(true);

result informiert Sie, ob die Deaktivierung erfolgreich ausgeführt wurde.result will inform you whether you successfully opted out.

Weitere Informationen, einschließlich HTML/JavaScript-Beispielcode, finden Sie unter So deaktivieren Sie die Skalierung.For more information, including sample code for HTML/JavaScript, see How to turn off scaling.

Stellen Sie sicher, dass Sie entsprechenden Größen der Benutzeroberflächenelemente berechnen, indem Sie die in diesem Thema genannten effektiven Pixelwerte auf die tatsächlichen Pixelwerte verdoppeln (oder für HTML-Apps mit 1,5 multiplizieren).Please be sure to calculate the appropriate sizes of UI elements by doubling the effective pixel values mentioned in this topic to actual pixel values (or multiplying by 1.5 for HTML apps).

Fernsehsicherer BereichTV-safe area

Nicht alle Fernsehgeräte zeigen die Inhalte von Rand zu Rand an. Dies hat historische und technische Gründe.Not all TVs display content all the way to the edges of the screen due to historical and technological reasons. Standardmäßig vermeidet die UWP die Anzeige von Benutzeroberflächeninhalten in nicht fernsehsicheren Bereichen und zeichnet stattdessen lediglich den Seitenhintergrund.By default, the UWP will avoid displaying any UI content in TV-unsafe areas and instead will only draw the page background.

Der nicht fernsehsichere Bereich wird in der folgenden Abbildung durch den blauen Bereich dargestellt.The TV-unsafe area is represented by the blue area in the following image.

Nicht fernsehsicherer Bereich

Sie können für den Hintergrund eine statische Farbe, eine Designfarbe oder ein Bild verwenden, wie in den folgenden Codeausschnitten gezeigt.You can set the background to a static or themed color, or to an image, as the following code snippets demonstrate.

DesignfarbeTheme color

<Page x:Class="Sample.MainPage"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>

ImageImage

<Page x:Class="Sample.MainPage"
      Background="\Assets\Background.png"/>

So sieht Ihre App ohne zusätzlichen Aufwand aus.This is what your app will look like without additional work.

Fernsehsicherer Bereich

Dies ist nicht optimal, da dies der App einen „Schachteleffekt“ verleiht. Teile der Benutzeroberfläche werden scheinbar abgeschnitten, beispielsweise der Navigationsbereich und das Raster.This is not optimal because it gives the app a "boxed-in" effect, with parts of the UI such as the nav pane and grid seemingly cut off. Sie können jedoch Optimierungen durchführen, um Teile der Benutzeroberfläche bis an die Ränder des Bildschirms zu erweitern, um der App einen kinofilmähnlicheren Effekt zu verleihen.However, you can make optimizations to extend parts of the UI to the edges of the screen to give the app a more cinematic effect.

Zeichnen der Benutzeroberfläche bis zum RandDrawing UI to the edge

Wir empfehlen Ihnen, bestimmte Benutzeroberflächenelemente zu verwenden, um die Benutzeroberfläche bis an die Ränder des Bildschirms zu erweitern und Benutzern eine immersivere Umgebung zu bieten.We recommend that you use certain UI elements to extend to the edges of the screen to provide more immersion to the user. Dazu gehören ScrollViewers, Navigationsbereiche und CommandBars.These include ScrollViewers, nav panes, and CommandBars.

Es ist jedoch auch wichtig, dass interaktive Elemente und Texte stets die Bildschirmränder vermeiden, um sicherzustellen, dass sie auf bestimmten Fernsehgeräten nicht abgeschnitten werden.On the other hand, it's also important that interactive elements and text always avoid the screen edges to ensure that they won't be cut off on some TVs. Wir empfehlen Ihnen, nur nicht essentielle visuelle Elemente bis zu 5 % von den Rändern des Bildschirms entfernt zu zeichnen.We recommend that you draw only non-essential visuals within 5% of the screen edges. Wie in Anpassen von Benutzeroberflächenelementen bereits erwähnt, nutzt eine UWP-App, die den Xbox One-Standardskalierungsfaktor von 200 % verwendet, einen Bereich von 960 x 540 epx. Sie sollten es daher vermeiden, in der Benutzeroberfläche Ihrer App essentielle Benutzerflächenelemente in den folgenden Bereichen zu platzieren:As mentioned in UI element sizing, a UWP app following the Xbox One console's default scale factor of 200% will utilize an area of 960 x 540 epx, so in your app's UI, you should avoid putting essential UI in the following areas:

  • 27 epx vom oberen und unteren Rand27 epx from the top and bottom
  • 48 epx vom linken und rechten Rand48 epx from the left and right sides

In den folgenden Abschnitten wird beschrieben, wie Sie Ihr UI bis an die Ränder des Bildschirms erweitern.The following sections describe how to make your UI extend to the screen edges.

KernfenstergrenzenCore window bounds

Im Fall von UWP-Apps, die ausschließlich für die 10-Fuß-Erfahrung entwickelt werden, stellt die Verwendung von Kernfenstergrenzen die einfachere Option dar.For UWP apps targeting only the 10-foot experience, using core window bounds is a more straightforward option.

Fügen Sie in der OnLaunched-Methode von App.xaml.cs den folgenden Code hinzu:In the OnLaunched method of App.xaml.cs, add the following code:

Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetDesiredBoundsMode
    (Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow);

Mit dieser Codezeile wird das App-Fenster bis zu den Rändern des Bildschirms erweitert. Daher müssen Sie alle interaktiven und essentiellen Benutzeroberflächenelemente in den bereits beschriebenen fernsehsicheren Bereich verschieben.With this line of code, the app window will extend to the edges of the screen, so you will need to move all interactive and essential UI into the TV-safe area described earlier. Kurzlebige Benutzeroberflächenelemente wie Kontextmenüs und geöffnete Kombinationsfelder bleiben automatisch im fernsehsicheren Bereich.Transient UI, such as context menus and opened ComboBoxes, will automatically remain inside the TV-safe area.

Kernfenstergrenzen

BereichshintergründePane backgrounds

Navigationsbereiche werden in der Regel nahe am Rand des Bildschirms dargestellt. Daher sollte sich der Hintergrund in den nicht fernsehsicheren Bereich erstrecken, um hässliche Lücken zu vermeiden.Navigation panes are typically drawn near the edge of the screen, so the background should extend into the TV-unsafe area so as not to introduce awkward gaps. Hierzu können Sie einfach die Hintergrundfarbe des Navigationsbereichs in der Hintergrundfarbe der App ändern.You can do this by simply changing the color of the nav pane's background to the color of the app's background.

Mithilfe der oben beschriebenen Kernfenstergrenzen können Sie Ihr UI an den Rändern des Bildschirms darstellen. Sie sollten dann jedoch positive Ränder für die SplitView-Inhalte nutzen, um diese innerhalb des fernsehsicheren Bereichs zu halten.Using the core window bounds as previously described will allow you to draw your UI to the edges of the screen, but you should then use positive margins on the SplitView's content to keep it within the TV-safe area.

Navigationsbereich bis an die Ränder des Bildschirms erweitert

Hier wurde der Hintergrund des Navigationsbereichs bis an die Ränder des Bildschirms erweitert, während die Navigationselemente weiterhin im fernsehsicheren Bereich angezeigt werden.Here, the nav pane's background has been extended to the edges of the screen, while its navigation items are kept in the TV-safe area. Der Inhalt des SplitView-Elements (in diesem Fall ein Raster mit Elementen) wurde bis an den unteren Rand des Bildschirms erweitert. So sieht es aus, als würde es fortgesetzt und nicht abgeschnitten. Der obere Bereich des Rasters befindet sich nach wie vor im fernsehsicheren Bereich.The content of the SplitView (in this case, a grid of items) has been extended to the bottom of the screen so that it looks like it continues and isn't cut off, while the top of the grid is still within the TV-safe area. (Weitere Informationen hierzu finden Sie unter Bildlaufenden von Listen und Rastern).(Learn more about how to do this in Scrolling ends of lists and grids).

Mit dem folgenden Codeausschnitt wird dieser Effekt erzielt:The following code snippet achieves this effect:

<SplitView x:Name="RootSplitView"
           Margin="48,0,48,0">
    <SplitView.Pane>
        <ListView x:Name="NavMenuList"
                  ContainerContentChanging="NavMenuItemContainerContentChanging"
                  ItemContainerStyle="{StaticResource NavMenuItemContainerStyle}"
                  ItemTemplate="{StaticResource NavMenuItemTemplate}"
                  ItemInvoked="NavMenuList_ItemInvoked"
                  ItemsSource="{Binding NavMenuListItems}"/>
    </SplitView.Pane>
    <Frame x:Name="frame"
           Navigating="OnNavigatingToPage"
           Navigated="OnNavigatedToPage"/>
</SplitView>

CommandBar ist ein weiteres Beispiel für einen Bereich, der häufig in der Nähe eines oder mehrerer Ränder der App positioniert ist. Daher sollte dessen Hintergrund auf Fernsehbildschirmen bis an die Ränder des Bildschirms erweitert werden.CommandBar is another example of a pane that is commonly positioned near one or more edges of the app, and as such on TV its background should extend to the edges of the screen. In der Regel gibt es auf der rechten Seite die Schaltfläche Mehr (dargestellt durch „...“), die weiter im fernsehsicheren Bereich angezeigt werden sollte.It also usually contains a More button, represented by "..." on the right side, which should remain in the TV-safe area. Im Folgenden finden Sie einige unterschiedliche Strategien, um die gewünschten Interaktionen und visuellen Effekte zu erzielen.The following are a few different strategies to achieve the desired interactions and visual effects.

Option 1: Ändern der CommandBar-Hintergrundfarbe in transparent oder in die Farbe des Seitenhintergrunds:Option 1: Change the CommandBar background color to either transparent or the same color as the page background:

<CommandBar x:Name="topbar"
            Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
            ...
</CommandBar>

Hierdurch sieht die CommandBar aus, als ob sie auf dem gleichen Hintergrund wie der Rest der Seite angezeigt wird, sodass sich der Hintergrund nahtlos bis an den Rand des Bildschirms erstreckt.Doing this will make the CommandBar look like it is on top of the same background as the rest of the page, so the background seamlessly flows to the edge of the screen.

Option 2: Hinzufügen eines Hintergrund-Rechtecks, dessen Füllung die gleiche Farbe wie der CommandBar-Hintergrund hat und das unten der CommandBar und über dem Rest der Seite liegt:Option 2: Add a background rectangle whose fill is the same color as the CommandBar background, and have it lie below the CommandBar and across the rest of the page:

<Rectangle VerticalAlignment="Top"
            HorizontalAlignment="Stretch"      
            Fill="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
<CommandBar x:Name="topbar"
            VerticalAlignment="Top"
            HorizontalContentAlignment="Stretch">
            ...
</CommandBar>

Hinweis

Wenn Sie sich für diesen Ansatz entscheiden, sollten Sie berücksichtigen, dass die Schaltfläche Mehr wenn notwendig die Höhe der geöffneten CommandBar ändert, um die Beschriftungen der AppBarButton-Schaltflächen unterhalb der Symbole anzuzeigen.If using this approach, be aware that the More button changes the height of the opened CommandBar if necessary, in order to show the labels of the AppBarButtons below their icons. Wir empfehlen Ihnen, die Beschriftungen rechts neben ihren Symbolen anzuzeigen, um diese Größenanpassung zu vermeiden.We recommend that you move the labels to the right of their icons to avoid this resizing. Weitere Informationen finden Sie unter CommandBar-Beschriftungen.For more information, see CommandBar labels.

Beide Vorgehensweisen gelten auch für die anderen in diesem Abschnitt aufgeführten Arten von Steuerelementen.Both of these approaches also apply to the other types of controls listed in this section.

Bildlaufenden von Listen und RasternScrolling ends of lists and grids

Meist enthalten Listen und Raster mehr Elemente, als gleichzeitig auf den Bildschirm passen.It's common for lists and grids to contain more items than can fit onscreen at the same time. Wenn dies der Fall ist, sollten Sie die Liste oder das Raster bis zum Rand des Bildschirms erweitern.When this is the case, we recommend that you extend the list or grid to the edge of the screen. Listen und Raster mit horizontalem Bildlauf sollten bis zum rechten Rand erweitert werden. Listen und Raster mit vertikalem Bildlauf sollten bis zum unteren Rand erweitert werden.Horizontally scrolling lists and grids should extend to the right edge, and vertically scrolling ones should extend to the bottom.

Abschneiden eines Rasters im fernsehsicheren Bereich

Wenn eine Liste oder ein Raster wie hier beschrieben erweitert wird, ist es wichtig, dass die Fokusanzeige und das mit dieser verknüpfte Element weiter im fernsehsicheren Bereich angezeigt werden.While a list or grid is extended like this, it's important to keep the focus visual and its associated item inside the TV-safe area.

Bildlauffokus sollte weiter im fernsehsicheren Bereich angezeigt werden

Die UWP verfügt über Funktionen, die dafür sorgen, dass die Fokusanzeige weiter innerhalb der VisibleBounds angezeigt wird. Sie müssen jedoch Abstand hinzufügen, um sicherzustellen, dass für die Listen-/Rasterelemente ein Bildlauf in den Anzeigebereich des sicheren Bereichs durchgeführt werden kann.The UWP has functionality that will keep the focus visual inside the VisibleBounds, but you need to add padding to ensure that the list/grid items can scroll into view of the safe area. Genauer gesagt, müssen Sie für ListView oder GridView deren ItemsPresenter einen positiven Rand hinzufügen, wie im folgenden Codeausschnitt gezeigt:Specifically, you add a positive margin to the ListView or GridView's ItemsPresenter, as in the following code snippet:

<Style x:Key="TitleSafeListViewStyle"
       TargetType="ListView">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListView">
                <Border BorderBrush="{TemplateBinding BorderBrush}"
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <ScrollViewer x:Name="ScrollViewer"
                                  TabNavigation="{TemplateBinding TabNavigation}"
                                  HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                  HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                  IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                                  VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                  IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                                  IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                  IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                  ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                                  IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                  BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                  AutomationProperties.AccessibilityView="Raw">
                        <ItemsPresenter Header="{TemplateBinding Header}"
                                        HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                        HeaderTransitions="{TemplateBinding HeaderTransitions}"
                                        Footer="{TemplateBinding Footer}"
                                        FooterTemplate="{TemplateBinding FooterTemplate}"
                                        FooterTransitions="{TemplateBinding FooterTransitions}"
                                        Padding="{TemplateBinding Padding}"
                                        Margin="0,27,0,27"/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Sie platzieren den zuvor angezeigten Codeausschnitt entweder in die Seitenressourcen oder in den App-Ressourcen und greifen anschließend wie folgt auf diesen zu:You would put the previous code snippet in either the page or app resources, and then access it in the following way:

<Page>
    <Grid>
        <ListView Style="{StaticResource TitleSafeListViewStyle}"
                  ... />

Hinweis

Dieser Codeausschnitt gilt speziell für ListView-Elemente. Legen Sie bei einem GridView-Stil das TargetType-Attribut für ControlTemplate und Style auf GridView fest.This code snippet is specifically for ListViews; for a GridView style, set the TargetType attribute for both the ControlTemplate and the Style to GridView.

Wenn Ihre Anwendung auf Version 1803 oder höher ausgerichtet ist, können Sie das UIElement. bringindeviewangeforderten-Ereignisverwenden, um eine präzisere Kontrolle darüber zu erhalten, wie Elemente in die Ansicht aufgenommen werden.For more fine-grained control over how items are brought into view, if your application targets version 1803 or later, you can use the UIElement.BringIntoViewRequested event. Sie können Sie in ItemsPanel ablegen, damit die ListView- / GridView Sie vor dem internen ScrollViewer abfängt, wie in den folgenden Code Ausschnitten:You can put it on the ItemsPanel for the ListView/GridView to catch it before the internal ScrollViewer does, as in the following code snippets:

<GridView x:Name="gridView">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal"
                           BringIntoViewRequested="ItemsWrapGrid_BringIntoViewRequested"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>
// The BringIntoViewRequested event is raised by the framework when items receive keyboard (or Narrator) focus or 
// someone triggers it with a call to UIElement.StartBringIntoView.
private void ItemsWrapGrid_BringIntoViewRequested(UIElement sender, BringIntoViewRequestedEventArgs args)
{
    if (args.VerticalAlignmentRatio != 0.5)  // Guard against our own request
    {
        args.Handled = true;
        // Swallow this request and restart it with a request to center the item.  We could instead have chosen
        // to adjust the TargetRect’s Y and Height values to add a specific amount of padding as it bubbles up, 
        // but if we just want to center it then this is easier.

        // (Optional) Account for sticky headers if they exist
        var headerOffset = 0.0;
        var itemsWrapGrid = sender as ItemsWrapGrid;
        if (gridView.IsGrouping && itemsWrapGrid.AreStickyGroupHeadersEnabled)
        {
            var header = gridView.GroupHeaderContainerFromItemContainer(args.TargetElement as GridViewItem);
            if (header != null)
            {
                headerOffset = ((FrameworkElement)header).ActualHeight;
            }
        }

        // Issue a new request
        args.TargetElement.StartBringIntoView(new BringIntoViewOptions()
        {
            AnimationDesired = true,
            VerticalAlignmentRatio = 0.5, // a normalized alignment position (0 for the top, 1 for the bottom)
            VerticalOffset = headerOffset, // applied after meeting the alignment ratio request
        });
    }
}

FarbenColors

Standardmäßig skaliert das universelle Windows-Plattform die Farben Ihrer APP auf den TV-sicheren Bereich. (Weitere Informationen finden Sie unter TV-sichere Farben ), sodass Ihre APP in jedem Fernsehgerät gut aussieht.By default, the Universal Windows Platform scales your app's colors to the TV-safe range (see TV-safe colors for more information) so that your app looks good on any TV. Außerdem gibt es Verbesserungen, die Sie an der Gruppe von Farben vornehmen können, die Ihre APP verwendet, um die visuelle Darstellung im Fernsehen zu verbessern.In addition, there are improvements that you can make to the set of colors your app uses to improve the visual experience on TV.

AnwendungsdesignApplication theme

Sie können ein Anwendungsdesign (dunkel oder hell) wählen, je nach Ihrer App, oder Designs deaktivieren.You can choose an Application theme (dark or light) according to what is right for your app, or you can opt out of theming. Weitere allgemeine Empfehlungen für Designs finden Sie in Farbdesigns.Read more about general recommendations for themes in Color themes.

Die UWP ermöglicht Apps darüber hinaus, das Design dynamisch festzulegen, basierend auf den Systemeinstellungen, die von den Geräten bereitgestellt werden, auf denen sie ausgeführt werden.The UWP also allows apps to dynamically set the theme based on the system settings provided by the devices on which they run. Während die UWP stets die vom Benutzer angegebenen Designeinstellungen beachtet, stellt jedes Gerät auch ein entsprechendes Standarddesign bereit.While the UWP always respects the theme settings specified by the user, each device also provides an appropriate default theme. Aufgrund des Zwecks der Xbox One, die eher eine Medien- als eine Produktivitätsumgebung bereitstellen soll, ist das Systemdesign standardmäßig dunkel.Because of the nature of Xbox One, which is expected to have more media experiences than productivity experiences, it defaults to a dark system theme. Wenn das Design Ihrer App auf den Systemeinstellungen basiert, sollten Sie berücksichtigen, dass es auf Xbox One standardmäßig dunkel ist.If your app's theme is based on the system settings, expect it to default to dark on Xbox One.

AkzentfarbeAccent color

Die UWP bietet eine bequeme Möglichkeit, die Akzentfarbe verfügbar zu machen, die der Benutzer aus den Systemeinstellungen ausgewählt hat.The UWP provides a convenient way to expose the accent color that the user has selected from their system settings.

Auf Xbox One können Benutzer eine Benutzerfarbe auswählen – genauso, wie sie auf einem PC eine Akzentfarbe auswählen können.On Xbox One, the user is able to select a user color, just as they can select an accent color on a PC. Solange Ihre App diese Akzentfarben über Pinsel oder Farbressourcen aufruft, wird die vom jeweiligen Benutzer in den Systemeinstellungen ausgewählte Farbe verwendet.As long as your app calls these accent colors through brushes or color resources, the color that the user selected in the system settings will be used. Beachten Sie, dass Akzentfarben auf Xbox One benutzerbasiert und nicht systembasiert angewendet werden.Note that accent colors on Xbox One are per user, not per system.

Beachten Sie auch, dass der Benutzerfarbensatz auf Xbox One nicht identisch mit dem Benutzerfarbensatz auf PCs, Smartphones und anderen Geräten ist.Please also note that the set of user colors on Xbox One is not the same as that on PCs, phones, and other devices.

Solange Ihre APP eine Pinsel Ressource wie z. b. systemcontrolforegroundaccentbrushoder eine Color-Ressource (systemaccentcolor) verwendet oder stattdessen Akzentfarben direkt über die uicolortype. Akzent * -API aufruft, werden diese Farben durch die auf Xbox One verfügbaren Akzentfarben ersetzt.As long as your app uses a brush resource such as SystemControlForegroundAccentBrush, or a color resource (SystemAccentColor), or instead calls accent colors directly through the UIColorType.Accent* API, those colors are replaced with accent colors available on Xbox One. Pinsel Farben mit hohem Kontrast werden ebenfalls auf der gleichen Weise wie auf einem PC und Telefon vom System abgerufen.High contrast brush colors are also pulled in from the system the same way as on a PC and phone.

Weitere Informationen zu Akzentfarben im Allgemeinen finden Sie unter Akzentfarbe.To learn more about accent color in general, see Accent color.

Farbabweichungen zwischen FernsehgerätenColor variance among TVs

Beachten Sie bei der Entwicklung von Apps für Fernsehgeräte, dass Farben sehr unterschiedlich dargestellt werden, abhängig von dem Fernsehgerät, auf dem sie gerendert werden.When designing for TV, note that colors display quite differently depending on the TV on which they are rendered. Gehen Sie nicht davon aus, dass die Farben genau wie auf Ihrem Bildschirm angezeigt werden.Don't assume colors will look exactly as they do on your monitor. Wenn Ihre App geringfügige Farbunterschiede nutzt, um Teile der Benutzeroberfläche zu unterscheiden, könnten sich die Farben mischen und die Benutzer könnten verwirrt werden.If your app relies on subtle differences in color to differentiate parts of the UI, colors could blend together and users could get confused. Verwenden Sie Farben, die unterschiedlich genug sind, dass Benutzer sie unabhängig vom verwendeten Fernsehgerät deutlich unterscheiden können.Try to use colors that are different enough that users will be able to clearly differentiate them, regardless of the TV they are using.

Fernsehsichere FarbenTV-safe colors

Die RGB-Werte einer Farbe stellen die Intensität für Rot, Grün und Blau dar.A color's RGB values represent intensities for red, green, and blue. Die Fernsehgeräte behandeln keine extrem Intensitäten sehr gut — , Sie können zu einem ungeraden geblenden Effekt führen oder auf bestimmten Fernsehgeräten ausgewaschen angezeigt werden.TVs don't handle extreme intensities very well—they can produce an odd banded effect, or appear washed out on certain TVs. Darüber hinaus verursachen Farben mit hoher Intensität möglicherweise ein „Blooming“, d. h., Pixel in der Nähe beginnen, die gleichen Farben aufzurufen.Additionally, high-intensity colors may cause blooming (nearby pixels start drawing the same colors). Die Ansichten darüber, was als fernsehsichere Farben gelten kann, gehen zwar auseinander. Im Allgemeinen können Farben mit RGB-Werten zwischen 16 und 235 (oder 10-EB hexadezimal) jedoch sicher für Fernsehgeräte verwendet werden.While there are different schools of thought in what are considered TV-safe colors, colors within the RGB values of 16-235 (or 10-EB in hexadecimal) are generally safe to use for TV.

Fernsehsicherer Farbbereich

In der Vergangenheit mussten apps auf der Xbox Ihre Farben so anpassen, dass Sie in diesen "TV-Safe"-Farbbereich fallen. ab dem Fall Creators Update skaliert Xbox One den vollständigen Inhalts Bereich jedoch automatisch in den Bereich TV-sicher.Historically, apps on Xbox had to tailor their colors to fall within this "TV-safe" color range; however, starting with the Fall Creators Update, Xbox One automatically scales full range content into the TV-safe range. Dies bedeutet, dass sich die meisten App-Entwickler nicht mehr um TV-sichere Farben kümmern müssen.This means that most app developers no longer have to worry about TV-safe colors.

Wichtig

Bei Video Inhalten, die sich bereits im TV-sicheren Farbbereich befinden, wird dieser Farb Skalierungs Effekt bei der Wiedergabe mit Media Foundationnicht angewendet.Video content that's already in the TV-safe color range doesn't have this color scaling effect applied when played back using Media Foundation.

Wenn Sie eine APP unter Verwendung von DirectX 11 oder DirectX 12 entwickeln und eine eigene SwapChain zum Rendering der Benutzeroberfläche oder des Videos erstellen, können Sie den von Ihnen verwendeten Farbraum angeben, indem Sie IDXGISwapChain3:: SetColorSpace1aufrufen. Dadurch wird dem System mitgeteilt, ob Farben skaliert werden müssen.If you're developing an app using DirectX 11 or DirectX 12 and creating your own swap chain to render UI or video, you can specify the color space you use by calling IDXGISwapChain3::SetColorSpace1, which will let the system know if it needs to scale colors or not.

Richtlinien für BenutzeroberflächensteuerelementeGuidelines for UI controls

Es gibt mehrere Benutzeroberflächen-Steuerelemente, die auf mehreren Geräten gut funktionieren. Wenn diese jedoch auf Fernsehgeräten verwendet werden, müssen bestimmte Aspekte berücksichtigt werden.There are several UI controls that work well across multiple devices, but have certain considerations when used on TV. Informieren Sie sich über einige bewährte Methoden für die Verwendung dieser Steuerelemente beim Entwerfen für die 10 Fuß-Erfahrung.Read about some best practices for using these controls when designing for the 10-foot experience.

PivotsteuerelementPivot control

Ein Pivot ermöglicht über verschiedene Header oder Registerkarten eine schnelle Navigation für Ansichten in einer App.A Pivot provides quick navigation of views within an app through selecting different headers or tabs. Das Steuerelement unterstreicht jeweils den Header, der den Fokus hat. So wird bei der Nutzung von Gamepads/Remotesteuerungen deutlicher, welcher Header zurzeit ausgewählt ist.The control underlines whichever header has focus, making it more obvious which header is currently selected when using gamepad/remote.

Pivotunterstreichung

Sie können die Pivot.IsHeaderItemsCarouselEnabled-Eigenschaft auf true festlegen, damit Pivots stets die gleiche Position haben und die Kopfzeile des ausgewählten Pivots nicht stets an die erste Position verschoben wird.You can set the Pivot.IsHeaderItemsCarouselEnabled property to true so that pivots always keep the same position, rather than having the selected pivot header always move to the first position. Dies ist besser für große Geräte mit großen Bildschirmanzeigen wie Fernsehgeräte geeignet, da Kopfzeilenumbrüche Benutzer stark ablenken können.This is a better experience for large-screen displays such as TV, because header wrapping can be distracting to users. Wenn nicht alle Pivotkopfzeilen gleichzeitig auf den Bildschirm passen, wird eine Bildlaufleiste angezeigt, damit Kunden die restlichen Kopfzeilen sehen. Sie sollten jedoch sicherstellen, dass alle Kopfzeilen auf den Bildschirm passen, um eine optimale Erfahrung bereitzustellen.If all of the pivot headers don't fit onscreen at once, there will be a scrollbar to let customers see the other headers; however, you should make sure that they all fit on the screen to provide the best experience. Weitere Informationen finden Sie unter Registerkarten und Pivots.For more information, see Tabs and pivots.

Ein Navigationsbereich (auch Hamburger-Menü genannt) ist ein Navigationssteuerelement, das häufig in UWP-Apps verwendet wird.A navigation pane (also known as a hamburger menu) is a navigation control commonly used in UWP apps. In der Regel handelt es sich um einen Bereich mit mehreren Optionen im Stil eine Liste, mit denen die Benutzer zu anderen Seiten wechseln können.Typically it is a pane with several options to choose from in a list style menu that will take the user to different pages. Im Allgemeinen ist dieser Bereich zu Beginn reduziert, um Platz zu sparen. Der Benutzer kann ihn durch Klicken auf eine Schaltfläche öffnen.Generally this pane starts out collapsed to save space, and the user can open it by clicking on a button.

Während Nav-Bereiche leicht über die Maus- und Touch-Bedienung genutzt werden können, ist die Bedienung über Gamepads/Fernbedienungen weniger praktisch. Der Benutzer muss hier immer erst zu einer Schaltfläche navigieren, um den jeweiligen Bereich zu öffnen.While nav panes are very accessible with mouse and touch, gamepad/remote makes them less accessible since the user has to navigate to a button to open the pane. Aus diesem Grund empfiehlt es sich, den Navigationsbereich über die Ansicht-Schaltfläche zu öffnen und dem Benutzer das Öffnen über das Navigieren zum linken Rand der Seite zu ermöglichen.Therefore, a good practice is to have the View button open the nav pane, as well as allow the user to open it by navigating all the way to the left of the page. Ein Code Beispiel zum Implementieren dieses Entwurfs Musters finden Sie Unterprogramm gesteuertes Fokus Navigations Dokument.Code sample on how to implement this design pattern can be found in Programmatic focus navigation document. So steht dem Benutzer ein sehr einfacher Zugriff auf die Inhalte des Bereichs zur Verfügung.This will provide the user with very easy access to the contents of the pane. Weitere Informationen zum Verhalten von Navigationsbereichen auf unterschiedlichen Bildschirmgrößen sowie zu bewährten Vorgehensweisen für die Navigation mit Gamepads/Fernbedienungen finden Sie unter Navigationsbereiche.For more information about how nav panes behave in different screen sizes as well as best practices for gamepad/remote navigation, see Nav panes.

CommandBar-BeschriftungenCommandBar labels

Es empfiehlt sich, die Beschriftungen rechts neben den Symbolen auf einer CommandBar zu platzieren. So bleibt dessen Höhe minimiert und konsistent.It is a good idea to have the labels placed to the right of the icons on a CommandBar so that its height is minimized and stays consistent. Sie erreichen dies, indem Sie die Eigenschaft CommandBar.DefaultLabelPosition auf CommandBarDefaultLabelPosition.Right festlegen.You can do this by setting the CommandBar.DefaultLabelPosition property to CommandBarDefaultLabelPosition.Right.

CommandBar Beschriftungen rechts von Symbolen

Durch das Festlegen dieser Eigenschaft werden die Beschriftungen immer angezeigt. Dies ist bei einer 10-Fuß-Erfahrung vorteilhaft, denn es minimiert die Anzahl der durch den Benutzer erforderlichen Klicks.Setting this property will also cause the labels to always be displayed, which works well for the 10-foot experience because it minimizes the number of clicks for the user. Auch für andere Gerätetypen ist dies ein hervorragendes Konzept.This is also a great model for other device types to follow.

QuickInfoTooltip

Das Steuerelement QuickInfo wurde eingeführt, um zusätzliche Informationen in der Benutzeroberfläche anzeigen zu können, wenn der Benutzer mit der Maus auf ein Element zeigt oder mit dem Finger auf ein Element tippt und den Finger darauf hält.The Tooltip control was introduced as a way to provide more information in the UI when the user hovers the mouse over, or taps and holds their figure on, an element. Für Gamepad und Remote wird Tooltip kurz nachdem das Element den Fokus erhält angezeigt, bleibt für einen kurzen Zeitraum auf dem Bildschirm und verschwindet dann.For gamepad and remote, Tooltip appears after a brief moment when the element gets focus, stays onscreen for a short time, and then disappears. Dieses Verhalten könnte ablenkend wirken, wenn zu viele Tooltip-Elemente verwendet werden.This behavior could be distracting if too many Tooltips are used. Versuchen Sie, Tooltip-Elemente bei Entwürfen für Fernsehgeräte zu vermeiden.Try to avoid using Tooltip when designing for TV.

SchaltflächenstileButton styles

Zwar funktionieren die Standard-UWP-Schaltflächen sehr gut auf TV-Bildschirmen, es gibt jedoch einige visuelle Stile für Schaltflächen, die noch besser auf die Benutzeroberfläche aufmerksam machen. Sie sollten diese für alle Plattformen in Erwägung ziehen, besonders für die 10-Fuß-Umgebung, bei der es sehr vorteilhaft ist, die Fokusposition klar und deutlich darzustellen.While the standard UWP buttons work well on TV, some visual styles of buttons call attention to the UI better, which you may want to consider for all platforms, particularly in the 10-foot experience, which benefits from clearly communicating where the focus is located. Weitere Informationen zu diesen Stilen finden Sie unter Schaltflächen.To read more about these styles, see Buttons.

Geschachtelte UI-ElementeNested UI elements

Eine geschachtelte Benutzeroberfläche (User Interface, UI) verfügt über geschachtelte Elemente mit ausführbaren Aktionen, die in einem Container eingeschlossen sind, sodass sowohl die geschachtelten Elemente als auch die Container unabhängig voneinander den Fokus erhalten können.Nested UI exposes nested actionable items enclosed inside a container UI element where both the nested item as well as the container item can take independent focus from each other.

Geschachtelte UI eignet sich für einige Eingabetypen, jedoch nicht immer für Gamepads und Fernbedienungen, da diese eine XY-Navigation erfordern.Nested UI works well for some input types, but not always for gamepad and remote, which rely on XY navigation. Beachten Sie die unter diesem Thema angeführten Richtlinien, um sicherzustellen, dass die Benutzeroberfläche für die 10-Fuß-Umgebung optimiert ist, und dass die Benutzer mühelos auf alle interaktiven Elemente zugreifen können.Be sure to follow the guidance in this topic to ensure that your UI is optimized for the 10-foot environment, and that the user can access all interactable elements easily. Eine gängige Lösung besteht darin, die in einer eingefügten Benutzeroberflächen Elemente zu platzieren ContextFlyout .One common solution is to place nested UI elements in a ContextFlyout.

Weitere Informationen zur geschachtelten UI finden Sie unter Geschachtelte UI bei Listenelementen.For more information on nested UI, see Nested UI in list items.

MediaTransportControlsMediaTransportControls

Das MediaTransportControls-Element ermöglicht Benutzern die Interaktion mit ihren Medien. Hierzu stellt es eine standardmäßige Wiedergabeumgebung bereit, in der Benutzer unter anderem die Wiedergabe starten und anhalten sowie Untertitel aktivieren können.The MediaTransportControls element lets users interact with their media by providing a default playback experience that allows them to play, pause, turn on closed captions, and more. Dieses Steuerelement ist eine Eigenschaft von MediaPlayerElement und unterstützt zwei Layoutoptionen: einzeilig und zweizeilig.This control is a property of MediaPlayerElement and supports two layout options: single-row and double-row. Beim einzeiligen Layout befinden sich der Schieberegler und die Wiedergabeschaltflächen alle in einer Zeile, und die Schaltfläche für Wiedergabe/Pause wird links neben dem Schieberegler angezeigt.In the single-row layout, the slider and playback buttons are all located in one row, with the play/pause button located to the left of the slider. Beim zweizeiligen Layout befindet sich der Schieberegler in einer eigenen Zeile, und die Wiedergabeschaltflächen werden in einer Zeile darunter angezeigt.In the double-row layout, the slider occupies its own row, with the playback buttons on a separate lower row. Bei Designs für die 10-Fuß-Erfahrung empfiehlt sich die Verwendung des zweizeiligen Layouts, da es eine bessere Gamepadnavigation ermöglicht.When designing for the 10-foot experience, the double-row layout should be used, as it provides better navigation for gamepad. Wenn Sie das zweizeilige Layout aktivieren möchten, legen Sie in der TransportControls-Eigenschaft von MediaPlayerElement für das MediaTransportControls-Element Folgendes fest: IsCompact="False".To enable the double-row layout, set IsCompact="False" on the MediaTransportControls element in the TransportControls property of the MediaPlayerElement.

<MediaPlayerElement x:Name="mediaPlayerElement1"  
                    Source="Assets/video.mp4"
                    AreTransportControlsEnabled="True">
    <MediaPlayerElement.TransportControls>
        <MediaTransportControls IsCompact="False"/>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

Weitere Informationen zum Hinzufügen von Medien zu Ihrer App finden Sie unter Medienwiedergabe.Visit Media playback to learn more about adding media to your app.

![HINWEIS:] MediaPlayerElement steht erst ab der Windows 10-Version 1607 zur Verfügung.![NOTE] MediaPlayerElement is only available in Windows 10, version 1607 and later. Bei Apps für niedrigere Windows 10-Versionen muss stattdessen MediaElement verwendet werden.If you're developing an app for an earlier version of Windows 10, you'll need to use MediaElement instead. Die hier angegebenen Empfehlungen gelten auch für MediaElement, und der Zugriff auf die TransportControls-Eigenschaft erfolgt auf die gleiche Weise.The recommendations above apply to MediaElement as well, and the TransportControls property is accessed in the same way.

SuchoberflächeSearch experience

Die Suche nach Inhalten ist eine der am häufigsten ausgeführten Funktionen in der 10-Fuß-Erfahrung.Searching for content is one of the most commonly performed functions in the 10-foot experience. Wenn Ihre App eine Suchfunktion zur Verfügung stellt, sollte der Benutzer auf diese schnell über die Y-Taste auf dem Gamepad zugreifen können.If your app provides a search experience, it is helpful for the user to have quick access to it by using the Y button on the gamepad as an accelerator.

Die meisten Kunden sollten mit dieser Beschleunigungsfunktion bereits vertraut sein. Sie können aber auch der Benutzeroberfläche eine visuelle Y-Glyphe hinzufügen, um anzuzeigen, dass der Benutzer mit dieser Taste auf die Suchfunktion zugreifen kann.Most customers should already be familiar with this accelerator, but if you like you can add a visual Y glyph to the UI to indicate that the customer can use the button to access search functionality. In diesem Fall müssen Sie das Symbol aus der Schriftart Segoe Xbox MDL2 Symbol (&#xE3CC; für XAML-Apps, \E426 für HTML-Apps) verwenden, um die Konsistenz sicherzustellen.If you do add this cue, be sure to use the symbol from the Segoe Xbox MDL2 Symbol font (&#xE3CC; for XAML apps, \E426 for HTML apps) to provide consistency with the Xbox shell and other apps.

Hinweis

Da die Schriftart Segoe Xbox MDL2 Symbol nur auf Xbox verfügbar ist, wird das Symbol auf Ihrem PC nicht ordnungsgemäß angezeigt.Because the Segoe Xbox MDL2 Symbol font is only available on Xbox, the symbol won't appear correctly on your PC. Es wird jedoch auf dem Fernseher angezeigt, nachdem Sie auf Xbox bereitstellen.However, it will show up on the TV once you deploy to Xbox.

Da die Y-Taste nur auf dem Gamepad verfügbar ist, müssen Sie auch andere Möglichkeiten für den Zugriff auf die Suche zur Verfügung stellen, wie Schaltflächen in der Benutzeroberfläche.Since the Y button is only available on gamepad, make sure to provide other methods of access to search, such as buttons in the UI. Andernfalls können einige Kunden möglicherweise nicht auf diese Funktion zugreifen.Otherwise, some customers may not be able to access the functionality.

In der 10-Fuß-Erfahrung ist es für Kunden oft einfacher, eine Vollbildschirm-Suche durchzuführen, da der Platz auf dem Display begrenzt ist.In the 10-foot experience, it is often easier for customers to use a full screen search experience because there is limited room on the display. Unabhängig davon, ob Sie eine Voll- oder Teilbildschirm-Direktsuche haben, empfehlen wir, dass die Bildschirmtastatur bereits geöffnet ist, wenn der Benutzer die Suchfunktion öffnet, damit sofort Suchbegriffe eingegeben werden können.Whether you have full screen or partial-screen, "in-place" search, we recommend that when the user opens the search experience, the onscreen keyboard appears already opened, ready for the customer to enter search terms.

Benutzerdefinierter visueller Zustandsauslöser für XboxCustom visual state trigger for Xbox

Um Ihre UWP-App an die 10-Fuß-Erfahrung anzupassen, empfehlen wir Ihnen, das Layout zu ändern, wenn die App erkennt, dass sie auf einer Xbox-Konsole gestartet wurde.To tailor your UWP app for the 10-foot experience, we recommend that you make layout changes when the app detects that it has been launched on an Xbox console. Eine Möglichkeit, um dies zu erreichen ist die Verwendung eines benutzerdefinierten visuellen Zustandsauslösers.One way to do this is by using a custom visual state trigger. Visuelle Zustandsauslöser sind besonders dann nützlich, wenn Sie in Blend für Visual Studio arbeiten möchten.Visual state triggers are most useful when you want to edit in Blend for Visual Studio. Der folgende Codeausschnitt zeigt, wie ein visueller Zustandsauslöser für Xbox erstellt wird:The following code snippet shows how to create a visual state trigger for Xbox:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <triggers:DeviceFamilyTrigger DeviceFamily="Windows.Xbox"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="RootSplitView.OpenPaneLength"
                        Value="368"/>
                <Setter Target="RootSplitView.CompactPaneLength"
                        Value="96"/>
                <Setter Target="NavMenuList.Margin"
                        Value="0,75,0,27"/>
                <Setter Target="Frame.Margin"
                        Value="0,27,48,27"/>
                <Setter Target="NavMenuList.ItemContainerStyle"
                        Value="{StaticResource NavMenuItemContainerXboxStyle}"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Um den Auslöser zu erstellen, fügen Sie Ihrer App die folgende Klasse hinzu.To create the trigger, add the following class to your app. Dies ist die Klasse, die in dem XAML-Code oben referenziert wird:This is the class that is referenced by the XAML code above:

class DeviceFamilyTrigger : StateTriggerBase
{
    private string _currentDeviceFamily, _queriedDeviceFamily;

    public string DeviceFamily
    {
        get
        {
            return _queriedDeviceFamily;
        }

        set
        {
            _queriedDeviceFamily = value;
            _currentDeviceFamily = AnalyticsInfo.VersionInfo.DeviceFamily;
            SetActive(_queriedDeviceFamily == _currentDeviceFamily);
        }
    }
}

Nachdem Sie den benutzerdefinierten Auslöser hinzugefügt haben, wird Ihre App automatisch die Layoutänderungen ausführen, die Sie im XAML-Code angegeben haben, wenn sie erkennt, dass sie auf einer Xbox One-Konsole ausgeführt wird.After you've added your custom trigger, your app will automatically make the layout modifications you specified in your XAML code whenever it detects that it is running on an Xbox One console.

Sie können außerdem über Programmcode erkennen, ob die App auf Xbox ausgeführt wird, und dann entsprechende Anpassungen durchführen.Another way you can check whether your app is running on Xbox and then make the appropriate adjustments is through code. Mit der folgenden einfachen Variable können Sie überprüfen, ob Ihre App auf Xbox ausgeführt wird:You can use the following simple variable to check if your app is running on Xbox:

bool IsTenFoot = (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily ==
                    "Windows.Xbox");

Anschließend können Sie im Codeblock nach der Überprüfung die entsprechenden Anpassungen für Ihr UI vornehmen.Then, you can make the appropriate adjustments to your UI in the code block following this check.

ZusammenfassungSummary

Beim Entwerfen für die 10 Fuß-Erfahrung müssen einige besondere Punkte berücksichtigt werden, die sich vom Entwerfen für andere Plattformen unterscheiden.Designing for the 10-foot experience has special considerations to take into account that make it different from designing for any other platform. Sie können durchaus Ihre UWP-App einfach zu Xbox One portieren, dies funktioniert. Die App wird jedoch nicht unbedingt für die 10-Fuß-Erfahrung optimiert und kann für den Benutzer mit Frustration verbunden sein.While you can certainly do a straight port of your UWP app to Xbox One and it will work, it won't necessarily be optimized for the 10-foot experience and can lead to user frustration. Wenn Sie die Richtlinien in diesem Artikel befolgen, stellen Sie so sicher, dass Ihre App genauso gut auf Fernsehgeräten funktioniert.Following the guidelines in this article will make sure that your app is as good as it can be on TV.