Conception pour Xbox et télévisionDesigning for Xbox and TV

Concevez votre application Windows pour qu’elle fonctionne correctement et fonctionne bien sur les écrans Xbox One et télévision.Design your Windows app so that it looks good and functions well on Xbox One and television screens.

Consultez les interactions du boîtier et du contrôle à distance pour obtenir des conseils sur les expériences d’interaction dans les applications UWP dans une expérience de 10 mètres .See Gamepad and remote control interactions for guidance on interaction experiences in UWP applications in the 10-foot experience.

Vue d’ensembleOverview

La plateforme Windows universelle vous permet de créer des expériences agréables sur plusieurs types d’appareils Windows 10.The Universal Windows Platform lets you create delightful experiences across multiple Windows 10 devices. La plupart des fonctionnalités fournies par l’infrastructure UWP permettent aux applications d’utiliser la même interface utilisateur sur ces appareils, sans travail supplémentaire.Most of the functionality provided by the UWP framework enables apps to use the same user interface (UI) across these devices, without additional work. Toutefois, des éléments particuliers sont à prendre en compte afin d’optimiser votre application et l’adapter pour un fonctionnement parfait sur les écrans de télévision et Xbox One.However, tailoring and optimizing your app to work great on Xbox One and TV screens requires special considerations.

L’expérience qui consiste à se trouver assis sur son fauteuil en face de la télévision et à interagir avec celle-ci à l’aide d’un boîtier de commande ou d’une télécommande est appelée le « 10-foot experience »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. Ce nom vient du fait que l’utilisateur se trouve généralement à 3 mètres (10 pieds) de l’écran.It is so named because the user is generally sitting approximately 10 feet away from the screen. Cela soulève des défis propres à cette expérience, qui ne sont pas présents dans l’expérience « 2-foot experience » ou lors d’interactions avec un PC.This provides unique challenges that aren't present in, say, the 2-foot experience, or interacting with a PC. Si vous développez une application pour Xbox One ou tout autre appareil dont la sortie et l’entrée se font respectivement sur télévision et par boîtier de commande, vous devez toujours garder ceci à l’esprit.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.

Toutes les étapes décrites dans cet article ne sont pas nécessaires pour que votre application fonctionne pour les expériences « 10-foot experience », mais le fait de les comprendre et de prendre les décisions appropriées pour votre application créera une meilleure « 10-foot experience », mieux adaptée aux besoins spécifiques de votre application.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. Lorsque vous concevez une application pour un environnement de 3 mètres, prenez en compte les principes de conception suivants.As you bring your app to life in the 10-foot environment, consider the following design principles.

SimpleSimple

La conception pour un environnement de 3 mètres présente des défis uniques.Designing for the 10-foot environment presents a unique set of challenges. La résolution et la distance d’affichage peuvent rendre difficile pour les utilisateurs l’assimilation d’une trop grande quantité d’informations.Resolution and viewing distance can make it difficult for people to process too much information. Faites en sorte que votre conception soit épurée et réduite aux composants les plus simples.Try to keep your design clean, reduced to the simplest possible components. La quantité d’informations affichées sur une télévision doit être comparable à ce que vous pourriez voir sur un téléphone mobile, plutôt que sur un bureau d’ordinateur.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.

Écran d’accueil de Xbox One

CohérenceCoherent

Les applications UWP dans un environnement de 3 mètres doivent être intuitives et faciles d’utilisation.UWP apps in the 10-foot environment should be intuitive and easy to use. Le focus doit apparaître clairement.Make the focus clear and unmistakable. Organisez le contenu de manière à ce que la navigation soit prévisible et cohérente.Arrange content so that movement across the space is consistent and predictable. Fournissez à vos utilisateurs le chemin d’accès le plus rapide au contenu souhaité.Give people the shortest path to what they want to do.

L’application Xbox One Movies

Tous les films présentés dans la capture d’écran sont disponibles sur Microsoft movies & TV.All movies shown in the screenshot are available on Microsoft Movies & TV.

CaptivantCaptivating

Les expériences les plus immersives et cinématographiques se passent sur grand écran.The most immersive, cinematic experiences take place on the big screen. Des paysages de bord à bord et l’utilisation de couleurs et d’une typographie vives font passer vos applications au niveau supérieur.Edge-to-edge scenery, elegant motion, and vibrant use of color and typography take your apps to the next level. Osez. Imaginez.Be bold and beautiful.

Application des avatars de Xbox One

Optimisations en matière d’expérience « 10-foot »Optimizations for the 10-foot experience

À présent que vous connaissez les principes d’une bonne conception d’application UWP pour une expérience « 10-foot », lisez les descriptions suivantes pour vous approprier les différentes façons d’optimiser votre application et créer une expérience utilisateur améliorée.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.

