Interazioni con game pad e telecomandoGamepad and remote control interactions

immagine della tastiera e del gamepad

Molte esperienze di interazione sono condivise tra i gamepad, il controllo remoto e la tastieraMany interaction experiences are shared between gamepad, remote control, and keyboard

Crea esperienze di interazione nelle tue applicazioni Windows che assicurano che l'app sia utilizzabile e accessibile tramite i tradizionali tipi di input di PC, portatili e Tablet (mouse, tastiera, tocco e così via), nonché i tipi di input tipici dell'esperienza TV e Xbox 10-foot , ad esempio il gamepad e il controllo remoto.Build interaction experiences in your Windows applications that ensure your app is usable and accessible through both the traditional input types of PCs, laptops, and tablets (mouse, keyboard, touch, and so on), as well as the input types typical of the TV and Xbox 10-foot experience, such as the gamepad and remote control.

Vedere la pagina relativa alla progettazione per Xbox e TV per indicazioni generali sulla progettazione di applicazioni Windows nell'esperienza a 10 piedi .See Designing for Xbox and TV for general design guidance on Windows applications in the 10-foot experience.

PanoramicaOverview

In questo argomento vengono illustrate le informazioni che è necessario considerare nella progettazione dell'interazione (o ciò che non è possibile, se la piattaforma viene eseguita per l'utente) e vengono fornite indicazioni, consigli e suggerimenti per la creazione di applicazioni Windows che possono essere usate indipendentemente dal dispositivo, dal tipo di input o dalle funzionalità e dalle preferenze dell'utente.In this topic, we discuss what you should consider in your interaction design (or what you don't, if the platform looks after it for you), and provide guidance, recommendations, and suggestions for building Windows applications that are enjoyable to use regardless of device, input type, or user abilities and preferences.

In fondo, l'applicazione dovrebbe essere intuitiva e facile da usare nell'ambiente a 2 piedi , perché si trova nell'ambiente a 10 piedi (e viceversa).Bottom line, your application should be as intuitive and easy to use in the 2-foot environment as it is in the 10-foot environment (and vice versa). Supportare i dispositivi preferiti dell'utente, rendere l'interfaccia utente chiara e inconfondibile, disporre il contenuto in modo che la navigazione sia coerente e prevedibile e fornire agli utenti il percorso più breve possibile per le attività da eseguire.Support the user's preferred devices, make the UI focus clear and unmistakable, arrange content so navigation is consistent and predictable, and give users the shortest path possible to what they want to do.

Nota

La maggior parte dei frammenti di codice in questo argomento si trova in XAML/C#. Tuttavia, i principi e i concetti si applicano a tutte le app di Windows.Most of the code snippets in this topic are in XAML/C#; however, the principles and concepts apply to all Windows apps. Se si sta sviluppando un'app di Windows HTML/JavaScript per Xbox, vedere la libreria TVHelpers eccellente su GitHub.If you're developing an HTML/JavaScript Windows app for Xbox, check out the excellent TVHelpers library on GitHub.

Ottimizza per le esperienze a 2 e 10 piediOptimize for both 2-foot and 10-foot experiences

Come minimo, è consigliabile testare le applicazioni per assicurarsi che funzionino correttamente negli scenari a 2 e 10 piedi e che tutte le funzionalità siano individuabili e accessibili per Xbox Gamepad e Remote-Control.At a minimum, we recommend that you test your applications to ensure they work well in both 2-foot and 10-foot scenarios, and that all functionality is discoverable and accessible to the Xbox gamepad and remote-control.

Di seguito sono riportati alcuni altri modi in cui è possibile ottimizzare l'app per l'uso in esperienze a 2 e 10 piedi e con tutti i dispositivi di input (ognuno dei collegamenti alla sezione appropriata in questo argomento).Here are some other ways you can optimize your app for use in both 2-foot and 10-foot experiences and with all input devices (each links to the appropriate section in this topic).

Nota

Poiché i gamepad Xbox e i controlli remoti supportano molti comportamenti e esperienze della tastiera Windows, questi consigli sono appropriati per entrambi i tipi di input.Because Xbox gamepads and remote controls support many Windows keyboard behaviors and experiences, these recommendations are appropriate for both input types. Per informazioni più dettagliate sulla tastiera, vedere interazioni con tastiera .See Keyboard interactions for more detailed keyboard info.

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.

Game pad e telecomandoGamepad and remote control

Proprio come la tastiera e il mouse per il PC e la tecnologia touch per i telefoni e i tablet, il game pad e il telecomando sono i dispositivi di input principali per l'esperienza di interazione da 3 metri.Just like keyboard and mouse are for PC, and touch is for phone and tablet, gamepad and remote control are the main input devices for the 10-foot experience. Questa sezione illustra i pulsanti hardware e la loro funzione.This section introduces what the hardware buttons are and what they do. Nelle sezioni Interazione e spostamento con stato attivo XY e Modalità mouse puoi ottenere informazioni su come ottimizzare l'app quando si usano questi dispositivi di input.In XY focus navigation and interaction and Mouse mode, you will learn how to optimize your app when using these input devices.

La qualità del comportamento predefinito del game pad e del telecomando dipende dal livello di supporto per la tastiera presente nell'app.The quality of gamepad and remote behavior that you get out-of-the-box depends on how well keyboard is supported in your app. Una buona soluzione per assicurarsi che l'app funzioni correttamente con il game pad e il telecomando è verificarne il funzionamento con la tastiera del PC e quindi testare il game pad e il telecomando per trovare eventuali punti deboli nell'interfaccia utente.A good way to ensure that your app will work well with gamepad/remote is to make sure that it works well with keyboard on PC, and then test with gamepad/remote to find weak spots in your UI.

Pulsanti hardwareHardware buttons

In questo documento si farà riferimento ai pulsanti usando i nomi riportati nel diagramma seguente.Throughout this document, buttons will be referred to by the names given in the following diagram.

Diagramma dei pulsanti di game pad e telecomando

Come puoi vedere nel diagramma, esistono alcuni pulsanti supportati nel game pad che non sono supportati nel telecomando e viceversa.As you can see from the diagram, there are some buttons that are supported on gamepad that are not supported on remote control, and vice versa. Anche se puoi usare i pulsanti supportati solo in un dispositivo di input per velocizzare lo spostamento nell'interfaccia utente, tieni presente che l'uso di tali pulsanti per le interazioni critiche può impedire all'utente di interagire con alcune parti dell'interfaccia utente.While you can use buttons that are only supported on one input device to make navigating the UI faster, be aware that using them for critical interactions may create a situation where the user is unable to interact with certain parts of the UI.

La tabella seguente elenca tutti i pulsanti hardware supportati dalle app di Windows e il dispositivo di input che li supporta.The following table lists all of the hardware buttons supported by Windows apps, and which input device supports them.

PulsanteButton Game padGamepad Controllo remotoRemote control
Pulsante A/SelezionaA/Select button Yes Yes
Pulsante B/IndietroB/Back button Yes Yes
Tasto direzionale (D-pad)Directional pad (D-pad) Yes Yes
Pulsante MenuMenu button Yes Yes
Pulsante VisualizzaView button Yes Yes
Pulsanti X e YX and Y buttons Yes NoNo
Joystick sinistroLeft stick Yes NoNo
Joystick destroRight stick Yes NoNo
Trigger destro e sinistroLeft and right triggers Yes NoNo
Pulsante dorsale destro e sinistroLeft and right bumpers Yes NoNo
Pulsante OneGuideOneGuide button NoNo Yes
Pulsante VolumeVolume button NoNo Yes
Pulsante CanaleChannel button NoNo Yes
Pulsanti per il controllo multimedialeMedia control buttons NoNo Yes
Pulsante di disattivazione audioMute button NoNo Yes

Supporto per i pulsanti predefinitoBuilt-in button support

