Progettazione per Xbox e TVDesigning for Xbox and TV

Progettare l'app di Windows in modo che risulti efficace e funzioni correttamente su Xbox One e schermi televisivi.Design your Windows app so that it looks good and functions well on Xbox One and television screens.

Vedere le interazioni di gamepad e controllo remoto per informazioni sulle esperienze di interazione nelle applicazioni UWP nell'esperienza a 10 piedi .See Gamepad and remote control interactions for guidance on interaction experiences in UWP applications in the 10-foot experience.

PanoramicaOverview

La piattaforma UWP ti consente di creare esperienze piacevoli su più dispositivi Windows 10.The Universal Windows Platform lets you create delightful experiences across multiple Windows 10 devices. La maggior parte delle funzionalità offerte dal framework UWP consente alle app di usare la stessa interfaccia utente nei diversi dispositivi, senza interventi aggiuntivi.Most of the functionality provided by the UWP framework enables apps to use the same user interface (UI) across these devices, without additional work. Per personalizzare e ottimizzare l'app in modo che funzioni correttamente su Xbox One e sullo schermo del televisore, devi tenere presenti alcune considerazioni particolari.However, tailoring and optimizing your app to work great on Xbox One and TV screens requires special considerations.

Quando un utente sta comodamente seduto sul proprio divano e usa un game pad o un telecomando per interagire con il televisore,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. si trova in genere a una distanza di circa 3 metri dallo schermo.It is so named because the user is generally sitting approximately 10 feet away from the screen. Questa modalità di interazione presenta problemi specifici che non si riscontrano quando la distanza dallo schermo è di circa mezzo metro, ovvero quando si interagisce con un PC.This provides unique challenges that aren't present in, say, the 2-foot experience, or interacting with a PC. Se stai sviluppando un'app per Xbox One o per qualsiasi altro dispositivo che esegue l'output sullo schermo del televisore e usa un controller per l'input, tieni sempre presente questa considerazione.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.

Non tutti i passaggi descritti in questo articolo sono necessari per fare in modo che la tua app funzioni correttamente nelle esperienze di interazione da 3 metri, ma è importante comprenderli ed effettuare le scelte appropriate per offrire una migliore esperienza di interazione da 3 metri, personalizzata in base alle esigenze specifiche della tua app.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. Per realizzare un'app adatta a un'esperienza di interazione da 3 metri, tieni in considerazione i principi di progettazione presentati nelle sezioni seguenti.As you bring your app to life in the 10-foot environment, consider the following design principles.

SempliceSimple

La progettazione per ambienti che prevedono un'esperienza di interazione da 3 metri presenta una serie di problemi specifici.Designing for the 10-foot environment presents a unique set of challenges. A causa della risoluzione e della distanza di visualizzazione, le persone possono incontrare difficoltà a elaborare un numero eccessivo di informazioni.Resolution and viewing distance can make it difficult for people to process too much information. Cerca di progettare l'app con un design semplice, riducendo al massimo i componenti.Try to keep your design clean, reduced to the simplest possible components. La quantità di informazioni visualizzate su un televisore deve essere paragonabile a quella di un cellulare e non a quella di un 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.

Schermata Home di Xbox One

CoerenzaCoherent

Negli ambienti che prevedono un'esperienza di interazione da 3 metri, le app UWP devono essere intuitive e facili da usare.UWP apps in the 10-foot environment should be intuitive and easy to use. Gli elementi con stato attivo devono essere evidenti e ben riconoscibili.Make the focus clear and unmistakable. Disponi il contenuto in modo che il movimento nello spazio sia coerente e prevedibile.Arrange content so that movement across the space is consistent and predictable. Consenti all'utente di eseguire le operazioni tramite il percorso più breve possibile.Give people the shortest path to what they want to do.

App Film di Xbox One

Tutti i film mostrati nello screenshot sono disponibili nei film Microsoft & TV.All movies shown in the screenshot are available on Microsoft Movies & TV.

CoinvolgimentoCaptivating

Le esperienze cinematografiche più coinvolgenti avvengono sul grande schermo.The most immersive, cinematic experiences take place on the big screen. Le immagini senza bordi, il movimento elegante e l'uso efficace di colori e tipografia consentono all'app di fare un salto di qualità.Edge-to-edge scenery, elegant motion, and vibrant use of color and typography take your apps to the next level. Crea un'app che unisca intensità e bellezza.Be bold and beautiful.

App Avatar di Xbox One

Ottimizzazioni per l'esperienza di interazione da 3 metriOptimizations for the 10-foot experience

Ora che conosci i principi di base per progettare correttamente un'app UWP per l'esperienza di interazione da 3 metri, leggi la panoramica seguente che presenta soluzioni specifiche per ottimizzare l'app e offrire un'eccellente esperienza utente.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.