FonctionnalitéFeature DescriptionDescription
Redimensionnement des éléments de l’interface utilisateurUI element sizing La plateforme Windows universelle utilise la mise à l’échelle et les pixels effectifs pour mettre à l’échelle l’interface utilisateur en fonction de la distance d’affichage.The Universal Windows Platform uses scaling and effective pixels to scale the UI according to the viewing distance. Le fait de comprendre le redimensionnement et de l’appliquer à votre interface utilisateur vous aide à optimiser votre environnement de 3 mètres.Understanding sizing and applying it across your UI will help optimize your app for the 10-foot environment.
Zones adaptées à l’écran de TVTV-safe area La plateforme UWP évite automatiquement et par défaut l’affichage de contenu dans les zones non adaptées à l’écran de TV (près des bords de l’écran).The UWP will automatically avoid displaying any UI in TV-unsafe areas (areas close to the edges of the screen) by default. Cela crée cependant un effet « d’encadré » ; l’interface utilisateur semble alors s’afficher dans un cadre.However, this creates a "boxed-in" effect in which the UI looks letterboxed. Pour que votre application soit véritablement immersive sur les écrans de télévision, vous devez la modifier afin qu’elle s’étende jusqu’aux bords des écrans compatibles.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.
CouleursColors La plateforme UWP prend en charge les thèmes de couleur. Une application qui respecte le thème du système sera foncée par défaut sur Xbox One.The UWP supports color themes, and an app that respects the system theme will default to dark on Xbox One. Si votre application possède un thème de couleur spécifique, gardez à l’esprit que certaines couleurs ne fonctionnent pas correctement sur les écrans de télévision et doivent donc être évitées.If your app has a specific color theme, you should consider that some colors don't work well for TV and should be avoided.
SonSound Les sons jouent un rôle clé dans l’expérience « 10-foot », contribuant ainsi à l’envoi de commentaires à l’utilisateur.Sounds play a key role in the 10-foot experience, helping to immerse and give feedback to the user. La plateforme UWP fournit des fonctionnalités qui activent automatiquement les sons des contrôles courants lorsque l’application s’exécute sur Xbox One.The UWP provides functionality that automatically turns on sounds for common controls when the app is running on Xbox One. Découvrez la prise en charge des sons intégrée à la plateforme UWP et comment en tirer partie.Find out more about the sound support built into the UWP and learn how to take advantage of it.
Recommandations en matière de contrôles d’interface utilisateurGuidelines for UI controls Il existe plusieurs contrôles d’interface utilisateur qui fonctionnent correctement sur plusieurs appareils, mais pour lesquels certains éléments doivent être pris en compte s’ils sont utilisés sur un téléviseur.There are several UI controls that work well across multiple devices, but have certain considerations when used on TV. Découvrez certaines meilleures pratiques portant sur l’utilisation de ces contrôles lors de la conception pour l’expérience « 10-foot ».Read about some best practices for using these controls when designing for the 10-foot experience.
Déclencheur d’état visuel personnalisé pour XboxCustom visual state trigger for Xbox Pour personnaliser votre application UWP pour l’expérience « 10-foot », nous vous recommandons d’utiliser un déclencheur d’état visuel personnalisé pour modifier la disposition lorsque l’application détecte son lancement sur une console Xbox.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.

Outre les considérations relatives à la conception et à la mise en page précédentes, vous devez prendre en compte un certain nombre d’optimisations d' interaction de contrôle à distance pour créer votre application.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.

FonctionnalitéFeature DescriptionDescription
Interaction et navigation en mode focus XYXY focus navigation and interaction La navigation de focus XY permet à l’utilisateur de naviguer dans l’interface utilisateur de votre application.XY focus navigation enables the user to navigate around your app's UI. Toutefois, cela limite la navigation à quatre directions : haut, bas, gauche et droite.However, this limits the user to navigating up, down, left, and right. Cette section apporte des recommandations pour y remédier ainsi que d’autres considérations.Recommendations for dealing with this and other considerations are outlined in this section.
Mode de la sourisMouse mode La navigation au focus XY n’est pas pratique, voire possible, pour certains types d’applications, telles que les cartes ou le dessin et la peinture d’applications.XY focus navigation isn't practical, or even possible, for some types of applications, such as maps or drawing and painting apps. Dans ce cas, le mode souris permet aux utilisateurs de naviguer librement avec un boîtier ou un contrôle à distance, tout comme une souris sur un PC.In these cases, mouse mode lets users navigate freely with a gamepad or remote control, just like a mouse on a PC.
Visuel du focusFocus visual L’élément visuel de focus est une bordure qui met en surbrillance l’élément d’interface utilisateur actuellement actif.The focus visual is a border that highlights the currently focused UI element. Cela permet à l’utilisateur d’identifier rapidement l’interface utilisateur avec laquelle il navigue ou d’interagir.This helps the user quickly identify the UI they are navigating through or interacting with.
Activation du focusFocus engagement L’engagement de focus oblige l’utilisateur à appuyer sur le bouton a/SELECT sur un boîtier de commande ou un contrôle à distance lorsqu’un élément d’interface utilisateur a le focus pour interagir avec lui.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.
Boutons matérielsHardware buttons Le boîtier de commande et le contrôle à distance fournissent des boutons et des configurations très différents.The gamepad and remote control provide very different buttons and configurations.

Notes

La plupart des extraits de code dans cette rubrique sont en langage XAML/C#. Mais, les principes et les concepts s’appliquent à toutes les applications UWP.Most of the code snippets in this topic are in XAML/C#; however, the principles and concepts apply to all UWP apps. Si vous développez une application UWP en HTML/JavaScript pour Xbox, consultez l’excellente bibliothèque TVHelpers sur GitHub.If you're developing an HTML/JavaScript UWP app for Xbox, check out the excellent TVHelpers library on GitHub.

Redimensionnement des éléments de l’interface utilisateurUI element sizing

Étant donné que l’utilisateur d’une application dans un environnement de 3 mètres utilise un boîtier de commande ou une télécommande et se trouve à plusieurs mètres de l’écran, vous devez incorporer à votre conception certains éléments liés à l’interface utilisateur.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. Assurez-vous que le contenu sur l’interface utilisateur présente la densité appropriée et que l’interface n’est pas trop encombrée, afin que l’utilisateur puisse la parcourir et sélectionner des éléments en toute simplicité.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. N’oubliez pas que la simplicité est le maître mot.Remember: simplicity is key.

Facteur d’échelle et disposition adaptativeScale factor and adaptive layout