UWP esegue automaticamente il mapping del comportamento di input da tastiera esistente a Gamepad e input di controllo remoto.UWP automatically maps existing keyboard input behavior to gamepad and remote control input. Nella tabella seguente sono elencati i mapping predefiniti.The following table lists these built-in mappings.

TastieraKeyboard Game pad/telecomandoGamepad/remote
Tasti di direzioneArrow keys D-pad (o joystick sinistro nel game pad)D-pad (also left stick on gamepad)
BARRA SPAZIATRICESpacebar Pulsante A/SelezionaA/Select button
ImmettereEnter Pulsante A/SelezionaA/Select button
Carattere speciale di escapeEscape Pulsante B/Indietro*B/Back button*

*Quando nessuno degli eventi KeyDown e KeyUp per il pulsante B viene gestito dall'app, viene generato l'evento SystemNavigationManager. backrequestd , che dovrebbe comportare la navigazione all'interno dell'app.*When neither the KeyDown nor KeyUp events for the B button are handled by the app, the SystemNavigationManager.BackRequested event will be fired, which should result in back navigation within the app. Devi però implementarlo manualmente, come nel frammento di codice seguente:However, you have to implement this yourself, as in the following code snippet:

// This code goes in the MainPage class

public MainPage()
{
    this.InitializeComponent();

    // Handling Page Back navigation behaviors
    SystemNavigationManager.GetForCurrentView().BackRequested +=
        SystemNavigationManager_BackRequested;
}

private void SystemNavigationManager_BackRequested(
    object sender,
    BackRequestedEventArgs e)
{
    if (!e.Handled)
    {
        e.Handled = this.BackRequested();
    }
}

public Frame AppFrame { get { return this.Frame; } }

private bool BackRequested()
{
    // Get a hold of the current frame so that we can inspect the app back stack
    if (this.AppFrame == null)
        return false;

    // Check to see if this is the top-most page on the app back stack
    if (this.AppFrame.CanGoBack)
    {
        // If not, set the event to handled and go back to the previous page in the
        // app.
        this.AppFrame.GoBack();
        return true;
    }
    return false;
}

Nota

Se si usa il pulsante B per tornare indietro, non visualizzare un pulsante indietro nell'interfaccia utente.If the B button is used to go back, then don't show a back button in the UI. Se si usa una visualizzazione di navigazione, il pulsante indietro verrà nascosto automaticamente.If you're using a Navigation view, the back button will be hidden automatically. Per ulteriori informazioni sulla navigazione all'indietro, vedere la pagina relativa alla cronologia di esplorazione e alla navigazione all'indietro per le app di Windows.For more information about backwards navigation, see Navigation history and backwards navigation for Windows apps.

Le app di Windows su Xbox One supportano anche la pressione del pulsante di menu per aprire i menu di scelta rapida.Windows apps on Xbox One also support pressing the Menu button to open context menus. Per altre informazioni, vedi CommandBar e ContextFlyout.For more information, see CommandBar and ContextFlyout.

Supporto per i tasti di scelta rapidaAccelerator support

I pulsanti di scelta rapida consentono di velocizzare lo spostamento tramite un'interfaccia utente.Accelerator buttons are buttons that can be used to speed up navigation through a UI. Questi pulsanti possono tuttavia essere univoci per un determinato dispositivo di input, pertanto tieni presente che non tutti gli utenti saranno in grado di usare queste funzioni.However, these buttons may be unique to a certain input device, so keep in mind that not all users will be able to use these functions. In realtà, gamepad è attualmente l'unico dispositivo di input che supporta le funzioni di accelerazione per le app di Windows su Xbox One.In fact, gamepad is currently the only input device that supports accelerator functions for Windows apps on Xbox One.

La tabella seguente illustra il supporto per i tasti di scelta rapida integrato nella piattaforma UWP e quello che puoi implementare nella tua app.The following table lists the accelerator support built into the UWP, as well as that which you can implement on your own. L'uso di questi comportamenti nell'interfaccia utente personalizzata ti consente di offrire un'esperienza utente semplice e coerente.Utilize these behaviors in your custom UI to provide a consistent and friendly user experience.

InterazioneInteraction Tastiera/mouseKeyboard/Mouse Game padGamepad Predefinito per:Built-in for: Consigliato per:Recommended for:
Pagina su/giùPage up/down Pagina su/giùPage up/down Trigger destro/sinistroLeft/right triggers CalendarView, ListBox, ListViewBase, ListView, ScrollViewer, Selector, LoopingSelector, ComboBox, FlipViewCalendarView, ListBox, ListViewBase, ListView, ScrollViewer, Selector, LoopingSelector, ComboBox, FlipView Visualizzazioni che supportano lo scorrimento verticaleViews that support vertical scrolling
Pagina sinistra/destraPage left/right NessunoNone Pulsante dorsale destro/sinistroLeft/right bumpers Pivot, ListBox, ListViewBase, ListView, ScrollViewer, Selector, LoopingSelector, FlipViewPivot, ListBox, ListViewBase, ListView, ScrollViewer, Selector, LoopingSelector, FlipView Visualizzazioni che supportano lo scorrimento orizzontaleViews that support horizontal scrolling
Zoom avanti/indietroZoom in/out CTRL +/-Ctrl +/- Trigger destro/sinistroLeft/right triggers NessunoNone ScrollViewer, visualizzazioni che supportano lo zoom avanti e indietroScrollViewer, views that support zooming in and out
Apri/Chiudi riquadro di spostamentoOpen/close nav pane NessunoNone VisualizzazioneView NessunoNone Riquadro di spostamentoNavigation panes
CercaSearch NessunoNone Pulsante YY button NessunoNone Collegamento della funzione di ricerca principale nell'appShortcut to the main search function in the app
Apri menu di scelta rapidaOpen context menu Fare clic con il pulsante destro del mouse suRight-click Pulsante MenuMenu button ContextFlyoutContextFlyout Menu di scelta rapidaContext menus

Interazione e spostamento con stato attivo XYXY focus navigation and interaction

Se l'app supporta lo spostamento con stato attivo appropriato per la tastiera, la conversione per il game pad e il telecomando avverrà in modo corretto.If your app supports proper focus navigation for keyboard, this will translate well to gamepad and remote control. Lo spostamento con i tasti di direzione è mappato alla croce direzionale (e anche alla levetta sinistra sul game pad), mentre l'interazione con gli elementi dell'interfaccia utente è mappata al tasto INVIO/Seleziona (vedi Game pad e telecomando).Navigation with the arrow keys is mapped to the D-pad (as well as the left stick on gamepad), and interaction with UI elements is mapped to the Enter/Select key (see Gamepad and remote control).

Molti eventi e proprietà vengono usati sia dalla tastiera che dal gamepad, che vengono attivati — KeyDown ed KeyUp eventi ed entrambi passano solo ai controlli che hanno le proprietà IsTabStop="True" e Visibility="Visible" .Many events and properties are used by both keyboard and gamepad—they both fire KeyDown and KeyUp events, and they both will only navigate to controls that have the properties IsTabStop="True" and Visibility="Visible". Per indicazioni sulla progettazione dell'uso della tastiera, vedi Interazioni tramite tastiera.For keyboard design guidance, see Keyboard interactions.

Se il supporto per la tastiera è implementato in modo appropriato, l'app funzionerà correttamente. Potrebbero tuttavia essere necessarie alcuni operazioni aggiuntive per supportare qualsiasi scenario.If keyboard support is implemented properly, your app will work reasonably well; however, there may be some extra work required to support every scenario. Individua le esigenze specifiche dell'app per offrire l'esperienza utente ottimale.Think about your app's specific needs to provide the best user experience possible.

Importante

La modalità mouse è abilitata per impostazione predefinita per le app di Windows in esecuzione su Xbox One.Mouse mode is enabled by default for Windows apps running on Xbox One. Per disabilitare la modalità mouse e abilitare la navigazione con stato attivo XY, imposta Application.RequiresPointerMode=WhenRequested.To disable mouse mode and enable XY focus navigation, set Application.RequiresPointerMode=WhenRequested.