FunzionalitàFeature DescrizioneDescription
Ridimensionamento degli elementi dell'interfaccia utenteUI element sizing La piattaforma UWP usa un fattore di scala e i pixel effettivi per ridimensionare l'interfaccia utente in base alla distanza di visualizzazione.The Universal Windows Platform uses scaling and effective pixels to scale the UI according to the viewing distance. Se tieni presente il concetto di ridimensionamento e lo applichi all'interfaccia utente, potrai ottimizzare l'app per gli ambienti che prevedono un'esperienza di interazione da 3 metri.Understanding sizing and applying it across your UI will help optimize your app for the 10-foot environment.
Area sicura della TVTV-safe area Per impostazione predefinita, la piattaforma UWP evita automaticamente di visualizzare elementi dell'interfaccia utente in aree non sicure, vicino ai bordi dello schermo.The UWP will automatically avoid displaying any UI in TV-unsafe areas (areas close to the edges of the screen) by default. Questa caratteristica crea tuttavia un effetto "inquadrato" in cui l'area dell'interfaccia utente appare ridotta.However, this creates a "boxed-in" effect in which the UI looks letterboxed. Per offrire immagini davvero coinvolgenti sullo schermo del televisore, ti consigliamo di modificare l'app in modo che si estenda fino ai bordi dello schermo sui televisori che supportano questa funzionalità.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.
ColoriColors La piattaforma UWP supporta i temi colori e le app che rispettano il tema del sistema per impostazione predefinita useranno il tema scuro su Xbox One.The UWP supports color themes, and an app that respects the system theme will default to dark on Xbox One. Se la tua app ha un tema colori specifico, tieni presente che alcuni colori non vengono visualizzati correttamente sul televisore e devono essere evitati.If your app has a specific color theme, you should consider that some colors don't work well for TV and should be avoided.
SuoniSound L'audio ha un ruolo fondamentale nell'esperienza di interazione da 3 metri e contribuisce al coinvolgimento e al feedback dell'utente.Sounds play a key role in the 10-foot experience, helping to immerse and give feedback to the user. La piattaforma UWP offre funzionalità che attivano automaticamente l'audio per i controlli comuni quando l'app è in esecuzione in Xbox One.The UWP provides functionality that automatically turns on sounds for common controls when the app is running on Xbox One. Scopri di più sul supporto dell'audio predefinito della piattaforma UWP e sui relativi vantaggi.Find out more about the sound support built into the UWP and learn how to take advantage of it.
Linee guida per i controlli dell'interfaccia utenteGuidelines for UI controls Esistono controlli dell'interfaccia utente che funzionano correttamente in diversi dispositivi, ma che richiedono alcune considerazioni se usati su un televisore.There are several UI controls that work well across multiple devices, but have certain considerations when used on TV. Scopri di più sulle procedure consigliate per l'uso di questi controlli durante la progettazione dell'esperienza di interazione da 3 metri.Read about some best practices for using these controls when designing for the 10-foot experience.
Trigger dello stato di visualizzazione personalizzato per XboxCustom visual state trigger for Xbox Per personalizzare l'app UWP per l'esperienza di interazione da 3 metri, ti consigliamo di usare un trigger dello stato di visualizzazione personalizzato per apportare modifiche al layout quando l'app rileva di essere stata avviata in una 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.

Oltre alle considerazioni di progettazione e layout precedenti, è necessario prendere in considerazione diverse ottimizzazioni delle interazioni di controllo remoto e di gamepad quando si compila l'app.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.

FunzionalitàFeature DescrizioneDescription
Interazione e spostamento con stato attivo XYXY focus navigation and interaction Spostamento dello stato attivo XY consente all'utente di spostarsi all'interno dell'interfaccia utente dell'app.XY focus navigation enables the user to navigate around your app's UI. In questo modo, gli spostamenti dell'utente sono tuttavia limitati a movimenti verso l'alto, il basso, sinistra e destra.However, this limits the user to navigating up, down, left, and right. In questa sezione sono disponibili alcuni consigli per risolvere questo e altri problemi.Recommendations for dealing with this and other considerations are outlined in this section.
Modalità mouseMouse mode La navigazione dello stato attivo XY non è praticabile, né possibile, per alcuni tipi di applicazioni, ad esempio mappe, disegno e disegno di app.XY focus navigation isn't practical, or even possible, for some types of applications, such as maps or drawing and painting apps. In questi casi, la modalità mouse consente agli utenti di spostarsi liberamente con un gamepad o un controllo remoto, proprio come un mouse su un PC.In these cases, mouse mode lets users navigate freely with a gamepad or remote control, just like a mouse on a PC.
Indicatore visivo dello stato attivoFocus visual L'oggetto visivo dello stato attivo è un bordo che evidenzia l'elemento dell'interfaccia utente attualmente attivo.The focus visual is a border that highlights the currently focused UI element. Questo consente all'utente di identificare rapidamente l'interfaccia utente che sta passando attraverso o che interagisce con.This helps the user quickly identify the UI they are navigating through or interacting with.
Attivazione dello stato attivoFocus engagement Engagement Focus richiede all'utente di premere il pulsante a/Select in un gamepad o un controllo remoto quando un elemento dell'interfaccia utente ha lo stato attivo per interagire con esso.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.
Pulsanti hardwareHardware buttons Il gamepad e il controllo remoto forniscono pulsanti e configurazioni molto diversi.The gamepad and remote control provide very different buttons and configurations.

Nota

La maggior parte dei frammenti di codice in questo argomento è in XAML/C#, ma i principi e i concetti sono validi per tutte le app UWP.Most of the code snippets in this topic are in XAML/C#; however, the principles and concepts apply to all UWP apps. Se sviluppi un'app UWP HTML/JavaScript per Xbox, fai riferimento all'eccellente libreria TVHelpers su GitHub.If you're developing an HTML/JavaScript UWP app for Xbox, check out the excellent TVHelpers library on GitHub.

Ridimensionamento degli elementi dell'interfaccia utenteUI element sizing

Poiché l'utente di un'app realizzata per un'esperienza di interazione da 3 metri usa un telecomando o un game pad e si trova ad alcuni metri dallo schermo, durante la progettazione devi tenere presenti alcune considerazioni sull'interfaccia utente.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. Assicurati che l'interfaccia utente abbia una densità di contenuto appropriata e che non sia troppo piena, in modo che l'utente possa facilmente spostarsi e selezionare gli elementi.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. Ricorda: la semplicità è fondamentale.Remember: simplicity is key.