Le facteur d’échelle permet de s’assurer que le dimensionnement des éléments de l’interface utilisateur est approprié pour l’appareil sur lequel s’exécute l’application.Scale factor helps with ensuring that UI elements are displayed with the right sizing for the device on which the app is running. Sur le Bureau, ce paramètre se trouve dans Paramètres > Système > Affichage sous forme de curseur.On desktop, this setting can be found in Settings > System > Display as a sliding value. Ce paramètre existe également sur les appareils mobiles prenant en charge ce paramètre.This same setting exists on phone as well if the device supports it.

Modifier la taille du texte, des applications et des autres éléments

Sur Xbox One, aucun paramètre système ne permet d’effectuer ces opérations. Cependant, pour que les éléments d’interface utilisateur UWP aient une taille appropriée pour la TV, ils sont dimensionnés par défaut à 200 % pour les applications XAML et à 150 % pour les applications HTML.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. Tant que les éléments de l’interface utilisateur ont une taille appropriée pour les autres appareils, ce sera également le cas pour la TV.As long as UI elements are appropriately sized for other devices, they will be appropriately sized for TV. Xbox One effectue le rendu de votre application à 1080 p (1920 x 1080 pixels).Xbox One renders your app at 1080p (1920 x 1080 pixels). Par conséquent, lorsque vous intégrez une application à partir d’autres appareils, comme un PC, assurez-vous de l’aspect correct de l’interface utilisateur à 960 x 540 pixels à une échelle de 100 % (ou à 1280 x 720 pixels à une échelle de 100 % pour les applications HTML) à l’aide de techniques adaptatives.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.

La conception pour Xbox diffère quelque peu de la conception pour PC, car une seule résolution est concernée : 1920 x 1080.Designing for Xbox is a little different from designing for PC because you only need to worry about one resolution, 1920 x 1080. Peu importe si l’utilisateur possède une télévision dont la résolution est supérieure — les applications UWP sont toujours mises à l’échelle à 1080 p.It doesn't matter if the user has a TV that has better resolution—UWP apps will always scale to 1080p.

Les tailles de ressource appropriées sont également extraites pour votre application à partir de l’échelle 200 % (ou 150 % pour les applications HTML) lorsque l’application est exécutée sur Xbox One, quelle que soit la résolution de la télévision.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.

Densité de contenuContent density

Lorsque vous concevez votre application, n’oubliez pas que l’utilisateur se trouve relativement loin de l’interface utilisateur et interagit avec cette dernière à l’aide d’un contrôleur de jeu ou d’une télécommande, qui rend la navigation plus chronophage que s’il utilisait une souris ou une entrée tactile.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.

Tailles des contrôles d’interface utilisateurSizes of UI controls

La taille des éléments interactifs de l’interface utilisateur doit être d’au moins 32 pixels (pixels effectifs).Interactive UI elements should be sized at a minimum height of 32 epx (effective pixels). Ceci est la valeur par défaut pour les contrôles UWP courants. Lorsqu’elle est utilisée à une échelle de 200 %, elle permet d’assurer la visibilité à distance des éléments de l’interface utilisateur et de réduire la densité du contenu.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.

Bouton UWP à une échelle de 100 % et 200 %

Nombre de clics.Number of clicks

Lorsque l’utilisateur navigue d’un bord de l’écran de télévision à l’autre, la simplification de votre interface utilisateur doit se faire en six clics maximum.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. Là encore s’applique le principe de la simplicité.Again, the principle of simplicity applies here.

6 icônes pour traverser

Tailles de texteText sizes

Pour rendre votre interface utilisateur visible à distance, appuyez-vous sur les règles suivantes :To make your UI visible from a distance, use the following rules of thumb:

  • Texte principal et contenu de lecture : 15 epx au minimumMain text and reading content: 15 epx minimum
  • Texte non critique et contenu supplémentaire : 12 epx au minimumNon-critical text and supplemental content: 12 epx minimum

Lorsque vous utilisez du texte supérieur à la normale dans votre interface utilisateur, choisissez une taille qui ne limite pas trop l’espace de l’écran (en occupant de l’espace que d’autres contenus pourraient remplir).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.

Désactivation du facteur d’échelleOpting out of scale factor

Nous recommandons que votre application tire parti de la prise en charge du facteur d’échelle, ce qui lui permettra de s’exécuter correctement sur tous les appareils, ayant été mise à l’échelle pour chaque type d’appareil.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. Il reste cependant possible de désactiver ce comportement et de concevoir toutes vos interfaces utilisateur à une échelle de 100 %.However, it is possible to opt out of this behavior and design all of your UI at 100% scale. Notez que vous ne pouvez pas remplacer le facteur d’échelle par une valeur autre que 100 %.Note that you cannot change the scale factor to anything other than 100%.

Dans les applications XAML, vous pouvez annuler le facteur d’échelle en utilisant l’extrait de code suivant :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 vous indiquera si vous avez correctement choisi.result will inform you whether you successfully opted out.

Pour plus d’informations et des exemples de code HTML/JavaScript, consultez Comment désactiver la mise à l’échelle.For more information, including sample code for HTML/JavaScript, see How to turn off scaling.

Veillez à calculer la taille appropriée des éléments d’interface utilisateur en doublant le nombre effectif de pixels réels mentionnés dans cette rubrique (ou en multipliant la valeur par 1,5 pour les applications HTML).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).

Zones adaptées à l’écran de TVTV-safe area

Le contenu n’occupe pas l’ensemble de l’écran de toutes les télévisions pour des raisons historiques, mais aussi technologiques.Not all TVs display content all the way to the edges of the screen due to historical and technological reasons. La plateforme UWP évite d’afficher du contenu d’interface utilisateur dans des zones inadaptées à l’écran de TV ; elle dessine uniquement l’arrière-plan de la page.By default, the UWP will avoid displaying any UI content in TV-unsafe areas and instead will only draw the page background.