Debug dei problemi di stato attivoDebugging focus issues

Il metodo FocusManager.GetFocusedElement ti dirà quale elemento ha attualmente lo stato attivo.The FocusManager.GetFocusedElement method will tell you which element currently has focus. Questo è utile per le situazioni in cui la posizione dell'indicatore visivo dello stato attivo non è chiara.This is useful for situations where the location of the focus visual may not be obvious. Puoi registrare queste informazioni nella finestra di output di Visual Studio, in questo modo:You can log this information to the Visual Studio output window like so:

page.GotFocus += (object sender, RoutedEventArgs e) =>
{
    FrameworkElement focus = FocusManager.GetFocusedElement() as FrameworkElement;
    if (focus != null)
    {
        Debug.WriteLine("got focus: " + focus.Name + " (" +
            focus.GetType().ToString() + ")");
    }
};

Esistono tre motivi comuni per cui la navigazione XY non funziona come ti aspetti:There are three common reasons why XY navigation might not work the way you expect:

  • La proprietà IsTabStop o Visibility non è impostata correttamente.The IsTabStop or Visibility property is set wrong.
  • Il controllo per ottenere lo stato attivo è effettivamente più grande di quanto si pensi che la — navigazione XY esamini la dimensione totale del controllo (ActualWidth e ActualHeight), non solo la parte del controllo che esegue il rendering di un elemento interessante.The control getting focus is actually bigger than you think—XY navigation looks at the total size of the control (ActualWidth and ActualHeight), not just the portion of the control that renders something interesting.
  • Un controllo attivabile si trova sopra un'altra — navigazione XY non supporta i controlli sovrapposti.One focusable control is on top of another—XY navigation doesn't support controls that are overlapped.

Se, dopo avere risolto questi problemi, la navigazione XY non funziona ancora come ti aspetti, puoi puntare manualmente all'elemento che deve avere lo stato attivo usando il metodo descritto in Ignorare le impostazioni di spostamento predefinite.If XY navigation is still not working the way you expect after fixing these issues, you can manually point to the element that you want to get focus using the method described in Overriding the default navigation.

Se la navigazione XY funziona come previsto, ma non viene visualizzato alcun indicatore visivo dello stato attivo, la causa potrebbe essere uno dei problemi seguenti:If XY navigation is working as intended but no focus visual is displayed, one of the following issues may be the cause:

  • Hai ridefinito il modello del controllo e non hai incluso un indicatore visivo dello stato attivo.You re-templated the control and didn't include a focus visual. Imposta UseSystemFocusVisuals="True" o aggiungi manualmente un indicatore visivo dello stato attivo.Set UseSystemFocusVisuals="True" or add a focus visual manually.
  • Hai spostato lo stato attivo chiamando Focus(FocusState.Pointer).You moved the focus by calling Focus(FocusState.Pointer). Il parametro FocusState controlla quello che accade all'indicatore visivo dello stato attivo.The FocusState parameter controls what happens to the focus visual. In genere dovresti impostarlo su FocusState.Programmatic per lasciare visibile l'indicatore visivo dello stato attivo se prima era visibile e nascosto se prima era nascosto.Generally you should set this to FocusState.Programmatic, which keeps the focus visual visible if it was visible before, and hidden if it was hidden before.

Il resto di questa sezione approfondisce le problematiche di progettazione comuni quando usi la navigazione XY ed elenca diversi modi per risolverle.The rest of this section goes into detail about common design challenges when using XY navigation, and offers several ways to solve them.

Interfaccia utente inaccessibileInaccessible UI

Poiché lo spostamento con stato attivo XY limita i movimenti dell'utente verso l'alto, il basso, sinistra e destra, possono verificarsi casi in cui alcune parti dell'interfaccia utente sono inaccessibili.Because XY focus navigation limits the user to moving up, down, left, and right, you may end up with scenarios where parts of the UI are inaccessible. Il diagramma seguente illustra un esempio del tipo di layout dell'interfaccia utente che non è supportato dallo spostamento con stato attivo XY.The following diagram illustrates an example of the kind of UI layout that XY focus navigation doesn't support. Tieni presente che l'elemento centrale non è accessibile tramite il game pad o il telecomando in quanto viene data priorità allo spostamento verticale e orizzontale e l'elemento centrale non avrà mai una priorità abbastanza elevata per avere lo stato attivo.Note that the element in the middle is not accessible by using gamepad/remote because the vertical and horizontal navigation will be prioritized and the middle element will never be high enough priority to get focus.

Elementi nei quattro angoli con l'elemento inaccessibile al centro

Se per qualche motivo non è possibile riorganizzare l'interfaccia utente, usa una delle tecniche descritte nella sezione successiva per ignorare il comportamento predefinito dello stato attivo.If for some reason rearranging the UI is not possible, use one of the techniques discussed in the next section to override the default focus behavior.

Ignorare le impostazioni di spostamento predefiniteOverriding the default navigation

Anche se lo scopo della piattaforma UWP (Universal Windows Platform) è assicurare che lo spostamento tramite croce direzionale o levetta sinistra avvenga in modo intuitivo per l'utente, non può garantire un comportamento ottimizzato per le finalità dell'app.While the Universal Windows Platform tries to ensure that D-pad/left stick navigation makes sense to the user, it cannot guarantee behavior that is optimized for your app's intentions. Il modo migliore per assicurarsi che lo spostamento sia ottimizzato per l'app è quello di testarlo con un game pad e verificare che l'utente sia in grado di accedere a ogni elemento dell'interfaccia utente in modo logico in base agli scenari dell'app.The best way to ensure that navigation is optimized for your app is to test it with a gamepad and confirm that every UI element can be accessed by the user in a manner that makes sense for your app's scenarios. Se gli scenari dell'app richiedono un comportamento che non è possibile ottenere tramite lo spostamento con stato attivo XY, puoi valutare se seguire i consigli contenuti nelle sezioni seguenti e/o ignorare il comportamento per posizionare lo stato attivo su un elemento logico.In case your app's scenarios call for a behavior not achieved through the XY focus navigation provided, consider following the recommendations in the following sections and/or overriding the behavior to place the focus on a logical item.

Il frammento di codice seguente illustra come ignorare il comportamento dello spostamento con stato attivo XY:The following code snippet shows how you might override the XY focus navigation behavior:

<StackPanel>
    <Button x:Name="MyBtnLeft"
            Content="Search" />
    <Button x:Name="MyBtnRight"
            Content="Delete"/>
    <Button x:Name="MyBtnTop"
            Content="Update" />
    <Button x:Name="MyBtnDown"
            Content="Undo" />
    <Button Content="Home"  
            XYFocusLeft="{x:Bind MyBtnLeft}"
            XYFocusRight="{x:Bind MyBtnRight}"
            XYFocusDown="{x:Bind MyBtnDown}"
            XYFocusUp="{x:Bind MyBtnTop}" />
</StackPanel>

In questo caso, quando lo stato attivo si trova sul pulsante Home e l'utente si sposta verso sinistra, lo stato attivo passerà al pulsante MyBtnLeft. Se l'utente si sposta verso destra, lo stato attivo passerà al pulsante MyBtnRight e così via.In this case, when focus is on the Home button and the user navigates to the left, focus will move to the MyBtnLeft button; if the user navigates to the right, focus will move to the MyBtnRight button; and so on.

Per impedire che lo stato attivo si sposti da un controllo in una certa direzione, usa la proprietà XYFocus* per indirizzarlo allo stesso controllo:To prevent the focus from moving from a control in a certain direction, use the XYFocus* property to point it at the same control:

<Button Name="HomeButton"  
        Content="Home"  
        XYFocusLeft ="{x:Bind HomeButton}" />