Fattore di scala e layout adattivoScale factor and adaptive layout

Il fattore di scala garantisce che gli elementi dell'interfaccia utente vengano visualizzati con il ridimensionamento appropriato per il dispositivo in cui l'app è in esecuzione.Scale factor helps with ensuring that UI elements are displayed with the right sizing for the device on which the app is running. Sul desktop questa impostazione si trova in Impostazioni > Sistema > Schermo come valore di scorrimento.On desktop, this setting can be found in Settings > System > Display as a sliding value. La stessa impostazione è presente anche nei telefoni, se il dispositivo la supporta.This same setting exists on phone as well if the device supports it.

Cambia le dimensioni di testo, app e altri elementi

In Xbox One non esiste un'impostazione di sistema simile. Tuttavia, per un ridimensionamento appropriato per il televisore, gli elementi dell'interfaccia utente UWP vengono ridimensionati in base ai valori 200% e 150%, ovvero i valori predefiniti rispettivamente per le app XAML e per le app 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. Se gli elementi dell'interfaccia utente sono ridimensionati in modo appropriato per altri dispositivi, avranno dimensioni adatte per il televisore.As long as UI elements are appropriately sized for other devices, they will be appropriately sized for TV. Xbox One esegue il rendering dell'app a 1080p (1920 x 1080 pixel).Xbox One renders your app at 1080p (1920 x 1080 pixels). Di conseguenza, quando importi un'app da altri dispositivi, ad esempio un PC, assicurati che l'interfaccia utente venga visualizzata correttamente a 960 x 540 pixel con scala al 100% (o a 1280 x 720 pixel con scala al 100% per le app HTML) tramite tecniche adattive.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 progettazione per Xbox è leggermente diversa dalla progettazione per PC, perché è sufficiente prendere in considerazione solo una risoluzione, 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. Non è importante se l'utente dispone di un televisore con una risoluzione migliore — per le app UWP che si adattano sempre a 1080p.It doesn't matter if the user has a TV that has better resolution—UWP apps will always scale to 1080p.

Quando l'app viene eseguita in Xbox One, verranno anche inserite le dimensioni corrette degli asset dal set al 200% (o al 150% per le app HTML), indipendentemente dalla risoluzione del televisore.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à del contenutoContent density

Mentre progetti l'app, tieni presente che l'utente visualizzerà l'interfaccia da una certa distanza e interagirà con essa tramite un telecomando o una periferica di gioco, pertanto lo spostamento sarà più lento rispetto all'input tramite mouse o tocco.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.

Dimensioni dei controlli dell'interfaccia utenteSizes of UI controls

Gli elementi interattivi dell'interfaccia utente devono avere un'altezza minima di 32 epx (pixel effettivi).Interactive UI elements should be sized at a minimum height of 32 epx (effective pixels). Questo è il valore predefinito per i controlli UWP comuni e, se usato con una scala al 200%, garantisce che gli elementi dell'interfaccia utente siano visibili da una certa distanza e consente di ridurre la densità del contenuto.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.

Pulsante UWP con scala al 100% e al 200%

Numero di clicNumber of clicks

Per semplificare l'interfaccia utente, lo spostamento da un bordo all'altro dello schermo del televisore non deve richiedere più di sei clic.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. Anche in questo caso si applica il principio della semplicità.Again, the principle of simplicity applies here.

6 icone in orizzontale

Dimensioni del testoText sizes

Per rendere visibile l'interfaccia utente da una certa distanza, segui la regola generale seguente:To make your UI visible from a distance, use the following rules of thumb:

  • Testo principale e contenuto di lettura: minimo 15 epxMain text and reading content: 15 epx minimum
  • Testo non critico e contenuto supplementare: minimo 12 epxNon-critical text and supplemental content: 12 epx minimum

Se usi un testo più grande nell'interfaccia utente, seleziona una dimensione che non limiti troppo la superficie dello schermo, occupando lo spazio che potenzialmente può essere usato per altri contenuti.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.

Rifiuto esplicito del fattore di scalaOpting out of scale factor

Ti consigliamo di consentire all'app di sfruttare il supporto del fattore di scala per la corretta esecuzione su tutti i dispositivi. In questo modo, infatti, viene applicato un fattore di scala specifico per ogni tipo di dispositivo.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. Questo comportamento può comunque essere evitato progettando l'intera interfaccia utente con una scala al 100%.However, it is possible to opt out of this behavior and design all of your UI at 100% scale. Tieni presente che l'unica impostazione possibile per il fattore di scala è 100%.Note that you cannot change the scale factor to anything other than 100%.

Per le app XAML, puoi rifiutare esplicitamente l'uso del fattore di scala tramite il frammento di codice seguente: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 indicherà se è stato scelto correttamente.result will inform you whether you successfully opted out.

Per altre informazioni, incluso il codice di esempio per HTML/JavaScript, vedi Come disattivare il ridimensionamento.For more information, including sample code for HTML/JavaScript, see How to turn off scaling.

Assicurati di calcolare in modo appropriato le dimensioni degli elementi dell'interfaccia utente raddoppiando i valori dei pixel effettivi indicati in questo argomento in valori di pixel reali (o moltiplicandoli per 1,5 per le app 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).

Area sicura della TVTV-safe area

Non tutti i televisori consentono di visualizzare il contenuto fino ai bordi dello schermo per motivi storici e tecnologici.Not all TVs display content all the way to the edges of the screen due to historical and technological reasons. Per impostazione predefinita, la piattaforma UWP eviterà di visualizzare il contenuto dell'interfaccia utente in aree non sicure della TV e si limiterà a trascinare solo lo sfondo della pagina.By default, the UWP will avoid displaying any UI content in TV-unsafe areas and instead will only draw the page background.

