Edit

Xbox best practices

  • Article

By default, all UWP apps will run on Xbox One without any extra effort on your part. However, if want your app to shine, delight your customers, and compete with the best app experiences on Xbox, you should follow the practices below.

Note

Before you start, take a look at the design guidelines laid out in Designing for Xbox and TV.

To build the best experiences for Xbox One

Do: Turn off mouse mode

Xbox users love their controllers. To optimize for controller input, disable mouse mode and enable directional navigation (also known as XY focus navigation and interaction). Watch out for focus traps and inaccessible UI.

Do: Draw a focus rectangle that is appropriate for a 10-foot experience

Most Xbox users are sitting across the living room from their TV, so keep in mind that the standard focus rectangle is hard to see from ten feet away. To ensure that the UI element with the input focus is clearly visible to the user at all times, follow the Focus visual guidelines. In XAML you will get this behavior for free when your app runs on Xbox, but HTML apps will need to use a custom CSS style.

Do: Integrate with the SystemMediaTransportControls class

Xbox users want to control media apps with the Xbox Media Remote, Cortana (especially the "Play" and "Pause" voice commands), and Xbox SmartGlass. To get these features for free your app should use the SystemMediaTransportControls class, which is automatically included in the Xbox media controls. If your app has custom media controls, make sure to integrate with the SystemMediaTransportControls class to provide these features to your users. If you are creating a background music app, integrate with the SystemMediaTransportControls class to ensure that the background music controls work correctly in the Xbox multitasking tab.

Consider: Draw to the edge of the screen

Many TVs cut off the edges of the display, so all of your app's important content should be displayed within the TV-safe area. UWP uses overscan to keep the content within the TV-safe area, but this default behavior can draw an obvious border around your app. To provide the best experience, turn off the default behavior and follow the instructions at How to draw UI to the edge of the screen.

Important

If you disable overscan, it's your responsibility to make sure that interactive elements and text remain within the TV-safe area.

Consider: Use TV-safe colors

TVs don't handle extreme color intensities as well as computer monitors do. Avoid high-intensity colors in your app so that users don't see odd banded effects or a washed-out image. Also, be aware that differences between TVs mean that colors that look great on your TV might look very different to your users. Read Colors to understand how to make your app look great to everybody!

Remember: You can disable scaling

UWP apps are automatically scaled to ensure that UI elements such as controls and fonts are legible on all devices. Apps that use XAML are scaled by 200%, while apps that use HTML are scaled by 150%. If you want more control over how your app looks on Xbox, disable the default scale factor to use the actual pixel dimensions of an HDTV (1920x1080). Take a look at How to turn off scaling for information about tailoring your app to look great on Xbox.

See also