Usando queste proprietà XYFocus, un controllo padre può anche forzare la navigazione dei figli quando il candidato per lo stato attivo successivo non è incluso nel suo albero visivo, a meno che il figlio con lo stato attivo non usi la stessa proprietà XYFocus.Using these XYFocus properties, a control parent can also force the navigation of its children when the next focus candidate is out of its visual tree, unless the child who has the focus uses the same XYFocus property.

<StackPanel Orientation="Horizontal" Margin="300,300">
    <UserControl XYFocusRight="{x:Bind ButtonThree}">
        <StackPanel>
            <Button Content="One"/>
            <Button Content="Two"/>
        </StackPanel>
    </UserControl>
    <StackPanel>
        <Button x:Name="ButtonThree" Content="Three"/>
        <Button Content="Four"/>
    </StackPanel>
</StackPanel>

Nell'esempio precedente, se lo stato attivo è su Button Two e l'utente si sposta a destra, il miglior candidato per lo stato attivo è Button Four. Lo stato attivo passa però su Button Three perché l'oggetto UserControl padre lo obbliga a passare lì quando non è incluso nel suo albero visivo.In the sample above, if the focus is on Button Two and the user navigates to the right, the best focus candidate is Button Four; however, the focus is moved to Button Three because the parent UserControl forces it to navigate there when it is out of its visual tree.

Percorso con il minor numero di clicPath of least clicks

Prova a consentire all'utente di eseguire le attività più comuni con il minor numero di clic.Try to allow the user to perform the most common tasks in the least number of clicks. Nell'esempio seguente il controllo TextBlock è posizionato tra il pulsante Play (che inizialmente ha lo stato attivo) e un elemento di uso comune, in modo che un elemento non necessario venga posizionato tra le attività con priorità.In the following example, the TextBlock is placed between the Play button (which initially gets focus) and a commonly used element, so that an unnecessary element is placed in between priority tasks.

Le procedure consigliate per lo spostamento garantiscono il percorso con il minor numero di clic

Nell'esempio seguente il controllo TextBlock è invece posizionato al di sopra del pulsante Play.In the following example, the TextBlock is placed above the Play button instead. L'usabilità dell'app migliorerà notevolmente tramite la semplice ridisposizione dell'interfaccia utente in modo che gli elementi non necessari non vengano posizionati tra le attività con priorità.Simply rearranging the UI so that unnecessary elements are not placed in between priority tasks will greatly improve your app's usability.

TextBlock spostato al di sopra del pulsante Play in modo che non venga più posizionato tra le attività con priorità

CommandBar e ContextFlyoutCommandBar and ContextFlyout

Quando si usa un oggetto CommandBar, tieni presente il problema dello scorrimento di un elenco descritto in Problema: Elementi dell'interfaccia utente collocati dopo un lungo elenco o una griglia di scorrimento.When using a CommandBar, keep in mind the issue of scrolling through a list as mentioned in Problem: UI elements located after long scrolling list/grid. L'immagine seguente mostra un layout dell'interfaccia utente con l'oggetto CommandBar nella parte inferiore di un elenco o di una griglia.The following image shows a UI layout with the CommandBar on the bottom of a list/grid. Per raggiungere l'oggetto CommandBar, l'utente deve scorrere verso il basso l'elenco o la grigliaThe user would need to scroll all the way down through the list/grid to reach the CommandBar.

CommandBar alla fine di un elenco o di una griglia

Cosa succede se si inserisce l'oggetto CommandBar al di sopra dell'elenco o della griglia?What if you put the CommandBar above the list/grid? Anche se per raggiungere l'oggetto CommandBar l'utente che ha scorso verso il basso l'elenco o la griglia dovrebbe scorrere di nuovo verso l'alto, questa situazione comporta uno spostamento leggermente inferiore rispetto alla configurazione precedente.While a user who scrolled down the list/grid would have to scroll back up to reach the CommandBar, it is slightly less navigation than the previous configuration. Tieni presente che si presuppone che lo stato attivo iniziale dell'app sia posizionato accanto o al di sopra dell'oggetto CommandBar. Questo approccio non funzionerà correttamente se lo stato attivo iniziale si trova al di sotto dell'elenco o della griglia.Note that this is assuming that your app's initial focus is placed next to or above the CommandBar; this approach won't work as well if the initial focus is below the list/grid. Se questi oggetti CommandBar sono elementi per azioni globali a cui non si accede molto spesso (ad esempio, un pulsante Sincronizza), può essere accettabile posizionarli al di sopra dell'elenco o della griglia.If these CommandBar items are global action items that don't have to be accessed very often (such as a Sync button), it may be acceptable to have them above the list/grid.

Anche se non puoi raggruppare gli elementi di un oggetto CommandBar in verticale, un'altra opzione da considerare, se è adatta al layout dell'interfaccia utente, consiste nel posizionarli nella direzione di scorrimento, ad esempio a sinistra o a destra di un elenco a scorrimento verticale oppure al di sopra o al di sotto di un elenco a scorrimento orizzontale.While you can't stack a CommandBar's items vertically, placing them against the scroll direction (for example, to the left or right of a vertically scrolling list, or the top or bottom of a horizontally scrolling list) is another option you may want to consider if it works well for your UI layout.

Se l'app include un oggetto CommandBar i cui elementi devono essere facilmente accessibili agli utenti, ti consigliamo di inserirli all'interno di un oggetto ContextFlyout e rimuoverli dall'oggetto CommandBar.If your app has a CommandBar whose items need to be readily accessible by users, you may want to consider placing these items inside a ContextFlyout and removing them from the CommandBar. ContextFlyout è una proprietà di UIElement ed è il menu di scelta rapida associato a tale elemento.ContextFlyout is a property of UIElement and is the context menu associated with that element. Sul PC, quando fai clic con il pulsante destro del mouse su un elemento con un ContextFlyout, verrà visualizzato quel menu di scelta rapida.On PC, when you right-click on an element with a ContextFlyout, that context menu will pop up. Sulla Xbox One questo avviene quando premi il pulsante Menu mentre quell'elemento ha lo stato attivo.On Xbox One, this will happen when you press the Menu button while the focus is on such an element.

Problemi di layout dell'interfaccia utenteUI layout challenges

Alcuni layout dell'interfaccia utente sono più problematici per la natura stessa dello spostamento con stato attivo XY e devono essere valutati caso per caso.Some UI layouts are more challenging due to the nature of XY focus navigation, and should be evaluated on a case-by-case basis. Anche se non esiste un unico metodo corretto e la soluzione ideale dipende dalle esigenze specifiche dell'app, puoi applicare alcune tecniche per rendere ottimale l'esperienza di visualizzazione sul televisore.While there is no single "right" way, and which solution you choose is up to your app's specific needs, there are some techniques that you can employ to make a great TV experience.

Per comprendere meglio questo concetto, esaminiamo un'ipotetica app in grado di illustrare alcuni di questi problemi e le tecniche per risolverli.To understand this better, let's look at an imaginary app that illustrates some of these issues and techniques to overcome them.

Nota

Questa app fittizia è progettata per illustrare problemi relativi all'interfaccia utente e le potenziali soluzioni e non per mostrare l'esperienza utente ottimale per la tua app.This fake app is meant to illustrate UI problems and potential solutions to them, and is not intended to show the best user experience for your particular app.

Di seguito è riportata un'ipotetica app immobiliare che mostra un elenco di case disponibili per la vendita, una mappa, la descrizione di una proprietà e altre informazioni.The following is an imaginary real estate app which shows a list of houses available for sale, a map, a description of a property, and other information. Questa app presenta tre problemi che possono essere superati usando le tecniche seguenti:This app poses three challenges that you can overcome by using the following techniques:

App immobiliare fittizia

Problema: elementi dell'interfaccia utente collocati dopo un lungo elenco o una griglia di scorrimento Problem: UI elements located after long scrolling list/grid