L'area non sicura della TV è rappresentata dall'area blu nell'immagine seguente.The TV-unsafe area is represented by the blue area in the following image.

Area non sicura della TV

Puoi impostare lo sfondo su un colore statico o su un colore con tema oppure su un'immagine, come illustrato dai frammenti di codice seguenti.You can set the background to a static or themed color, or to an image, as the following code snippets demonstrate.

Colore temaTheme color

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

ImmagineImage

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

Questo sarà l'aspetto dell'app senza interventi aggiuntivi.This is what your app will look like without additional work.

Area sicura della TV

Questo aspetto non è ottimale in quanto conferisce all'app un effetto "inquadrato" e alcune parti dell'interfaccia utente, ad esempio la griglia e il riquadro di spostamento, appaiono troncate.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. Puoi apportare ottimizzazioni per estendere parti dell'interfaccia utente fino ai bordi dello schermo e conferire all'app un effetto più panoramico.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.

Trascinamento dell'interfaccia utente verso i bordiDrawing UI to the edge

Ti consigliamo di usare alcuni elementi dell'interfaccia utente da estendere fino ai bordi dello schermo per offrire all'utente un maggiore coinvolgimento.We recommend that you use certain UI elements to extend to the edges of the screen to provide more immersion to the user. Questi elementi includono elementi ScrollViewer, riquadri di spostamento e CommandBar.These include ScrollViewers, nav panes, and CommandBars.

D'altro canto, è importante anche evitare che gli elementi interattivi e il testo si trovino vicino ai bordi dello schermo per garantire che non risultino troncati su alcuni televisori.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. Ti consigliamo di trascinare nel 5% di spazio dai bordi dello schermo solo elementi visivi non essenziali.We recommend that you draw only non-essential visuals within 5% of the screen edges. Come illustrato in Ridimensionamento degli elementi dell'interfaccia utente, le app UWP che seguono il fattore di scala predefinito del 200% per la console Xbox One useranno un'area di 960 x 540 epx, pertanto evita di inserire nell'interfaccia utente della tua app elementi essenziali nelle seguenti aree: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:

  • a 27 epx dai bordi superiore e inferiore27 epx from the top and bottom
  • a 48 epx dai lati sinistro e destro48 epx from the left and right sides

Le sezioni seguenti descrivono come estendere l'interfaccia utente fino ai bordi dello schermo.The following sections describe how to make your UI extend to the screen edges.

Limiti di base delle finestreCore window bounds

Per le app UWP destinate solo all'esperienza di interazione da 3 metri, l'uso dei limiti di base delle finestre costituisce l'opzione più semplice.For UWP apps targeting only the 10-foot experience, using core window bounds is a more straightforward option.

Nel metodo OnLaunched di App.xaml.cs aggiungi il codice seguente:In the OnLaunched method of App.xaml.cs, add the following code:

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

Con questa riga di codice la finestra dell'app si estenderà fino i bordi dello schermo, pertanto dovrai spostare tutti gli elementi interattivi ed essenziali dell'interfaccia utente nell'area sicura della TV descritta in precedenza.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. Gli elementi temporanei dell'interfaccia utente, ad esempio menu di scelta rapida ed elementi ComboBox aperti, resteranno automaticamente all'interno dell'area sicura della TV.Transient UI, such as context menus and opened ComboBoxes, will automatically remain inside the TV-safe area.

Limiti di base delle finestre

Sfondi dei riquadriPane backgrounds

I riquadri di spostamento in genere vengono trascinati vicino ai bordi dello schermo, in modo che lo sfondo si estenda fino all'area non sicura della TV per evitare che siano presenti fastidiose interruzioni.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. Per farlo, devi solo sostituire il colore di sfondo del riquadro di spostamento con il colore di sfondo dell'app.You can do this by simply changing the color of the nav pane's background to the color of the app's background.

L'uso dei limiti di base delle finestre come descritto prima ti consentirà di disegnare la tua interfaccia utente fino i bordi dello schermo, ma poi ti consigliamo di usare margini positivi nel contenuto di SplitView in modo che rimanga all'interno dell'area sicura della 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.

Riquadro di spostamento esteso fino ai bordi dello schermo

In questo caso, lo sfondo del riquadro di spostamento è stato esteso fino ai bordi dello schermo, mentre i relativi elementi di spostamento sono rimasti nell'area sicura della 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. Il contenuto del controllo SplitView, in questo caso, una griglia di elementi, è stato esteso fino alla parte inferiore dello schermo in modo che appaia continuo e non risulti troncato, mentre la parte superiore della griglia è rimasta all'interno dell'area sicura della 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. Scopri di più su come eseguire questa operazione in Estremità di scorrimento di elenchi e griglie.(Learn more about how to do this in Scrolling ends of lists and grids).

Il frammento di codice seguente illustra come è stato ottenuto questo effetto: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>

L'oggetto CommandBar costituisce un altro esempio di riquadro che in genere è posizionato vicino a uno o più bordi dell'app e pertanto il relativo sfondo deve estendersi fino ai bordi dello schermo del televisore.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 genere include anche un pulsante Altro, rappresentato da "..." sul lato destro, che deve rimanere nell'area sicura della TV.It also usually contains a More button, represented by "..." on the right side, which should remain in the TV-safe area. Di seguito sono riportate alcune strategie per ottenere le interazioni e gli effetti visivi desiderati.The following are a few different strategies to achieve the desired interactions and visual effects.