La zone inadaptée à l’écran de TV est représentée par la zone bleue dans l’image suivante.The TV-unsafe area is represented by the blue area in the following image.

Zone inadaptée à l’écran de TV

Vous pouvez définir l’arrière-plan sur une couleur statique ou une couleur de thème, voire sur une image, comme le démontrent les extraits de code suivants.You can set the background to a static or themed color, or to an image, as the following code snippets demonstrate.

Couleur du thèmeTheme color

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

ImageImage

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

Votre application ressemblera à ceci sans travail supplémentaire.This is what your app will look like without additional work.

Zones adaptées à l’écran de TV

Ce n’est pas une solution optimale car elle crée un effet d’« encadré », donnant l’impression que des parties de l’interface utilisateur, telles que le volet et la grille de navigation, ont été tronquées.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. Vous pouvez cependant faire des optimisations pour étendre certaines parties de l’interface utilisateur à l’ensemble de l’écran. Cela donne à l’application un aspect plus cinématographique.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.

Étendre l’IU à l’ensemble de l’écranDrawing UI to the edge

Nous vous recommandons d’étendre certains éléments d’interface utilisateur à l’ensemble de l’écran pour apporter à l’utilisateur une véritable expérience d’immersion.We recommend that you use certain UI elements to extend to the edges of the screen to provide more immersion to the user. Cela comprend les classes ScrollViewers et CommandBars ainsi que les volets de navigation.These include ScrollViewers, nav panes, and CommandBars.

En revanche, il est important que le texte et les éléments interactifs ne soient jamais près des bords de l’écran ; cela garantit qu’ils ne seront pas tronqués sur certaines télévisions.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. Nous recommandons d’étendre seulement les éléments visuels non essentiels à une distance de 5 % des bords de l’écran.We recommend that you draw only non-essential visuals within 5% of the screen edges. Comme mentionné dans Redimensionnement des éléments de l’interface utilisateur, une application UWP suivant le facteur d’échelle par défaut de la console Xbox One (200 %) utilise une zone de 960 x 540 epx. Vous devez donc éviter de placer l’interface utilisateur primordiale de votre application dans les zones suivantes :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 à partir du haut et du bas27 epx from the top and bottom
  • 48 epx des bords gauche et droit48 epx from the left and right sides

Les sections suivantes décrivent comment étendre votre interface utilisateur aux bords de l’écran.The following sections describe how to make your UI extend to the screen edges.

Limites de fenêtre principaleCore window bounds

Pour les applications UWP ciblant uniquement l’expérience « 10-foot », les limites de fenêtre principale constituent une option plus simple.For UWP apps targeting only the 10-foot experience, using core window bounds is a more straightforward option.

Dans la méthode OnLaunched de App.xaml.cs, ajoutez le code suivant :In the OnLaunched method of App.xaml.cs, add the following code:

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

Avec cette ligne de code, la fenêtre d’application remplit l’écran. Vous devez donc déplacer toutes les UI interactives et essentielles dans la zone adaptée à l’écran de TV décrite précédemment.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. L’interface utilisateur temporaire, telle que les menus contextuels et les classes ComboBox ouvertes restent automatiquement à l’intérieur de la zone adaptée à l’écran de TV.Transient UI, such as context menus and opened ComboBoxes, will automatically remain inside the TV-safe area.

Limites de fenêtre principale

Arrière-plans de volet de navigationPane backgrounds

Les volets de navigation sont généralement placés près du bord de l’écran. L’arrière-plan doit donc s’étendre dans la zone inadaptée à l’écran de TV pour ne pas qu’il y ait d’espaces vides.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. Vous pouvez le faire en modifiant simplement la couleur d’arrière-plan du volet de navigation pour la rendre identique à la couleur d’arrière-plan de l’application.You can do this by simply changing the color of the nav pane's background to the color of the app's background.

Les limites de fenêtre principale vous permettent d’étendre votre interface utilisateur aux bords de l’écran (comme décrit précédemment), mais vous devez ensuite utiliser des marges positives sur le contenu de SplitView pour le conserver dans la zone adaptée à l’écran de TV.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.

Volet de navigation étendu aux bords de l’écran

L’arrière-plan du volet de navigation a été étendu aux bords de l’écran, tandis que ses éléments de navigation sont conservés dans la zone adaptée à l’écran de TV.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. Le contenu de SplitView (dans ce cas, une grille d’éléments) a été étendu vers le bas de l’écran pour ne pas avoir l’air tronqué. La partie supérieure de la grille reste toujours dans la zone adaptée à l’écran de TV.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. (Pour en savoir plus, voir Extrémités de listes et de grilles défilantes).(Learn more about how to do this in Scrolling ends of lists and grids).

L’extrait de code suivant permet de réaliser l’effet en question :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 est un autre exemple de volet généralement positionné près d’un ou plusieurs bords de l’application. Son arrière-plan doit donc s’étendre aux bords des écrans de TV.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. Il contient généralement un bouton Plus (...) sur le côté droit qui doit rester dans la zone adaptée à l’écran de TV.It also usually contains a More button, represented by "..." on the right side, which should remain in the TV-safe area. Voici quelques stratégies différentes permettant d’obtenir les interactions et effets visuels souhaités.The following are a few different strategies to achieve the desired interactions and visual effects.

Option 1 : modifiez la couleur d’arrière-plan de CommandBar pour la définir sur transparent ou sur la même couleur que l’arrière-plan de la page :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>

CommandBar paraît ainsi avoir le même arrière-plan que le reste de la page ; l’arrière-plan s’étend donc vers le bord de l’écran en toute fluidité.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 : ajoutez un rectangle en arrière-plan dont le remplissage est de la même couleur que l’arrière-plan de CommandBar, puis placez-le sous CommandBar et à travers le reste de la page :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>