L'oggetto ListView delle proprietà mostrato nell'immagine seguente è un elenco di scorrimento particolarmente lungo.The ListView of properties shown in the following image is a very long scrolling list. Se nell'oggetto ListViewnon è necessaria l'attivazione, quando l'utente passa all'elenco, lo stato attivo verrà posizionato sul primo elemento nell'elenco.If engagement is not required on the ListView, when the user navigates to the list, focus will be placed on the first item in the list. Per accedere al pulsante Indietro o Avanti, l'utente deve scorrere tutti gli elementi nell'elenco.For the user to reach the Previous or Next button, they must go through all the items in the list. In casi come questo, in cui è necessario che l'utente attraversi l'intero elenco sia penoso — , quando l'elenco non è sufficientemente breve per consentire l'utilizzo di questa esperienza, — è opportuno prendere in considerazione altre opzioni.In cases like this where requiring the user to traverse the entire list is painful—that is, when the list is not short enough for this experience to be acceptable—you may want to consider other options.

App immobiliare: nell'elenco con 50 elementi sono necessari 51 clic per raggiungere i pulsanti in basso

SoluzioniSolutions

Ridisposizione interfaccia utente UI rearrange

A meno che lo stato attivo iniziale non venga posizionato nella parte inferiore della pagina, gli elementi dell'interfaccia utente sono in genere più facilmente accessibili quando vengono posizionati al di sopra di un lungo elenco a scorrimento anziché al di sotto.Unless your initial focus is placed at the bottom of the page, UI elements placed above a long scrolling list are typically more easily accessible than if placed below. Se il nuovo layout funziona per altri dispositivi, l'approccio meno dispendioso potrebbe essere modificarlo per tutte le famiglie di dispositivi anziché apportare speciali modifiche dell'interfaccia utente solo per Xbox One.If this new layout works for other devices, changing the layout for all device families instead of doing special UI changes just for Xbox One might be a less costly approach. Inoltre, posizionando gli elementi dell'interfaccia utente nella direzione di scorrimento, ad esempio orizzontalmente per un elenco a scorrimento verticale oppure verticalmente per un elenco a scorrimento orizzontale, l'accessibilità migliorerà ulteriormente.Additionally, placing UI elements against the scrolling direction (that is, horizontally to a vertically scrolling list, or vertically to a horizontally scrolling list) will make for even better accessibility.

App immobiliare: posizionare i pulsanti al di sopra di un lungo elenco a scorrimento

Coinvolgimento nello stato attivo Focus engagement

Quando è necessaria l'attivazione, l'intero oggetto ListView diventa una destinazione con stato attivo singolo.When engagement is required, the entire ListView becomes a single focus target. L'utente sarà in grado di ignorare il contenuto dell'elenco per accedere all'elemento successivo che può essere attivato.The user will be able to bypass the contents of the list to get to the next focusable element. Per altre informazioni sui controlli che supportano l'attivazione e su come usarli, vedi Attivazione dello stato attivo.Read more about what controls support engagement and how to use them in Focus engagement.

App immobiliare: impostare l'attivazione come necessaria in modo che sia sufficiente 1 clic per raggiungere i pulsanti Indietro e Avanti

Problema: ScrollViewer senza elementi che possono essere attivatiProblem: ScrollViewer without any focusable elements

Poiché lo spostamento con stato attivo XY comporta il passaggio a un solo elemento dell'interfaccia utente alla volta, un oggetto ScrollViewer che non contiene alcun elemento che può essere attivato (ad esempio un elemento con solo testo, come in questo esempio) può dare luogo a uno scenario in cui l'utente non è in grado di visualizzare tutto il contenuto nell'oggetto ScrollViewer.Because XY focus navigation relies on navigating to one focusable UI element at a time, a ScrollViewer that doesn't contain any focusable elements (such as one with only text, as in this example) may cause a scenario where the user isn't able to view all of the content in the ScrollViewer. Per soluzioni per questo e altri scenari correlati, vedi Attivazione dello stato attivo.For solutions to this and other related scenarios, see Focus engagement.

App immobiliare: ScrollViewer con solo testo

Problema: interfaccia utente con scorrimento liberoProblem: Free-scrolling UI

Quando l'app richiede un'interfaccia utente con scorrimento libero, quale una superficie di disegno o, come in questo esempio, una mappa, lo spostamento con stato attivo XY non è utilizzabile.When your app requires a freely scrolling UI, such as a drawing surface or, in this example, a map, XY focus navigation simply doesn't work. In questi casi, puoi attivare la modalità mouse per consentire all'utente di spostarsi liberamente all'interno di un elemento dell'interfaccia utente.In such cases, you can turn on mouse mode to allow the user to navigate freely inside a UI element.

Mapping di un elemento dell'interfaccia utente tramite la modalità mouse

Modalità mouseMouse mode

Come descritto in Interazione e spostamento con stato attivo XY, su Xbox One lo stato attivo cambia in base a un sistema di spostamento XY, che consente all'utente di trasferire lo stato attivo da un controllo all'altro spostandosi verso l'alto, il basso, sinistra e destra.As described in XY focus navigation and interaction, on Xbox One the focus is moved by using an XY navigation system, allowing the user to shift the focus from control to control by moving up, down, left, and right. Tuttavia, alcuni controlli, ad esempio WebView e MapControl, richiedono un'interazione simile al mouse in cui gli utenti possano spostare liberamente il puntatore all'interno dei limiti del controllo.However, some controls, such as WebView and MapControl, require a mouse-like interaction where users can freely move the pointer inside the boundaries of the control. In alcune app è opportuno consentire all'utente di spostare il puntatore nell'intera pagina, offrendo un'esperienza con il game pad o il telecomando analoga a quella con il mouse in un PC.There are also some apps where it makes sense for the user to be able to move the pointer across the entire page, having an experience with gamepad/remote similar to what users can find on a PC with a mouse.

Per questi scenari, ti consigliamo di richiedere un puntatore (modalità mouse) per l'intera pagina o su un controllo all'interno di una pagina.For these scenarios, you should request a pointer (mouse mode) for the entire page, or on a control inside a page. L'app potrebbe ad esempio includere una pagina con un controllo WebView all'interno del quale viene usata la modalità mouse, mentre in tutte le altre aree viene usato lo spostamento con stato attivo XY.For example, your app could have a page that has a WebView control that uses mouse mode only while inside the control, and XY focus navigation everywhere else. Per richiedere un puntatore, puoi specificare se attivarlo quando un controllo o una pagina è in uso o quando una pagina ha lo stato attivo.To request a pointer, you can specify whether you want it when a control or page is engaged or when a page has focus.

Nota

La richiesta di un puntatore quando un controllo ha lo stato attivo non è supportata.Requesting a pointer when a control gets focus is not supported.

Sia per le app XAML che per le app Web ospitate in esecuzione sulla Xbox One, la modalità mouse è attivata per impostazione predefinita per l'intera app.For both XAML and hosted web apps running on Xbox One, mouse mode is turned on by default for the entire app. Ti consigliamo di disattivarla e di ottimizzare la tua app per la navigazione XY.It is highly recommended that you turn this off and optimize your app for XY navigation. Per farlo, imposta la proprietà Application.RequiresPointerMode su WhenRequested per abilitare la modalità mouse solo quando un controllo o una pagina la chiama.To do this, set the Application.RequiresPointerMode property to WhenRequested so that you only enable mouse mode when a control or page calls for it.

Per farlo in un'app XAML, usa il codice seguente nella tua classe App:To do this in a XAML app, use the following code in your App class:

public App()
{
    this.InitializeComponent();
    this.RequiresPointerMode =
        Windows.UI.Xaml.ApplicationRequiresPointerMode.WhenRequested;
    this.Suspending += OnSuspending;
}

Per altre informazioni, incluso il codice di esempio per HTML/JavaScript, vedi Come disabilitare la modalità mouse.For more information, including sample code for HTML/JavaScript, see How to disable mouse mode.

Il diagramma seguente mostra il mapping dei pulsanti per il game pad e il telecomando in modalità mouse.The following diagram shows the button mappings for gamepad/remote in mouse mode.