Opzione 1: impostare il colore dello sfondo dell'oggetto CommandBar su trasparente o sullo stesso colore dello sfondo della pagina: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>

In questo modo, l'aspetto dell'oggetto CommandBar sarà lo stesso nella parte superiore dello sfondo e nel resto della pagina, pertanto lo sfondo si estenderà senza interruzioni fino ai bordi dello schermo.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.

Opzione 2: aggiungere un rettangolo di sfondo il cui riempimento sia dello stesso colore dello sfondo dell'oggetto CommandBar e posizionarlo sotto CommandBar nel resto della pagina: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>

Nota

Se usi questo approccio, tieni presente che, se necessario, il pulsante Altro modifica l'altezza dell'oggetto CommandBar aperto in modo da visualizzare le etichette degli elementi AppBarButton sotto le relative icone.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. Ti consigliamo di spostare le etichette alla destra delle relative icone per evitare questo ridimensionamento.We recommend that you move the labels to the right of their icons to avoid this resizing. Per altre informazioni, vedi Etichette di CommandBar.For more information, see CommandBar labels.

Questi approcci si applicano entrambi anche agli altri tipi di controlli elencati in questa sezione.Both of these approaches also apply to the other types of controls listed in this section.

Estremità di scorrimento di elenchi e griglieScrolling ends of lists and grids

Spesso elenchi e griglie possono contenere più elementi di quanti possa contenerne lo schermo.It's common for lists and grids to contain more items than can fit onscreen at the same time. In questo caso, ti consigliamo di estendere l'elenco o la griglia fino ai bordi dello schermo.When this is the case, we recommend that you extend the list or grid to the edge of the screen. Le griglie e gli elenchi con scorrimento orizzontale devono essere estesi verso il bordo destro e quelli con scorrimento verticale verso il basso.Horizontally scrolling lists and grids should extend to the right edge, and vertically scrolling ones should extend to the bottom.

Troncamento della griglia nell'area sicura della TV

Questo è il modo per estendere un elenco o una griglia. Tuttavia, è importante mantenere l'indicatore visivo dello stato attivo e l'elemento a esso associato all'interno dell'area sicura della 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.

Lo stato attivo della griglia di scorrimento deve essere mantenuto nell'area sicura della TV

La piattaforma UWP include una funzionalità che mantiene l'indicatore visivo dello stato attivo all'interno dei VisibleBound, ma può essere opportuno aggiungere una spaziatura interna per assicurare che gli elementi dell'elenco o della griglia possano essere visualizzati nell'area sicura.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. Nello specifico, aggiungi un margine positivo all'oggetto ItemsPresenter di ListView o GridView, come nel frammento di codice seguente: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>

Inserisci il frammento di codice precedente nelle risorse della pagina o dell'app e quindi accedi nel modo seguente: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}"
                  ... />

Nota

Questo frammento di codice è progettato specificatamente per gli elementi ListView. Per lo stile di un oggetto GridView, imposta l'attributo TargetType per ControlTemplate e Style su 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.

Per un controllo più accurato sulla modalità di visualizzazione degli elementi, se l'applicazione è destinata alla versione 1803 o successiva, è possibile usare l' Evento 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. È possibile inserirlo in ItemsPanel per ListView / GridView per intercettarlo prima che venga eseguita l'operazione ScrollViewer interna, come nei frammenti di codice seguenti: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
        });
    }
}

ColoriColors

Per impostazione predefinita, il piattaforma UWP (Universal Windows Platform) consente di ridimensionare i colori dell'app nell'intervallo di sicurezza della TV (per altre informazioni, vedere colori TV-Safe ), in modo che l'app appaia corretta su qualsiasi 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. Sono inoltre disponibili miglioramenti che è possibile apportare al set di colori usato dall'app per migliorare l'esperienza visiva in TV.In addition, there are improvements that you can make to the set of colors your app uses to improve the visual experience on TV.

Tema dell'applicazioneApplication theme

Puoi scegliere un tema dell'applicazione (scuro o chiaro) adatto alla tua app oppure rifiutare esplicitamente i temi.You can choose an Application theme (dark or light) according to what is right for your app, or you can opt out of theming. Per indicazioni generali sui temi, vedi Temi colori.Read more about general recommendations for themes in Color themes.

La piattaforma UWP consente anche alle app di impostare dinamicamente il tema in base alle impostazioni di sistema specificate dai dispositivi in cui vengono eseguite.The UWP also allows apps to dynamically set the theme based on the system settings provided by the devices on which they run. Anche se la piattaforma UWP rispetta sempre le impostazioni del tema specificate dall'utente, ogni dispositivo include anche un tema predefinito appropriato.While the UWP always respects the theme settings specified by the user, each device also provides an appropriate default theme. Per la natura stessa di Xbox One, pensata più per esperienze multimediali che per esigenze di produttività, il tema di sistema predefinito è quello scuro.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. Se il tema della tua app si basa sulle impostazioni di sistema, verrà automaticamente impostato sul tema scuro su Xbox One.If your app's theme is based on the system settings, expect it to default to dark on Xbox One.

Colore principaleAccent color

La piattaforma UWP offre un modo pratico per esporre il colore principale selezionato dall'utente dalle impostazioni di sistema.The UWP provides a convenient way to expose the accent color that the user has selected from their system settings.

Su Xbox One l'utente è in grado di selezionare un colore utente, esattamente come si seleziona un colore principale in 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. Se l'app chiama i colori principali tramite pennelli o altre risorse colore, verrà usato il colore selezionato dall'utente nelle impostazioni di sistema.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. Tieni presente che i colori principali su Xbox One si intendono per l'utente e non per sistema.Note that accent colors on Xbox One are per user, not per system.