Notes

Si vous optez pour cette approche, gardez à l’esprit que le bouton Plus modifie la hauteur de la classe CommandBar ouverte, si nécessaire, afin de montrer les étiquettes des AppBarButton sous leurs icônes.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. Nous vous recommandons de déplacer les étiquettes à droite de leurs icônes afin d’éviter ce redimensionnement.We recommend that you move the labels to the right of their icons to avoid this resizing. Pour plus d’informations, voir Libellés CommandBar.For more information, see CommandBar labels.

Ces deux approches s’appliquent également aux autres types de contrôle répertoriés dans cette section.Both of these approaches also apply to the other types of controls listed in this section.

Extrémités de listes et de grilles défilantesScrolling ends of lists and grids

Il est courant que les listes et les grilles contiennent davantage d’éléments que l’écran puisse afficher simultanément.It's common for lists and grids to contain more items than can fit onscreen at the same time. Lorsque c’est le cas, nous vous recommandons d’étendre la liste ou la grille au bord de l’écran.When this is the case, we recommend that you extend the list or grid to the edge of the screen. Les listes et les grilles à défilement horizontal doivent s’étendre vers le bord droit et celles à défilement vertical doivent s’étendre vers le bas.Horizontally scrolling lists and grids should extend to the right edge, and vertically scrolling ones should extend to the bottom.

Grille contenue dans la zone adaptée à l’écran de TV tronquée

Pendant qu’une liste ou une grille est étendue de la sorte, il est important de conserver le visuel du focus et son élément associé à l’intérieur de la zone adaptée à l’écran de TV.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.

Le focus de la grille défilante doit être conservé à l’intérieur de la zone adaptée à l’écran de TV

La plateforme UWP comporte des fonctionnalités qui permettent de conserver le visuel du focus à l’intérieur des VisibleBounds, mais vous devez ajouter du remplissage pour vous assurer que les éléments de liste/grille peuvent défiler à l’écran à l’intérieur de la zone adaptée à l’écran de TV.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. Plus précisément, vous ajoutez une marge positive au ItemsPresenterde ListView ou de GridView, comme dans l’extrait de code suivant :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>

Vous placez l’extrait de code précédent dans les ressources de la page ou de l’application, puis vous y accédez de la manière suivante :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}"
                  ... />

Notes

Cet extrait de code est spécifiquement conçu pour les contrôles ListView. Pour un style GridView, définissez l’attribut TargetType des éléments ControlTemplate et Style sur GridView.This code snippet is specifically for ListViews; for a GridView style, set the TargetType attribute for both the ControlTemplate and the Style to GridView.

Pour un contrôle plus précis de la façon dont les éléments sont mis en vue, si votre application cible la version 1803 ou une version ultérieure, vous pouvez utiliser l' événement UIElement. BringIntoViewRequested.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. Vous pouvez le placer sur le ItemsPanel pour que ListViewle contrôle / GridView ListView puisse l’intercepter avant que le ScrollViewer interne ne fasse, comme dans les extraits de code suivants :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
        });
    }
}

CouleursColors

Par défaut, le plateforme Windows universelle met à l’échelle les couleurs de votre application vers la plage TV sécurisée (pour plus d’informations, consultez couleurs sécurisées pour les téléviseurs ), afin que votre application fonctionne correctement sur n’importe quelle TV.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. En outre, il existe des améliorations que vous pouvez apporter à l’ensemble de couleurs que votre application utilise pour améliorer l’expérience visuelle sur la télévision.In addition, there are improvements that you can make to the set of colors your app uses to improve the visual experience on TV.

Thème d’applicationApplication theme

Vous pouvez choisir un thème d’application (clair ou foncé) en fonction de ce qui est approprié pour votre application, ou vous pouvez ignorer le thème.You can choose an Application theme (dark or light) according to what is right for your app, or you can opt out of theming. Pour en savoir plus sur les recommandations générales pour les thèmes, voir Thèmes de couleur.Read more about general recommendations for themes in Color themes.

L’UWP permet également aux applications de définir le thème de manière dynamique selon les paramètres système fournis par les appareils sur lesquels elles s’exécutent.The UWP also allows apps to dynamically set the theme based on the system settings provided by the devices on which they run. Bien que l’UWP respecte toujours les paramètres de thème spécifiés par l’utilisateur, chaque appareil fournit également un thème par défaut approprié.While the UWP always respects the theme settings specified by the user, each device also provides an appropriate default theme. En raison de la nature de Xbox One, qui génère plus d’expériences multimédias que d’expériences de productivité, son thème de système est foncé par défaut.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. Si le thème de votre application est basé sur les paramètres système, celui-ci devrait être foncé sur Xbox One par défaut.If your app's theme is based on the system settings, expect it to default to dark on Xbox One.

Couleur d’accentuationAccent color

La plateforme UWP fournit un moyen pratique pour afficher la couleur d’accentuation que l’utilisateur a sélectionnée dans ses paramètres système.The UWP provides a convenient way to expose the accent color that the user has selected from their system settings.

Sur Xbox One, l’utilisateur est en mesure de sélectionner une couleur utilisateur, comme il peut sélectionner une couleur d’accentuation sur un PC.On Xbox One, the user is able to select a user color, just as they can select an accent color on a PC. Dans la mesure où votre application appelle ces couleurs d’accentuation par le biais de pinceaux ou de ressources de couleur, la couleur sélectionnée par l’utilisateur dans les paramètres système sera utilisée.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. Notez que les couleurs d’accentuation sur Xbox One sont définies par l’utilisateur et non par le système.Note that accent colors on Xbox One are per user, not per system.