Mapping dei pulsanti per il game pad e il telecomando in modalità mouse

Nota

La modalità mouse è supportata solo su Xbox One con il game pad o il telecomando.Mouse mode is only supported on Xbox One with gamepad/remote. In altre famiglie di dispositivi e in altri tipi di input tale modalità viene automaticamente ignorata.On other device families and input types it is silently ignored.

Usare la proprietà RequiresPointer in un controllo o in una pagina per attivare la modalità del mouse.Use the RequiresPointer property on a control or page to activate mouse mode on it. Questa proprietà ha tre valori possibili: Never (valore predefinito), WhenEngaged e WhenFocused .This property has three possible values: Never (the default value), WhenEngaged, and WhenFocused.

Attivazione della modalità mouse in un controlloActivating mouse mode on a control

Quando l'utente usa un controllo con RequiresPointer="WhenEngaged", viene attivata la modalità mouse per quel controllo fino a quando l'utente non smette di usarlo.When the user engages a control with RequiresPointer="WhenEngaged", mouse mode is activated on the control until the user disengages it. Il frammento di codice seguente mostra un semplice controllo MapControl che attiva la modalità mouse quando è in uso:The following code snippet demonstrates a simple MapControl that activates mouse mode when engaged:

<Page>
    <Grid>
        <MapControl IsEngagementRequired="true"
                    RequiresPointer="WhenEngaged"/>
    </Grid>
</Page>

Nota

Se un controllo attiva la modalità mouse quando è in uso, deve richiedere anche l'attivazione con IsEngagementRequired="true", altrimenti la modalità mouse non verrà mai attivata.If a control activates mouse mode when engaged, it must also require engagement with IsEngagementRequired="true"; otherwise, mouse mode will never be activated.

Quando un controllo è in modalità mouse, anche i relativi controlli annidati saranno in modalità mouse.When a control is in mouse mode, its nested controls will be in mouse mode as well. La modalità richiesta degli elementi figlio verrà ignorata — e non è possibile che un elemento padre sia in modalità mouse ma che non sia un elemento figlio.The requested mode of its children will be ignored—it's impossible for a parent to be in mouse mode but a child not to be.

Inoltre, la modalità di richiesta di un controllo viene esaminata solo quando ha lo stato attivo, pertanto la modalità non cambierà in modo dinamico mentre ha lo stato attivo.Additionally, the requested mode of a control is only inspected when it gets focus, so the mode won't change dynamically while it has focus.

Attivazione della modalità mouse su una paginaActivating mouse mode on a page

Quando una pagina include la proprietà RequiresPointer="WhenFocused", la modalità mouse verrà attivata per l'intera pagina quando ha lo stato attivo.When a page has the property RequiresPointer="WhenFocused", mouse mode will be activated for the whole page when it gets focus. Il frammento di codice seguente mostra come assegnare a una pagina questa proprietà:The following code snippet demonstrates giving a page this property:

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

Nota

Il valore WhenFocused è supportato solo in oggetti Pagina.The WhenFocused value is only supported on Page objects. Se provi a impostare questo valore in un controllo, verrà generata un'eccezione.If you try to set this value on a control, an exception will be thrown.

Disabilitazione della modalità mouse per il contenuto a schermo interoDisabling mouse mode for full screen content

In genere durante la visualizzazione di un video o di altri tipi di contenuto a schermo intero, è preferibile nascondere il cursore perché può distrarre l'utente.Usually when displaying video or other types of content in full screen, you will want to hide the cursor because it can distract the user. Questo scenario si verifica quando il resto dell'app usa la modalità mouse, ma vuoi disattivarla quando il contenuto viene visualizzato a schermo intero.This scenario occurs when the rest of the app uses mouse mode, but you want to turn it off when showing full screen content. A questo scopo, inserisci il contenuto a schermo intero nel suo oggetto Page e segui i passaggi sotto.To accomplish this, put the full screen content on its own Page, and follow the steps below.

  1. Nell'oggetto App imposta RequiresPointerMode="WhenRequested".In the App object, set RequiresPointerMode="WhenRequested".
  2. In ogni oggetto Page, tranne che per lo schermo intero Page, imposta RequiresPointer="WhenFocused".In every Page object except for the full screen Page, set RequiresPointer="WhenFocused".
  3. Per lo schermo intero Page, imposta RequiresPointer="Never".For the full screen Page, set RequiresPointer="Never".

In questo modo, il cursore non apparirà mai durante la visualizzazione del contenuto a schermo intero.This way, the cursor will never appear when showing full screen content.

Indicatore visivo dello stato attivoFocus visual

L'indicatore visivo dello stato attivo è il bordo attorno all'elemento dell'interfaccia utente che ha attualmente lo stato attivo.The focus visual is the border around the UI element that currently has focus. Questa funzionalità facilita l'orientamento dell'utente in modo che possa esplorare facilmente l'interfaccia utente senza perdersi.This helps orient the user so that they can easily navigate your UI without getting lost.

Grazie a un aggiornamento visivo e a numerose opzioni di personalizzazione aggiunte all'indicatore visivo dello stato attivo, gli sviluppatori possono contare sul corretto funzionamento di un singolo indicatore visivo dello stato attivo su PC e Xbox One, nonché su tutti gli altri dispositivi Windows 10 che supportano la tastiera e/o il game pad e il telecomando.With a visual update and numerous customization options added to focus visual, developers can trust that a single focus visual will work well on PCs and Xbox One, as well as on any other Windows 10 devices that support keyboard and/or gamepad/remote.

Anche se è possibile usare lo stesso indicatore visivo dello stato attivo in diverse piattaforme, il contesto in cui tale indicatore viene visualizzato è leggermente diverso per l'esperienza di interazione da 3 metri.While the same focus visual can be used across different platforms, the context in which the user encounters it is slightly different for the 10-foot experience. Presupponiamo che l'utente non presti la massima attenzione all'intero schermo del televisore, pertanto è importante che l'elemento attualmente attivo sia chiaramente visibile all'utente in ogni momento per evitare la frustrazione di dover cercare l'indicatore visivo.You should assume that the user is not paying full attention to the entire TV screen, and therefore it is important that the currently focused element is clearly visible to the user at all times to avoid the frustration of searching for the visual.

È importante anche tenere presente che l'indicatore visivo dello stato attivo viene visualizzato per impostazione predefinita quando si usa un game pad o un telecomando, ma non una tastiera.It is also important to keep in mind that the focus visual is displayed by default when using a gamepad or remote control, but not a keyboard. Pertanto, anche se non viene implementato, verrà visualizzato quando esegui l'app su Xbox One.Thus, even if you don't implement it, it will appear when you run your app on Xbox One.

Posizionamento iniziale dell'indicatore visivo dello stato attivoInitial focus visual placement

Quando avvii un'app o passi a una pagina, posiziona lo stato attivo sul primo elemento dell'interfaccia utente in cui l'utente presumibilmente eseguirà un'operazione.When launching an app or navigating to a page, place the focus on a UI element that makes sense as the first element on which the user would take action. Ad esempio, un'app di foto può impostare lo stato attivo sul primo elemento nella raccolta e un'app musicale in cui si è passati alla visualizzazione dettagliata di un brano può posizionare lo stato attivo sul pulsante di riproduzione per facilitare la riproduzione della musica.For example, a photo app may place focus on the first item in the gallery, and a music app navigated to a detailed view of a song might place focus on the play button for ease of playing music.

Prova a posizionare lo stato attivo iniziale nell'area superiore sinistra dell'app (o in alto a destra per un flusso da destra a sinistra).Try to put initial focus in the top left region of your app (or top right for a right-to-left flow). La maggior parte degli utenti tende a concentrarsi per prima cosa su tale angolo perché è la posizione da cui in genere ha inizio il flusso del contenuto dell'app.Most users tend to focus on that corner first because that's where app content flow generally begins.