Considera inoltre che il set di colori utente su Xbox One non è identico a quello presente nei PC, nei telefoni e in altri dispositivi.Please also note that the set of user colors on Xbox One is not the same as that on PCs, phones, and other devices.

Fino a quando l'app usa una risorsa pennello, ad esempio SystemControlForegroundAccentBrush, o una risorsa di colore (SystemAccentColor), o chiama invece i colori accentati direttamente tramite l'API UIColorType. Accent * , questi colori vengono sostituiti con i colori accentati disponibili su 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. I colori dei pennelli a contrasto elevato vengono inoltre estratti dal sistema allo stesso modo di un PC e di un telefono.High contrast brush colors are also pulled in from the system the same way as on a PC and phone.

Per altre informazioni generali sui colori principali, vedi Colori principali.To learn more about accent color in general, see Accent color.

Variazione dei colori tra diversi televisoriColor variance among TVs

Durante la progettazione per la TV, tieni presente che i colori vengono visualizzati in modo molto diverso a seconda del televisore.When designing for TV, note that colors display quite differently depending on the TV on which they are rendered. Non dare per scontato che l'aspetto dei colori sia esattamente uguale a quello visualizzato sul tuo monitor.Don't assume colors will look exactly as they do on your monitor. Se l'app si basa su minime differenze di colore per distinguere le parti dell'interfaccia utente, i colori potrebbero fondersi, confondendo gli utenti.If your app relies on subtle differences in color to differentiate parts of the UI, colors could blend together and users could get confused. Prova a usare colori diversi, in modo che gli utenti siano in grado di distinguerli chiaramente, indipendentemente dal loro televisore.Try to use colors that are different enough that users will be able to clearly differentiate them, regardless of the TV they are using.

Colori sicuri per la TVTV-safe colors

I valori RGB di un colore rappresentano le intensità di rosso, verde e blu.A color's RGB values represent intensities for red, green, and blue. I televisori non gestiscono un'intensità molto elevata — , ma possono produrre un effetto a bande dispari o apparire puliti su determinati TV.TVs don't handle extreme intensities very well—they can produce an odd banded effect, or appear washed out on certain TVs. I colori ad alta intensità possono inoltre causare un effetto di scolorimento, in cui i pixel iniziano ad assumere gli stessi colori di quelli vicini.Additionally, high-intensity colors may cause blooming (nearby pixels start drawing the same colors). Anche se esistono diverse scuole di pensiero su quali colori si possano considerare sicuri per la TV, in genere i colori all'interno dei valori RGB 16-235 (o 10-EB in formato esadecimale) possono essere usati senza problemi per la 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.

Intervallo di colori sicuri per la TV

In passato, le app su Xbox dovevano personalizzare i colori per rientrare in questo intervallo di colori "TV-safe"; Tuttavia, a partire da Fall Creators Update, Xbox One scala automaticamente il contenuto dell'intervallo completo nell'intervallo di sicurezza della 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. Ciò significa che la maggior parte degli sviluppatori di app non deve più preoccuparsi dei colori TV-safe.This means that most app developers no longer have to worry about TV-safe colors.

Importante

Per il contenuto video già presente nell'intervallo di colori TV-Safe non è applicato questo effetto di ridimensionamento dei colori quando viene riprodotto con 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.

Se si sta sviluppando un'app usando DirectX 11 o DirectX 12 e creando una catena di scambio personalizzata per eseguire il rendering dell'interfaccia utente o del video, è possibile specificare lo spazio di colore usato chiamando IDXGISwapChain3:: SetColorSpace1, che consentirà al sistema di verificare se è necessario ridimensionare o meno i colori.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.

Linee guida per i controlli dell'interfaccia utenteGuidelines for UI controls

Esistono controlli dell'interfaccia utente che funzionano correttamente in diversi dispositivi, ma che richiedono alcune considerazioni se usati su un televisore.There are several UI controls that work well across multiple devices, but have certain considerations when used on TV. Scopri di più sulle procedure consigliate per l'uso di questi controlli durante la progettazione dell'esperienza di interazione da 3 metri.Read about some best practices for using these controls when designing for the 10-foot experience.

Controllo PivotPivot control

Un controllo Pivot consente di passare rapidamente da una visualizzazione all'altra all'interno di un'app selezionando intestazioni o schede diverse.A Pivot provides quick navigation of views within an app through selecting different headers or tabs. Il controllo sottolinea l'intestazione con lo stato attivo, che rende più facile trovare l'intestazione attualmente selezionata quando si usa il game pad o il telecomando.The control underlines whichever header has focus, making it more obvious which header is currently selected when using gamepad/remote.

Sottolineatura pivot

Puoi impostare la proprietà Pivot.IsHeaderItemsCarouselEnabled su true in modo che i pivot mantengano sempre la stessa posizione, evitando che l'intestazione di pivot selezionata si sposti sempre in prima posizione.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. Questo comportamento offre un'esperienza migliore per gli schermi di grandi dimensioni come quelli dei televisori, perché il ritorno a capo delle intestazioni può distrarre gli utenti.This is a better experience for large-screen displays such as TV, because header wrapping can be distracting to users. Se tutte le intestazioni di pivot non sono contenute simultaneamente all'interno dello schermo, una barra di scorrimento permetterà agli utenti di visualizzare le altre. Tuttavia, per offrire la migliore esperienza, ti consigliamo di fare in modo che siano contenute tutte nello schermo.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. Per altre informazioni, vedi Schede e pivot.For more information, see Tabs and pivots.