Notez également que l’ensemble des couleurs utilisateur sur Xbox One n’est pas le même que sur les PC, téléphones et autres appareils.Please also note that the set of user colors on Xbox One is not the same as that on PCs, phones, and other devices.

Tant que votre application utilise une ressource pinceau telle que SystemControlForegroundAccentBrushou une ressource de couleur (SystemAccentColor), ou qu’elle appelle à la place des couleurs d’accentuation directement via l’API UIColorType. accent * , ces couleurs sont remplacées par des couleurs d’accentuation disponibles sur Xbox One.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. Les couleurs du pinceau à contraste élevé sont également extraites du système de la même façon que sur un PC et un téléphone.High contrast brush colors are also pulled in from the system the same way as on a PC and phone.

Pour en savoir plus sur la couleur d’accentuation en général, voir Couleur d’accentuation.To learn more about accent color in general, see Accent color.

Variantes de couleur entre les écrans de télévisionColor variance among TVs

Lors de la conception d’applications pour la télévision, notez que les couleurs s’affichent de manière légèrement différente en fonction des types de télévision.When designing for TV, note that colors display quite differently depending on the TV on which they are rendered. Ne supposez pas que les couleurs ressembleront exactement à celles de votre écran.Don't assume colors will look exactly as they do on your monitor. Si votre application repose sur des nuances de couleur subtiles pour différencier les diverses parties de l’interface utilisateur, les couleurs pourraient facilement se mélanger et ainsi dérouter les utilisateurs.If your app relies on subtle differences in color to differentiate parts of the UI, colors could blend together and users could get confused. Essayez d’utiliser des couleurs assez distinctes pour que les utilisateurs puissent bien les différentier, quelle que soit la télévision qu’ils utilisent.Try to use colors that are different enough that users will be able to clearly differentiate them, regardless of the TV they are using.

Couleurs adaptées aux écrans de TVTV-safe colors

Les valeurs RVB d’une couleur représentent l’intensité du rouge, du vert et du bleu.A color's RGB values represent intensities for red, green, and blue. Les téléviseurs ne traitent pas très bien les intensités extrêmes — . elles peuvent produire un effet à bande étrange ou sembler pâles sur certains téléviseurs.TVs don't handle extreme intensities very well—they can produce an odd banded effect, or appear washed out on certain TVs. En outre, les couleurs à haute intensité peuvent provoquer un effet Bloom (les pixels avoisinants émettent les mêmes couleurs).Additionally, high-intensity colors may cause blooming (nearby pixels start drawing the same colors). Bien que les avis divergent sur quelles couleurs sont adaptées aux écrans de TV, les couleurs dont les valeurs RVB sont comprises entre 16 et 235 (ou 10-EB en notation hexadécimale) sont généralement adaptées aux écrans de TV.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.

Plage de couleurs adaptées aux écrans de TV

Historiquement, les applications sur Xbox devaient adapter leurs couleurs pour qu’elles tombent dans cette plage de couleurs « sécurisée pour la télévision ». Toutefois, à partir de la mise à jour des créateurs de automne, Xbox One met automatiquement à l’échelle le contenu complet de la plage TV.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. Cela signifie que la plupart des développeurs d’applications n’ont plus à se soucier des couleurs TV-safe.This means that most app developers no longer have to worry about TV-safe colors.

Important

Le contenu vidéo qui est déjà dans la plage de couleurs sécurisée pour la télévision n’a pas cet effet de mise à l’échelle des couleurs appliqué en cas de lecture à l’aide de Media Foundation.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.

Si vous développez une application à l’aide de DirectX 11 ou DirectX 12 et que vous créez votre propre chaîne de permutation pour afficher l’interface utilisateur ou la vidéo, vous pouvez spécifier l’espace de couleurs que vous utilisez en appelant IDXGISwapChain3 :: SetColorSpace1, ce qui permet au système de savoir s’il doit mettre à l’échelle les couleurs.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.

Recommandations en matière de contrôles d’interface utilisateurGuidelines for UI controls

Il existe plusieurs contrôles d’interface utilisateur qui fonctionnent correctement sur plusieurs appareils, mais pour lesquels certains éléments doivent être pris en compte s’ils sont utilisés sur un téléviseur.There are several UI controls that work well across multiple devices, but have certain considerations when used on TV. Découvrez certaines meilleures pratiques portant sur l’utilisation de ces contrôles lors de la conception pour l’expérience « 10-foot ».Read about some best practices for using these controls when designing for the 10-foot experience.

Contrôle PivotPivot control

Un contrôle Pivot permet une navigation rapide des affichages au sein d’une application en sélectionnant différents en-têtes ou onglets.A Pivot provides quick navigation of views within an app through selecting different headers or tabs. Le contrôle souligne l’en-tête sur lequel se trouve le focus, ce qui rend plus visible l’en-tête sélectionné lorsque vous utilisez le boîtier de commande/la télécommande.The control underlines whichever header has focus, making it more obvious which header is currently selected when using gamepad/remote.

Souligné par contrôle Pivot

Vous pouvez régler la propriété Pivot.IsHeaderItemsCarouselEnabled sur true pour que les pivots gardent toujours la même position, et éviter que l’en-tête de pivot sélectionné se place toujours en première position.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. Cette expérience est plus intéressante pour les grands écrans tels que les écrans de télévision, car le renvoi à la ligne des en-têtes peut gêner les utilisateurs.This is a better experience for large-screen displays such as TV, because header wrapping can be distracting to users. Si tous les en-têtes de pivot ne sont pas visibles à l’écran en même temps, une barre de défilement permet aux clients d’afficher les autres en-têtes. Toutefois, vous devez vous assurer qu’ils tiennent tous à l’écran pour offrir la meilleure expérience possible.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. Pour en savoir plus, consultez Onglets et pivots.For more information, see Tabs and pivots.