Rendere visibile lo stato attivoMaking focus clearly visible

L'indicatore visivo dello stato attivo deve essere sempre visibile sullo schermo in modo che l'utente possa riprendere da dove aveva interrotto senza doverlo cercare.One focus visual should always be visible on the screen so that the user can pick up where they left off without searching for the focus. Analogamente, dovrebbe essere presente un elemento attivo sullo schermo in qualsiasi momento — , ad esempio, non usare popup con solo testo e nessun elemento attivabile.Similarly, there should be a focusable item onscreen at all times—for example, don't use pop-ups with only text and no focusable elements.

Un'eccezione a questa regola è quella per le esperienze a schermo intero, ad esempio quando si guardano video o immagini. In questi casi è meglio non mostrare l'indicatore visivo dello stato attivo.An exception to this rule would be for full-screen experiences, such as watching videos or viewing images, in which cases it would not be appropriate to show the focus visual.

Reveal FocusReveal focus

Rivela lo stato attivo è un effetto di illuminazione che aggiunge un'animazione al bordo di elementi attivabili, ad esempio un pulsante, quando l'utente sposta lo stato attivo del gamepad o della tastiera.Reveal focus is a lighting effect that animates the border of focusable elements, such as a button, when the user moves gamepad or keyboard focus to them. Animando il bagliore intorno al bordo degli elementi con stato attivo, rivelare lo stato attivo consente agli utenti di comprendere meglio la posizione dello stato attivo e la posizione in cui lo stato attivo.By animating the glow around the border of the focused elements, Reveal focus gives users a better understanding of where focus is and where focus is going.

Per impostazione predefinita, rivelare lo stato attivo è disattivato.Reveal focus is off by default. Per esperienze di 10 bit, è necessario acconsentire esplicitamente per rivelare lo stato attivo impostando la Proprietà Application. FocusVisualKind nel costruttore dell'app.For 10 foot experiences you should opt-in to reveal focus by setting the Application.FocusVisualKind property in your app constructor.

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

Per ulteriori informazioni, vedere le linee guida per rivelare lo stato attivo.For more information see the guidance for Reveal focus.

Personalizzazione dell'indicatore visivo dello stato attivoCustomizing the focus visual

Se vuoi personalizzare l'indicatore visivo dello stato attivo, puoi farlo modificando le proprietà correlate all'indicatore visivo dello stato attivo per ogni controllo.If you'd like to customize the focus visual, you can do so by modifying the properties related to the focus visual for each control. Ci sono diverse proprietà di questo tipo che puoi sfruttare per personalizzare la tua app.There are several such properties that you can take advantage of to personalize your app.

Puoi anche escludere gli indicatori visivi dello stato attivo forniti dal sistema e disegnarne di tuoi usando gli stati di visualizzazione.You can even opt out of the system-provided focus visuals by drawing your own using visual states. Per saperne di più, vedi VisualState.To learn more, see VisualState.

Sovrimpressione che scompare quando si tocca lo schermoLight dismiss overlay

Per richiamare l'attenzione dell'utente sugli elementi dell'interfaccia utente che l'utente sta attualmente manipolando con il controller del gioco o il controllo remoto, UWP aggiunge automaticamente un livello di "fumo" che copre le aree esterne all'interfaccia utente popup quando l'app è in esecuzione su Xbox One.To call the user's attention to the UI elements that the user is currently manipulating with the game controller or remote control, UWP automatically adds a "smoke" layer that covers areas outside of the popup UI when the app is running on Xbox One. Questa operazione non richiede interventi aggiuntivi, ma è necessario tenerla presente durante la progettazione dell'interfaccia utente.This requires no extra work, but is something to keep in mind when designing your UI. Puoi impostare la proprietà LightDismissOverlayMode su qualsiasi FlyoutBase per abilitare o disabilitare lo strato di fumo. L'impostazione predefinita è Auto, che indica che è abilitato su Xbox e disabilitato altrove.You can set the LightDismissOverlayMode property on any FlyoutBase to enable or disable the smoke layer; it defaults to Auto, meaning that it is enabled on Xbox and disabled elsewhere. Per altre informazioni, vedi Elementi modali ed elementi che scompaiono quando si tocca lo schermo.For more information, see Modal vs light dismiss.

Attivazione dello stato attivoFocus engagement

L'attivazione dello stato attivo ha lo scopo di facilitare l'uso di un game pad o di un telecomando per l'interazione con un'app.Focus engagement is intended to make it easier to use a gamepad or remote to interact with an app.

Nota

L'impostazione dell'attivazione dello stato attivo non influisce sulla tastiera o su altri dispositivi di input.Setting focus engagement does not impact keyboard or other input devices.

Quando la proprietà IsFocusEngagementEnabled in un oggetto FrameworkElement è impostata su True, contrassegna il controllo come controllo che richiede l'attivazione dello stato attivo.When the property IsFocusEngagementEnabled on a FrameworkElement object is set to True, it marks the control as requiring focus engagement. L'utente deve pertanto premere il pulsante A/Seleziona per "attivare" il controllo e interagire con esso.This means that the user must press the A/Select button to "engage" the control and interact with it. Al termine, l'utente preme il pulsante B/Indietro per disattivare il controllo e uscire.When they are finished, they can press the B/Back button to disengage the control and navigate out of it.

Nota

IsFocusEngagementEnabled è una nuova API e non è ancora documentata.IsFocusEngagementEnabled is a new API and not yet documented.

Trapping dello stato attivoFocus trapping

Il trapping dello stato attivo avviene quando un utente tenta di esplorare l'interfaccia utente di un'app ma rimane "intrappolato" all'interno di un controllo, tanto che risulta difficile o perfino impossibile uscirne.Focus trapping is what happens when a user attempts to navigate an app's UI but becomes "trapped" within a control, making it difficult or even impossible to move outside of that control.

L'esempio seguente mostra un'interfaccia utente che crea il trapping dello stato attivo.The following example shows UI that creates focus trapping.

Pulsanti a sinistra e a destra di un dispositivo di scorrimento orizzontale

Se l'utente vuole passare dal pulsante sinistro al pulsante destro, sarebbe logico presupporre che debba solo premere due volte a destra sul D-pad o sul joystick sinistro.If the user wants to navigate from the left button to the right button, it would be logical to assume that all they'd have to do is press right on the D-pad/left stick twice. Tuttavia, se il dispositivo di scorrimento non richiede l'attivazione, si verifica quanto segue: quando l'utente preme la prima volta a destra, lo stato attivo si sposta al Slider e, quando preme nuovamente a destra, il punto di controllo del Slider si sposta a destra.However, if the Slider doesn't require engagement, the following behavior would occur: when the user presses right the first time, focus would shift to the Slider, and when they press right again, the Slider's handle would move to the right. Se l'utente continua a spostare il punto di controllo verso destra, non sarà in grado di accedere al pulsante.The user would keep moving the handle to the right and wouldn't be able to get to the button.

Sono disponibili vari approcci per risolvere questo problema.There are several approaches to getting around this issue. Una soluzione è progettare un layout diverso, analogo all'esempio dell'app immobiliare in Interazione e spostamento con stato attivo XY, in cui i pulsanti Indietro e Avanti sono stati spostati al di sopra del controllo ListView.One is to design a different layout, similar to the real estate app example in XY focus navigation and interaction where we relocated the Previous and Next buttons above the ListView. Il problema può essere risolto posizionando i controlli in verticale anziché in orizzontale come nell'immagine seguente.Stacking the controls vertically instead of horizontally as in the following image would solve the problem.

Pulsanti al di sopra e al di sotto di un dispositivo di scorrimento orizzontale

Ora l'utente può passare a ognuno dei controlli premendo sul D-pad o sul joystick sinistro verso l'alto e verso il basso e, quando il Slider ha lo stato attivo, può premere a sinistra e a destra per spostare il punto di controllo del Slider, come previsto.Now the user can navigate to each of the controls by pressing up and down on the D-pad/left stick, and when the Slider has focus, they can press left and right to move the Slider handle, as expected.