Un riquadro di spostamento (noto anche come menu hamburger) è un controllo di spostamento usato comunemente nelle app UWP.A navigation pane (also known as a hamburger menu) is a navigation control commonly used in UWP apps. Di solito è un riquadro con diverse opzioni tra cui scegliere in un menu di stili di elenco che porterà l'utente a pagine diverse.Typically it is a pane with several options to choose from in a list style menu that will take the user to different pages. Solitamente all'avvio questo riquadro è compresso per risparmiare spazio e l'utente può aprirlo facendo clic su un pulsante.Generally this pane starts out collapsed to save space, and the user can open it by clicking on a button.

Mentre i riquadri di spostamento sono molto accessibili con il mouse e il tocco, con il game pad o il telecomando sono meno accessibili perché l'utente deve passare a un pulsante per aprire il riquadro.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. Quindi è consigliabile fare in modo che il pulsante Visualizza apra il riquadro di spostamento e consentire all'utente di aprirlo spostandosi completamente a sinistra della pagina.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. Per un esempio di codice sull'implementazione di questo modello di progettazione, vedere il documento di navigazione con stato attivo a livello di codice.Code sample on how to implement this design pattern can be found in Programmatic focus navigation document. Così l'utente potrà accedere molto facilmente ai contenuti del riquadro.This will provide the user with very easy access to the contents of the pane. Per altre informazioni sul comportamento dei riquadri di spostamento su schermi di dimensioni diverse e per le procedure consigliate per lo spostamento tramite il game pad o il telecomando, vedi Riquadri di spostamento.For more information about how nav panes behave in different screen sizes as well as best practices for gamepad/remote navigation, see Nav panes.

Etichette di CommandBarCommandBar labels

È una buona idea posizionare le etichette a destra delle icone su un oggetto CommandBar in modo che la loro altezza sia ridotta al minimo e siano coerenti.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. A questo scopo, puoi impostare la proprietà CommandBar.DefaultLabelPosition su CommandBarDefaultLabelPosition.Right.You can do this by setting the CommandBar.DefaultLabelPosition property to CommandBarDefaultLabelPosition.Right.

CommandBar con etichette a destra delle icone

Impostando questa proprietà, le etichette verranno sempre visualizzate. Questa funzionalità è ideale per l'esperienza di interazione da 3 metri perché riduce al minimo il numero di clic necessari all'utente.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. Si tratta di un modello ideale da seguire anche per altri tipi di dispositivo.This is also a great model for other device types to follow.

Descrizione comandoTooltip

Il controllo Tooltip è stato introdotto per fornire maggiori informazioni nell'interfaccia utente quando l'utente passa il mouse sopra un elemento oppure lo tocca e lo tiene premuto.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. Per il game pad e il telecomando, l'oggetto Tooltip viene visualizzato brevemente quando l'elemento ha lo stato attivo, rimane sullo schermo per un breve periodo e quindi scompare.For gamepad and remote, Tooltip appears after a brief moment when the element gets focus, stays onscreen for a short time, and then disappears. Questo comportamento potrebbe distrarre l'utente se vengono usati troppi oggetti Tooltip.This behavior could be distracting if too many Tooltips are used. Durante la progettazione per la TV, cerca di evitare l'uso dell'oggetto Tooltip.Try to avoid using Tooltip when designing for TV.

Stili dei pulsantiButton styles

Anche se i pulsanti UWP standard funzionano bene sui televisori, alcuni stili visivi dei pulsanti consentono di richiamare meglio l'attenzione sull'interfaccia utente. Questa caratteristica è utile per tutte le piattaforme, soprattutto nell'esperienza di interazione da 3 metri, in cui è importante comunicare chiaramente la posizione dello stato attivo.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. Per altre informazioni su questi stili, vedi Pulsanti.To read more about these styles, see Buttons.

Elementi dell'interfaccia utente nidificatiNested UI elements

L'interfaccia utente nidificata espone elementi nidificati su cui è possibile eseguire azioni, racchiusi in un elemento contenitore dell'interfaccia utente in cui sia l'elemento nidificato che l'elemento contenitore possono assumere lo stato attivo in modo indipendente.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'interfaccia utente nidificata è ideale per alcuni tipi di input, ma non sempre per il game pad e il telecomando, che si basano sulla navigazione XY.Nested UI works well for some input types, but not always for gamepad and remote, which rely on XY navigation. Segui le indicazioni di questo argomento per essere certo che la tua interfaccia utente sia ottimizzata per gli schermi grandi e che l'utente possa accedere facilmente a tutti gli elementi con cui si può interagire.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. Una soluzione comune consiste nel posizionare elementi dell'interfaccia utente annidati in un oggetto ContextFlyout .One common solution is to place nested UI elements in a ContextFlyout.

Per altre informazioni sull'interfaccia utente nidificata, vedi Interfaccia utente annidata negli elementi di elenco.For more information on nested UI, see Nested UI in list items.

MediaTransportControlsMediaTransportControls

L'elemento MediaTransportControls permette agli utenti di interagire con gli elementi multimediali offrendo un'esperienza di riproduzione predefinita che consente loro di riprodurre, mettere in pausa, attivare sottotitoli e altro ancora.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. Questo controllo è una proprietà di MediaPlayerElement e supporta due opzioni di layout: riga singola e riga doppia.This control is a property of MediaPlayerElement and supports two layout options: single-row and double-row. Nel layout a riga singola il dispositivo di scorrimento e i pulsanti per la riproduzione sono tutti sulla stessa riga, con il pulsante Play/Pausa a sinistra del dispositivo di scorrimento.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. Nel layout a riga doppia il dispositivo di scorrimento ha una riga a sé e i pulsanti per la riproduzione sono su una riga separata più in basso.In the double-row layout, the slider occupies its own row, with the playback buttons on a separate lower row. Quando progetti per l'esperienza di interazione da 3 metri, ti consigliamo di usare il layout a riga doppia che offre una migliore navigazione per il gamepad.When designing for the 10-foot experience, the double-row layout should be used, as it provides better navigation for gamepad. Per abilitare il layout a riga doppia, imposta IsCompact="False" sull'elemento MediaTransportControls nella proprietà TransportControls di 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>