Un volet de navigation (également appelé menu hamburger) est un contrôle de navigation couramment utilisé dans les applications UWP.A navigation pane (also known as a hamburger menu) is a navigation control commonly used in UWP apps. En règle générale, il s’agit d’un volet comportant plusieurs options dans un menu de style de liste qui dirigera l’utilisateur vers différentes pages.Typically it is a pane with several options to choose from in a list style menu that will take the user to different pages. En général, ce volet démarre en mode réduit pour économiser l’espace ; l’utilisateur peut l’ouvrir en cliquant sur un bouton.Generally this pane starts out collapsed to save space, and the user can open it by clicking on a button.

Même si les volets de navigation sont très accessibles par souris et écran tactile, ce n’est pas le cas pour le boîtier de commande/la télécommande car l’utilisateur doit ouvrir le volet par le biais d’un bouton.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. Par conséquent, une bonne pratique consiste à rendre possible l’ouverture du panneau de navigation à l’aide de la touche Affichage, ainsi que son ouverture en naviguant tout à gauche de la page.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. Vous trouverez un exemple de code sur la façon d’implémenter ce modèle de conception dans le document de navigation de focus par programmation .Code sample on how to implement this design pattern can be found in Programmatic focus navigation document. L’accès aux contenus du volet est ainsi grandement facilité.This will provide the user with very easy access to the contents of the pane. Pour en savoir plus sur la façon dont les volets de navigation se comportent sur des écrans de tailles différentes et pour connaître les meilleures pratiques en matière de navigation pour le boîtier de commande/la télécommande, voir Volets de navigation.For more information about how nav panes behave in different screen sizes as well as best practices for gamepad/remote navigation, see Nav panes.

Libellés CommandBarCommandBar labels

Il est judicieux de placer les libellés à droite des icônes sur une classe CommandBar afin de réduire sa hauteur et garantir la cohérence de cette dernière.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. Vous pouvez le faire en définissant la propriété CommandBar.DefaultLabelPosition sur CommandBarDefaultLabelPosition.Right.You can do this by setting the CommandBar.DefaultLabelPosition property to CommandBarDefaultLabelPosition.Right.

CommandBar comportant des libellés à droite des icônes

La définition de cette propriété provoquera également l’affichage permanent des libellés, ce qui fonctionne bien pour l’expérience « 10-foot », car elle réduit le nombre de clics requis pour l’utilisateur.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. C’est également un excellent modèle que les autres types d’appareil peuvent suivre.This is also a great model for other device types to follow.

Info-bulleTooltip

Le contrôle Tooltip a été introduit pour fournir à l’utilisateur des informations supplémentaires dans l’interface utilisateur lorsqu’il pointe avec la souris ou maintient son doigt sur un élément.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. Pour le boîtier de commande et la télécommande, Tooltip s’affiche après un court instant lorsque l’élément obtient le focus, reste à l’écran pendant un court moment, puis disparaît.For gamepad and remote, Tooltip appears after a brief moment when the element gets focus, stays onscreen for a short time, and then disappears. Ce comportement peut devenir gênant si trop de contrôles Tooltip sont utilisés.This behavior could be distracting if too many Tooltips are used. Essayez d’éviter Tooltip lors de la conception d’applications pour la télévision.Try to avoid using Tooltip when designing for TV.

Styles de boutonButton styles

Bien que les boutons UWP standard fonctionnent correctement sur les télévisions, certains styles visuels attirent mieux l’attention sur l’interface utilisateur. Vous devez prendre cela en compte pour l’ensemble des plateformes, en particulier pour l’expérience « 10-foot » ; elles bénéficient d’une communication claire sur l’emplacement du focus.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. Pour en savoir plus sur ces styles, voir Boutons.To read more about these styles, see Buttons.

Éléments d’interface utilisateur imbriquéeNested UI elements

L’interface utilisateur imbriquée expose les éléments actionnables imbriqués inclus dans un élément d’interface utilisateur conteneur où l’élément imbriqué et l’élément conteneur peuvent prendre le focus indépendamment l’un de l’autre.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.

L’interface utilisateur imbriquée est parfaitement indiquée pour certains types d’entrée, mais pas toujours pour les manettes de jeu et les télécommandes, qui font appel à la navigation XY.Nested UI works well for some input types, but not always for gamepad and remote, which rely on XY navigation. Veillez à suivre les recommandations fournies dans cette rubrique pour vous assurer que votre interface utilisateur est optimisée pour l’environnement TV (visualisation à 3 mètres) et que l’utilisateur peut facilement accéder à tous les éléments interactifs.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. Une solution courante consiste à placer des éléments d’interface utilisateur imbriqués dans un ContextFlyout .One common solution is to place nested UI elements in a ContextFlyout.

Pour plus d’informations sur l’interface utilisateur imbriquée, voir Interface utilisateur imbriquée dans des éléments de liste.For more information on nested UI, see Nested UI in list items.

MediaTransportControlsMediaTransportControls

L’élément MediaTransportControls permet aux utilisateurs d’interagir avec leur média en fournissant une expérience de lecture par défaut grâce à laquelle ils peuvent lire le contenu, le mettre en pause, activer les sous-titres, etc.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. Ce contrôle est une propriété de l’objet MediaPlayerElement et prend en charge deux options de disposition : sur une ligne et sur deux lignes.This control is a property of MediaPlayerElement and supports two layout options: single-row and double-row. Dans la disposition sur une ligne, le curseur et les boutons de lecture se trouvent tous sur une même ligne, le bouton lecture/pause étant situé à gauche du curseur.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. Dans la disposition sur deux lignes, le curseur occupe sa propre ligne, les boutons de lecture se trouvant sur une ligne distincte en dessous.In the double-row layout, the slider occupies its own row, with the playback buttons on a separate lower row. Lors de la conception pour l’expérience « 10-foot », la disposition sur deux lignes doit être utilisée, car elle assure une meilleure navigation avec une manette de jeu.When designing for the 10-foot experience, the double-row layout should be used, as it provides better navigation for gamepad. Pour activer la disposition sur deux lignes, définissez IsCompact="False" pour l’élément MediaTransportControls dans la propriété TransportControls de la MediaPlayerElement.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>