Un altro approccio per risolvere questo problema consiste nel richiedere l'attivazione del Slider.Another approach to solving this problem is to require engagement on the Slider. Se imposti IsFocusEngagementEnabled="True", il risultato sarà il seguente comportamento.If you set IsFocusEngagementEnabled="True", this will result in the following behavior.

Richiesta dell'attivazione dello stato attivo sul dispositivo di scorrimento in modo che l'utente possa passare al pulsante di destra

Quando il Slider richiede l'attivazione dello stato attivo, l'utente può accedere al pulsante di destra semplicemente premendo due volte a destra sul D-pad o sul joystick sinistro.When the Slider requires focus engagement, the user can get to the button on the right simply by pressing right on the D-pad/left stick twice. Si tratta di un'ottima soluzione in quanto non richiede alcuna correzione dell'interfaccia utente e produce il comportamento previsto.This solution is great because it requires no UI adjustment and produces the expected behavior.

Controlli degli elementiItems controls

Oltre al controllo Slider, sono presenti altri controlli che possono richiedere l'attivazione, ad esempio:Aside from the Slider control, there are other controls which you may want to require engagement, such as:

A differenza del controllo Slider, questi controlli non causano il trapping dello stato attivo al loro interno. Possono tuttavia causare problemi di usabilità quando contengono grandi quantità di dati.Unlike the Slider control, these controls don't trap focus within themselves; however, they can cause usability issues when they contain large amounts of data. Di seguito è riportato un esempio di un controllo ListView contenente una grande quantità di dati.The following is an example of a ListView that contains a large amount of data.

ListView con una grande quantità di dati e pulsanti al di sopra e al di sotto

Analogamente all'esempio del Slider, proviamo a spostarci dal pulsante nella parte superiore al pulsante nella parte inferiore con un game pad o un telecomando.Similar to the Slider example, let's try to navigate from the button at the top to the button at the bottom with a gamepad/remote. Se si parte con lo stato attivo sul pulsante nella parte superiore e si preme verso il basso sul D-pad o sul joystick, lo stato attivo verrà posizionato sul primo elemento del controllo ListView ("Elemento 1").Starting with focus on the top button, pressing down on the D-pad/stick will place the focus on the first item in the ListView ("Item 1"). Se l'utente preme nuovamente verso il basso, lo stato attivo si sposta sull'elemento successivo nell'elenco anziché sul pulsante nella parte inferiore.When the user presses down again, the next item in the list gets focus, not the button on the bottom. Per accedere al pulsante, l'utente deve prima spostarsi tra i diversi elementi del controllo ListView.To get to the button, the user must navigate through every item in the ListView first. Se il controllo ListView contiene una grande quantità di dati, l'esperienza utente potrebbe risultare non ottimale e poco pratica.If the ListView contains a large amount of data, this could be inconvenient and not an optimal user experience.

Per risolvere il problema, impostare la proprietà IsFocusEngagementEnabled="True" nel controllo ListView per richiederne l'attivazione.To solve this problem, set the property IsFocusEngagementEnabled="True" on the ListView to require engagement on it. In questo modo l'utente potrà ignorare velocemente il controllo ListView, semplicemente premendo verso il basso.This will allow the user to quickly skip over the ListView by simply pressing down. Tuttavia, l'utente non sarà in grado di scorrere l'elenco o di scegliere un elemento dall'elenco, a meno che non lo attivi premendo il pulsante A/Seleziona quando ha lo stato attivo e quindi premendo il pulsante B/Indietro per disattivarlo.However, they will not be able to scroll through the list or choose an item from it unless they engage it by pressing the A/Select button when it has focus, and then pressing the B/Back button to disengage.

ListView con attivazione richiesta

ScrollViewerScrollViewer

Il controllo ScrollViewer è leggermente diverso da questi controlli, in quanto ha speciali caratteristiche da tenere in considerazione.Slightly different from these controls is the ScrollViewer, which has its own quirks to consider. Se è presente un controllo ScrollViewer con contenuto che può essere attivato, per impostazione predefinita passare a ScrollViewer consentirà di spostarsi tra i relativi elementi che possono essere attivati.If you have a ScrollViewer with focusable content, by default navigating to the ScrollViewer will allow you to move through its focusable elements. Come nel controllo ListView, scorri ogni elemento per uscire da ScrollViewer.Like in a ListView, you must scroll through each item to navigate outside of the ScrollViewer.

Se ScrollViewer non dispone di contenuto attivabile — , ad esempio, se contiene solo testo — che è possibile impostare IsFocusEngagementEnabled="True" in modo che l'utente possa coinvolgere ScrollViewer utilizzando il pulsante a/seleziona .If the ScrollViewer has no focusable content—for example, if it only contains text—you can set IsFocusEngagementEnabled="True" so the user can engage the ScrollViewer by using the A/Select button. Dopo l'attivazione, l'utente può scorrere il testo usando la croce direzionale o la levetta sinistra e quindi premere il pulsante B/Indietro per disattivarlo al termine dell'operazione.After they have engaged, they can scroll through the text by using the D-pad/left stick, and then press the B/Back button to disengage when they're finished.

Un altro approccio consiste nell'impostare IsTabStop="True" su in ScrollViewer modo che l'utente non debba coinvolgere il controllo — che può semplicemente collocare lo stato attivo e quindi scorrerlo utilizzando l'elemento D-Pad/Left Stick se non sono presenti elementi attivabili all'interno di ScrollViewer .Another approach would be to set IsTabStop="True" on the ScrollViewer so that the user doesn't have to engage the control—they can simply place focus on it and then scroll by using the D-pad/left stick when there are no focusable elements within the ScrollViewer.

Valori predefiniti dell'attivazione dello stato attivoFocus engagement defaults

Alcuni controlli causano il trapping dello stato attivo abbastanza spesso da giustificare il fatto che per impostazione predefinita sia richiesta l'attivazione dello stato attivo, mentre per altri controlli l'attivazione dello stato attivo è disattivata per impostazione predefinita, ma possono trarre vantaggio dalla relativa attivazione.Some controls cause focus trapping commonly enough to warrant their default settings to require focus engagement, while others have focus engagement turned off by default but can benefit from turning it on. La tabella seguente elenca questi controlli e i relativi comportamenti predefiniti di attivazione dello stato attivo.The following table lists these controls and their default focus engagement behaviors.

ControlloControl Valore predefinito di attivazione dello stato attivoFocus engagement default
CalendarDatePickerCalendarDatePicker AttivatoOn
FlipViewFlipView DisattivatoOff
GridViewGridView DisattivatoOff
ListBoxListBox DisattivatoOff
ListViewListView DisattivatoOff
ScrollViewerScrollViewer DisattivatoOff
SemanticZoomSemanticZoom DisattivatoOff
Dispositivo di scorrimentoSlider AttivatoOn

Tutti gli altri controlli Windows non comporteranno alcuna modifica comportamentale o visiva quando IsFocusEngagementEnabled="True" .All other Windows controls will result in no behavioral or visual changes when IsFocusEngagementEnabled="True".

RiepilogoSummary

È possibile creare applicazioni Windows ottimizzate per un dispositivo o un'esperienza specifica, ma il piattaforma UWP (Universal Windows Platform) consente anche di compilare app che possono essere usate correttamente tra i dispositivi, sia in esperienze a 2 e 10 piedi, sia a prescindere dalla capacità dell'utente o del dispositivo di input.You can build Windows applications that are optimized for a specific device or experience, but the Universal Windows Platform also enables you to build apps that can be used successfully across devices, in both 2-foot and 10-foot experiences, and regardless of input device or user ability. L'uso dei consigli in questo articolo può garantire che l'app sia la stessa che può essere sia nella TV che in un PC.Using the recommendations in this article can ensure that your app is as good as it can be on both the TV and a PC.