Vedi Riproduzione multimediale per saperne di più sull'aggiunta di elementi multimediali alla tua app.Visit Media playback to learn more about adding media to your app.

![NOTE] MediaPlayerElement è disponibile solo in Windows 10, versione 1607 e successive.![NOTE] MediaPlayerElement is only available in Windows 10, version 1607 and later. Se stai sviluppando un'app per una versione precedente di Windows 10, dovrai usare invece MediaElement.If you're developing an app for an earlier version of Windows 10, you'll need to use MediaElement instead. Il suggerimento sopra si applica anche a MediaElement e la proprietà TransportControls è accessibile nello stesso modo.The recommendations above apply to MediaElement as well, and the TransportControls property is accessed in the same way.

Esperienza di ricercaSearch experience

La ricerca di contenuto è delle funzioni eseguite più di frequente nell'esperienza di interazione da 3 metri.Searching for content is one of the most commonly performed functions in the 10-foot experience. Se la tua app offre un'esperienza di ricerca, per l'utente sarà utile potervi accedere rapidamente usando il pulsante Y del game pad come acceleratore.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.

Anche se la maggior parte dei clienti avrà già familiarità con questo acceleratore, se vuoi, puoi aggiungere un glifo Y visivo all'interfaccia utente per indicare che il cliente può usare il pulsante per accedere alla funzionalità di ricerca.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. Se decidi di aggiungere questa indicazione, assicurati di usare il simbolo del tipo di carattere Segoe Xbox Symbol MDL2 (&#xE3CC; per le app XAML, \E426 per le app HTML) per garantire la coerenza con la shell Xbox e le altre app.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.

Nota

Poiché il tipo di carattere Segoe Xbox MDL2 Symbol è disponibile solo su Xbox, il simbolo non verrà visualizzato correttamente sul PC.Because the Segoe Xbox MDL2 Symbol font is only available on Xbox, the symbol won't appear correctly on your PC. Tuttavia, apparirà sul televisore dopo che avrai distribuito Xbox.However, it will show up on the TV once you deploy to Xbox.

Poiché il pulsante Y è presente solo sul game pad, assicurati di rendere disponibili altri metodi per accedere alla ricerca, ad esempio i pulsanti nell'interfaccia utente,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. altrimenti alcuni clienti non saranno in grado di accedere alla funzionalità.Otherwise, some customers may not be able to access the functionality.

Nell'esperienza di interazione da 3 metri, spesso per i clienti è più facile eseguire la ricerca in modalità a schermo intero perché lo spazio sul display è limitato.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. Che tu abbia una funzione di ricerca "sul posto" in modalità a schermo intero o parziale, quando l'utente apre l'esperienza di ricerca, è meglio se la tastiera su schermo viene visualizzata già aperta, così il cliente potrà immettere subito i termini di ricerca.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.

Trigger dello stato di visualizzazione personalizzato per XboxCustom visual state trigger for Xbox

Per personalizzare l'app UWP per l'esperienza di interazione da 3 metri, ti consigliamo di apportare modifiche al layout quando l'app rileva di essere stata avviata in una 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. Un modo consiste nell'usare un trigger dello stato di visualizzazione personalizzato.One way to do this is by using a custom visual state trigger. I trigger dello stato di visualizzazione sono molto utili quando vuoi apportare modifiche in Blend per Visual Studio.Visual state triggers are most useful when you want to edit in Blend for Visual Studio. Il frammento di codice seguente mostra come creare un trigger dello stato di visualizzazione per 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>

Per creare il trigger, aggiungi la classe seguente alla tua app.To create the trigger, add the following class to your app. Si tratta della classe a cui fa riferimento il codice XAML riportato sopra: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);
        }
    }
}

Dopo aver aggiunto il trigger personalizzato, l'app apporterà automaticamente le modifiche al layout specificate nel codice XAML ogni volta che rileva di essere in esecuzione in una 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.

Un altro modo per controllare se la tua app è in esecuzione su Xbox e poi apportare le modifiche appropriate consiste nell'usare il codice.Another way you can check whether your app is running on Xbox and then make the appropriate adjustments is through code. Puoi usare la variabile semplice seguente per controllare se la tua app è in esecuzione su 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");

Dopo puoi apportare le modifiche appropriate alla tua interfaccia utente nel blocco di codice che segue questo controllo.Then, you can make the appropriate adjustments to your UI in the code block following this check.

RiepilogoSummary

Quando si progetta per l'esperienza di interazione da 3 metri bisogna tenere conto di determinati aspetti che la rendono diversa dalla progettazione per tutte le altre piattaforme.Designing for the 10-foot experience has special considerations to take into account that make it different from designing for any other platform. Anche se puoi eseguire la conversione diretta della tua app UWP a Xbox One senza problemi, questa non sarà necessariamente ottimizzata per l'esperienza di interazione da 3 metri e potrà causare insoddisfazione.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. Segui le linee guida contenute in questo articolo per garantire le migliori prestazioni possibili per la tua app nel televisore.Following the guidelines in this article will make sure that your app is as good as it can be on TV.