Pour en savoir plus sur l’ajout de médias à votre application, consultez l’article Lecteur multimédia.Visit Media playback to learn more about adding media to your app.

![REMARQUE] L’objet MediaPlayerElement est uniquement disponible dans Windows 10, version 1607 et ultérieure.![NOTE] MediaPlayerElement is only available in Windows 10, version 1607 and later. Si vous développez une application pour une version antérieure de Windows 10, vous devez utiliser l’objet MediaElement à la place.If you're developing an app for an earlier version of Windows 10, you'll need to use MediaElement instead. Les recommandations ci-dessus s’appliquent également à l’objet MediaElement et la propriété TransportControls est accessible de la même manière.The recommendations above apply to MediaElement as well, and the TransportControls property is accessed in the same way.

Expérience de rechercheSearch experience

La recherche de contenu est l’une des fonctions les plus fréquemment exécutées dans le cadre d’une expérience « 10-foot ».Searching for content is one of the most commonly performed functions in the 10-foot experience. Si votre application offre une fonction de recherche, l’utilisateur doit pouvoir y accéder rapidement en utilisant le bouton accélérateur Y sur le boîtier de commande.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.

La plupart des clients connaissent probablement cet accélérateur. Toutefois, si vous le souhaitez, vous pouvez ajouter un glyphe visuel Y dans l’interface utilisateur afin d’indiquer que le client peut utiliser le bouton pour accéder à la fonctionnalité de recherche.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. Si vous ajoutez cet indicateur, veillez à utiliser le symbole de la police Segoe Xbox Symbol MDL2 (&#xE3CC; pour les applications XAML, \E426 pour les applications HTML) pour fournir une expérience cohérente avec l’interpréteur de commandes Xbox et d’autres applications.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.

Notes

Comme la police Segoe Xbox MDL2 Symbol n’est disponible que sur Xbox, le symbole ne s’affiche pas correctement sur votre PC.Because the Segoe Xbox MDL2 Symbol font is only available on Xbox, the symbol won't appear correctly on your PC. Mais, il apparaîtra sur le téléviseur lorsque vous le déploierez sur Xbox.However, it will show up on the TV once you deploy to Xbox.

Dans la mesure où le bouton Y n’est disponible que sur le boîtier de commande, veillez à fournir d’autres méthodes d’accès à la recherche, comme des boutons dans l’interface utilisateur.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. Sinon, certains clients risquent de ne pas pouvoir accéder à la fonctionnalité.Otherwise, some customers may not be able to access the functionality.

Dans l’expérience « 10-foot », il est souvent plus facile pour les clients d’utiliser une fonction de recherche en mode plein écran, car l’espace disponible sur l’écran est limité.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. En mode plein écran ou écran partiel, il est préférable que le clavier visuel affiché soit déjà ouvert lorsque l’utilisateur sélectionne la fonction de recherche. Ainsi il peut immédiatement saisir les termes de sa recherche.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.

Déclencheur d’état visuel personnalisé pour XboxCustom visual state trigger for Xbox

Pour personnaliser votre application UWP pour l’expérience « 10-foot », nous vous recommandons d’effectuer des modifications de disposition lorsque l’application détecte son lancement sur une console Xbox.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. L’une des méthodes utilisées pour cette fin est le déclencheur d’état visuel personnalisé.One way to do this is by using a custom visual state trigger. Les déclencheurs d’état visuel sont particulièrement utiles lorsque vous souhaitez apporter des modifications dans Blend pour Visual Studio.Visual state triggers are most useful when you want to edit in Blend for Visual Studio. L’extrait de code suivant montre comment créer un déclencheur d’état visuel pour Xbox :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>

Pour créer le déclencheur, ajoutez la classe suivante à votre application.To create the trigger, add the following class to your app. Il s’agit de la classe référencée par le code XAML précédemment :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);
        }
    }
}

Une fois que vous ajoutez votre déclencheur personnalisé, votre application effectuera automatiquement les modifications de disposition spécifiées dans votre code XAML à chaque fois qu’elle détecte son exécution sur une console Xbox One.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.

Vous pouvez également utiliser du code pour vérifier si votre application s’exécute sur Xbox, puis effectuer les ajustements appropriés.Another way you can check whether your app is running on Xbox and then make the appropriate adjustments is through code. Vous pouvez utiliser la variable simple suivante pour vérifier si votre application s’exécute sur Xbox :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");

Après avoir effectué cette vérification, vous pouvez effectuer les réglages appropriés de votre interface utilisateur dans le bloc de code.Then, you can make the appropriate adjustments to your UI in the code block following this check.

RésuméSummary

La conception pour l’expérience « 10-foot » implique de prendre en compte des points spéciaux qui la distinguent de la conception pour toute autre plateforme.Designing for the 10-foot experience has special considerations to take into account that make it different from designing for any other platform. Si vous pouvez certainement transférer directement votre application UWP vers Xbox One avec succès, cette application n’est pas nécessairement optimisée pour l’expérience « 10-foot », ce qui peut générer de la frustration chez l’utilisateur.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. Suivez les recommandations contenues dans cet article pour vous assurer que votre application fonctionne aussi bien que possible sur TV.Following the guidelines in this article will make sure that your app is as good as it can be on TV.