Spostamento dello stato attivo per tastiera, gamepad, controllo remoto e strumenti di accessibilitàFocus navigation for keyboard, gamepad, remote control, and accessibility tools

Tastiera, remote e D-Pad

USA lo spostamento dello stato attivo per offrire esperienze di interazione complete e coerenti con le app di Windows e i controlli personalizzati per gli utenti esperti di tastiera, quelli con disabilità e altri requisiti di accessibilità, nonché l'esperienza a 10 piedi degli schermi televisivi e la Xbox One.Use focus navigation to provide comprehensive and consistent interaction experiences in your Windows apps and custom controls for keyboard power users, those with disabilities and other accessibility requirements, as well as the 10-foot experience of television screens and the Xbox One.

PanoramicaOverview

Lo spostamento dello stato attivo si riferisce al meccanismo sottostante che consente agli utenti di spostarsi e interagire con l'interfaccia utente di un'applicazione Windows utilizzando una tastiera, un gamepad o un controllo remoto.Focus navigation refers to the underlying mechanism that enables users to navigate and interact with the UI of a Windows application using a keyboard, gamepad, or remote control.

Nota

I dispositivi di input vengono in genere classificati come dispositivi di puntamento, ad esempio touch, touchpad, Pen, mouse e dispositivi non di puntamento, come tastiera, gamepad e controllo remoto.Input devices are typically classified as pointing devices, such as touch, touchpad, pen, and mouse, and non-pointing devices, such as keyboard, gamepad, and remote control.

In questo argomento viene descritto come ottimizzare un'applicazione Windows e creare esperienze di interazione personalizzate per gli utenti che si basano su tipi di input che non puntano.This topic describes how to optimize a Windows application and build custom interaction experiences for users that rely on non-pointing input types.

Anche se ci si concentra sull'input della tastiera per i controlli personalizzati nelle app di Windows nei PC, un'esperienza di tastiera ben progettata è importante anche per le tastiere software, ad esempio la tastiera touch e la tastiera su schermo (OSK), per il supporto di strumenti di accessibilità come l'Assistente vocale di Windows e il supporto dell'esperienza a 10 piedi.Even though we focus on keyboard input for custom controls in Windows apps on PCs, a well-designed keyboard experience is also important for software keyboards such as the touch keyboard and the On-Screen Keyboard (OSK), supporting accessibility tools such as Windows Narrator, and supporting the 10-foot experience.

Vedere gestire l'input del puntatore per informazioni aggiuntive sulla creazione di esperienze personalizzate nelle applicazioni Windows per puntare i dispositivi.See Handle pointer input for guidance on building custom experiences in Windows applications for pointing devices.

Per informazioni generali sulla creazione di app ed esperienze per la tastiera, vedere interazione da tastiera.For more general information on building apps and experiences for keyboard, see Keyboard Interaction.

Indicazioni generaliGeneral guidance

Solo gli elementi dell'interfaccia utente che richiedono l'interazione dell'utente devono supportare la navigazione dello stato attivo, mentre gli elementi che non richiedono un'azione, ad esempio immagini statiche, non necessitano dello stato attivo della tastiera.Only those UI elements that require user interaction should support focus navigation, elements that don’t require an action, such as static images, do not need keyboard focus. Le utilità per la lettura dello schermo e gli strumenti di accessibilità simili ancora annunciano questi elementi statici, anche quando non sono inclusi nello spostamento dello stato attivo.Screen readers and similar accessibility tools still announce these static elements, even when they are not included in focus navigation.

È importante ricordare che, a differenza della navigazione con un dispositivo puntatore, ad esempio un mouse o un tocco, la navigazione dello stato attivo è lineare.It is important to remember that unlike navigating with a pointer device such as a mouse or touch, focus navigation is linear. Quando si implementa l'esplorazione dello stato attivo, valutare la modalità di interazione di un utente con l'applicazione e il tipo di esplorazione logica.When implementing focus navigation, consider how a user will interact with your application and what the logical navigation should be. Nella maggior parte dei casi, si consiglia il comportamento di esplorazione dello stato attivo personalizzato seguendo il modello di lettura preferito delle impostazioni cultura dell'utente.In most cases, we recommend custom focus navigation behavior follows the preferred reading pattern of the user's culture.

Di seguito sono riportate alcune considerazioni relative alla navigazioneSome other focus navigation considerations include:

  • I controlli sono raggruppati logicamente?Are controls grouped logically?
  • Sono presenti gruppi di controlli con maggiore importanza?Are there groups of controls with greater importance?
    • In caso affermativo, tali gruppi contengono gruppi secondari?If yes, do those groups contain sub-groups?
  • Il layout richiede la navigazione direzionale personalizzata (tasti di direzione) e l'ordine di tabulazione?Does the layout require custom directional navigation (arrow keys) and tab order?

Il Software Engineering for Accessibility ebook è un ottimo capitolo sulla progettazione della gerarchia logica .The Engineering Software for Accessibility eBook has an excellent chapter on Designing the Logical Hierarchy .

navigazione direzionale 2D per tastiera2D directional navigation for keyboard

L'area di navigazione interna 2D di un controllo, o gruppo di controllo, viene definita "area direzionale".The 2D inner navigation region of a control, or control group, is referred to as its "directional area". Quando lo stato attivo passa a questo oggetto, i tasti di direzione della tastiera (a sinistra, a destra, verso l'alto e verso il basso) possono essere usati per spostarsi tra gli elementi figlio all'interno dell'area direzionale.When focus shifts to this object, the keyboard arrow keys (left, right, up, and down) can be used to navigate between child elements within the directional area.

area direzionale 2D area di navigazione interna o area direzionale di un gruppo di controllodirectional area 2D Inner navigation region, or directional area, of a control group

È possibile usare la proprietà XYFocusKeyboardNavigation (che ha i possibili valori di auto, Enabledo disabled) per gestire la navigazione interna 2D con i tasti di direzione della tastiera.You can use the XYFocusKeyboardNavigation property (which has possible values of Auto, Enabled, or Disabled) to manage 2D inner navigation with the keyboard arrow keys.

Nota

L'ordine di tabulazione non è influenzato da questa proprietà.Tab order is not affected by this property. Per evitare un'esperienza di navigazione confusa, è consigliabile che gli elementi figlio di un'area direzionale non siano specificati in modo esplicito nell'ordine di spostamento tramite tabulazione dell'applicazione.To avoid a confusing navigation experience, we recommend that child elements of a directional area not be explicitly specified in the tab navigation order of your application. Per informazioni dettagliate sul comportamento di tabulazione per un elemento, vedere le proprietà UIElement. TabFocusNavigation e TabIndex .See the UIElement.TabFocusNavigation and TabIndex properties for more detail on tabbing behavior for an element.

Automatico (comportamento predefinito)Auto (default behavior)

Quando è impostato su auto, il comportamento di navigazione direzionale è determinato dall'ascendenza dell'elemento o dalla gerarchia di ereditarietà.When set to Auto, directional navigation behavior is determined by the element’s ancestry, or inheritance hierarchy. Se tutti i predecessori sono in modalità predefinita (impostata su automatico ), la navigazione direzionale con la tastiera non è supportata.If all ancestors are in default mode (set to Auto ), directional navigation with the keyboard is not supported.

DisabilitatoDisabled

Impostare XYFocusKeyboardNavigation su disabled per bloccare la navigazione direzionale al controllo e ai relativi elementi figlio.Set XYFocusKeyboardNavigation to Disabled to block directional navigation to the control and its child elements.

Comportamento disabilitato di XYFocusKeyboardNavigation XYFocusKeyboardNavigation comportamento disabilitatoXYFocusKeyboardNavigation disabled behavior XYFocusKeyboardNavigation disabled behavior

In questo esempio, l'elemento StackPanel primario (ContainerPrimary) ha XYFocusKeyboardNavigation impostato su Enabled .In this example, the primary StackPanel (ContainerPrimary) has XYFocusKeyboardNavigation set to Enabled . Tutti gli elementi figlio ereditano questa impostazione e possono essere spostati con i tasti di direzione.All child elements inherit this setting, and can be navigated to with the arrow keys. Tuttavia, gli elementi B3 e B4 si trovano in un StackPanel secondario (ContainerSecondary) con XYFocusKeyboardNavigation impostato su disabled , che esegue l'override del contenitore primario e Disabilita la navigazione dei tasti di direzione a se stessa e tra gli elementi figlio.However, the B3 and B4 elements are in a secondary StackPanel (ContainerSecondary) with XYFocusKeyboardNavigation set to Disabled , which overrides the primary container and disables arrow key navigation to itself and between its child elements.

<Grid 
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
    TabFocusNavigation="Cycle">
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="75"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Name="KeyPressed"
                Grid.Row="0" 
                FontWeight="ExtraBold" 
                HorizontalTextAlignment="Center"
                TextWrapping="Wrap" 
                Padding="10" />
    <StackPanel Name="ContainerPrimary" 
                XYFocusKeyboardNavigation="Enabled" 
                KeyDown="ContainerPrimary_KeyDown" 
                Orientation="Horizontal" 
                BorderBrush="Green" 
                BorderThickness="2" 
                Grid.Row="1" 
                Padding="10" 
                MaxWidth="200">
        <Button Name="B1" 
                Content="B1" 
                GettingFocus="Btn_GettingFocus" />
        <Button Name="B2" 
                Content="B2" 
                GettingFocus="Btn_GettingFocus" />
        <StackPanel Name="ContainerSecondary" 
                    XYFocusKeyboardNavigation="Disabled" 
                    Orientation="Horizontal" 
                    BorderBrush="Red" 
                    BorderThickness="2">
            <Button Name="B3" 
                    Content="B3" 
                    GettingFocus="Btn_GettingFocus" />
            <Button Name="B4" 
                    Content="B4" 
                    GettingFocus="Btn_GettingFocus" />
        </StackPanel>
    </StackPanel>
</Grid>

EnabledEnabled

Impostare XYFocusKeyboardNavigation su Enabled per supportare la navigazione direzionale 2D per un controllo e ognuno dei relativi oggetti UIElement figlio.Set XYFocusKeyboardNavigation to Enabled to support 2D directional navigation to a control and each of its UIElement child objects.

Se impostato, la navigazione con i tasti di direzione è limitata agli elementi all'interno dell'area direzionale.When set, navigation with the arrow keys is restricted to elements within the directional area. La navigazione tramite TAB non è interessata, perché tutti i controlli rimangono accessibili tramite la gerarchia dell'ordine di tabulazione.Tab navigation is not affected, as all controls remain accessible through their tab order hierarchy.

Comportamento abilitato per XYFocusKeyboardNavigation XYFocusKeyboardNavigation comportamento abilitatoXYFocusKeyboardNavigation enabled behavior XYFocusKeyboardNavigation enabled behavior

In questo esempio, l'elemento StackPanel primario (ContainerPrimary) ha XYFocusKeyboardNavigation impostato su Enabled .In this example, the primary StackPanel (ContainerPrimary) has XYFocusKeyboardNavigation set to Enabled . Tutti gli elementi figlio ereditano questa impostazione e possono essere spostati con i tasti di direzione.All child elements inherit this setting, and can be navigated to with the arrow keys. Gli elementi B3 e B4 si trovano in un StackPanel secondario (ContainerSecondary) in cui XYFocusKeyboardNavigation non è impostato, che quindi eredita l'impostazione del contenitore primario.The B3 and B4 elements are in a secondary StackPanel (ContainerSecondary) where XYFocusKeyboardNavigation is not set, which then inherits the primary container setting. L'elemento B5 non si trova all'interno di un'area direzionale dichiarata e non supporta la navigazione con i tasti di direzione ma supporta il comportamento di navigazione standard della scheda.The B5 element is not within a declared directional area, and does not support arrow key navigation but does support standard tab navigation behavior.

<Grid
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    TabFocusNavigation="Cycle">
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="100"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Name="KeyPressed"
               Grid.Row="0"
               FontWeight="ExtraBold"
               HorizontalTextAlignment="Center"
               TextWrapping="Wrap"
               Padding="10" />
    <StackPanel Grid.Row="1"
                Orientation="Horizontal"
                HorizontalAlignment="Center">
        <StackPanel Name="ContainerPrimary"
                    XYFocusKeyboardNavigation="Enabled"
                    KeyDown="ContainerPrimary_KeyDown"
                    Orientation="Horizontal"
                    BorderBrush="Green"
                    BorderThickness="2"
                    Padding="5" Margin="5">
            <Button Name="B1"
                    Content="B1"
                    GettingFocus="Btn_GettingFocus" Margin="5" />
            <Button Name="B2"
                    Content="B2"
                    GettingFocus="Btn_GettingFocus" />
            <StackPanel Name="ContainerSecondary"
                        Orientation="Horizontal"
                        BorderBrush="Red"
                        BorderThickness="2"
                        Margin="5">
                <Button Name="B3"
                        Content="B3"
                        GettingFocus="Btn_GettingFocus"
                        Margin="5" />
                <Button Name="B4"
                        Content="B4"
                        GettingFocus="Btn_GettingFocus"
                        Margin="5" />
            </StackPanel>
        </StackPanel>
        <Button Name="B5"
                Content="B5"
                GettingFocus="Btn_GettingFocus"
                Margin="5" />
    </StackPanel>
</Grid>

È possibile avere più livelli di aree direzionali nidificate.You can have multiple levels of nested directional areas. Se tutti gli elementi padre hanno XYFocusKeyboardNavigation impostato su Enabled, i limiti dell'area di navigazione interna vengono ignorati.If all parent elements have XYFocusKeyboardNavigation set to Enabled, inner navigation region boundaries are ignored.

Di seguito è riportato un esempio di due aree direzionali annidate all'interno di un elemento che non supporta in modo esplicito la navigazione direzionale 2D.Here's an example of two nested directional areas within an element that does not explicitly support 2D directional navigation. In questo caso, la navigazione direzionale non è supportata tra le due aree nidificate.In this case, directional navigation is not supported between the two nested areas.

Comportamento XYFocusKeyboardNavigation abilitato e annidato XYFocusKeyboardNavigation abilitato e comportamento annidatoXYFocusKeyboardNavigation enabled and nested behavior XYFocusKeyboardNavigation enabled and nested behavior

Di seguito è riportato un esempio più complesso di tre aree direzionali nidificate in cui:Here’s a more complex example of three nested directional areas where:

  • Quando B1 ha lo stato attivo, solo B5 può essere navigato a (e viceversa) perché esiste un limite di area direzionale in cui XYFocusKeyboardNavigation è impostato su disabled, rendendo B2, B3 e B4 non raggiungibile con i tasti di direzioneWhen B1 has focus, only B5 can be navigated to (and vice versa) because there is a directional area boundary where XYFocusKeyboardNavigation set to Disabled, making B2, B3, and B4 unreachable with the arrow keys
  • Quando B2 ha lo stato attivo, è possibile spostarsi solo con B3 (e viceversa) perché il limite dell'area direzionale impedisce la navigazione del tasto freccia a B1, B4 e B5When B2 has focus, only B3 can be navigated to (and vice versa) because the directional area boundary prevents arrow key navigation to B1, B4, and B5
  • Quando B4 ha lo stato attivo, è necessario usare il tasto TAB per spostarsi tra i controlliWhen B4 has focus, the Tab key must be used to navigate between controls

XYFocusKeyboardNavigation abilitato e comportamento annidato complesso

XYFocusKeyboardNavigation abilitato e comportamento annidato complessoXYFocusKeyboardNavigation enabled and complex nested behavior

Navigazione tramite TABTab navigation

Mentre è possibile usare i tasti di direzione per la navigazione direzionale 2D witin un controllo o un gruppo di controllo, il tasto Tab può essere usato per spostarsi tra tutti i controlli in un'applicazione Windows.While the arrow keys can be used for 2D directional navigation witin a control, or control group, the Tab key can be used to navigate between all controls in a Windows application.

Per impostazione predefinita, tutti i controlli interattivi supportano la navigazione con chiavi di tabulazione (la proprietà IsEnabled e IsTabStop è true ), con l'ordine di tabulazione logico derivato dal layout del controllo nell'applicazione.All interactive controls support Tab key navigation by default ( IsEnabled and IsTabStop property are true ), with the logical tab order derived from the control layout in your application. Tuttavia l'ordine predefinito non corrisponde necessariamente all'ordine visivo.However, the default order does not necessarily correspond to the visual order. La posizione di visualizzazione effettiva dipende dal contenitore padre del layout e da alcune proprietà che puoi impostare per gli elementi figlio, in modo da influenzare il layout.The actual display position might depend on the parent layout container and certain properties that you can set on the child elements to influence the layout.

Evitare un ordine di tabulazione personalizzato che consente di spostarsi all'interno dell'applicazione.Avoid a custom tab order that makes the focus jump around in your application. Ad esempio, un elenco di controlli in un modulo deve avere un ordine di tabulazione che scorre dall'alto verso il basso e da sinistra a destra (a seconda delle impostazioni locali).For example, a list of controls in a form should have a tab order that flows from top to bottom and left to right (depending on locale).

In questa sezione viene descritto in che modo questo ordine di tabulazione può essere completamente personalizzato per adattarsi all'app.In this section we describe how this tab order can be fully customized to suit your app.

Imposta il comportamento di navigazione della schedaSet the tab navigation behavior

La proprietà TabFocusNavigation di UIElement specifica il comportamento di navigazione tramite TAB per l'intero albero degli oggetti (o area direzionale).The TabFocusNavigation property of UIElement specifies the tab navigation behavior for its entire object tree (or directional area).

Nota

Utilizzare questa proprietà anziché la proprietà Control. TabNavigation per gli oggetti che non utilizzano ControlTemplate per definirne l'aspetto.Use this property instead of the Control.TabNavigation property for objects that do not use a ControlTemplate to define their appearance.

Come indicato nella sezione precedente, per evitare un'esperienza di navigazione confusa, è consigliabile non specificare in modo esplicito gli elementi figlio di un'area direzionale nell'ordine di navigazione della scheda dell'applicazione.As we mentioned in the previous section, to avoid a confusing navigation experience, we recommend that child elements of a directional area not be explicitly specified in the tab navigation order of your application. Per informazioni più dettagliate sul comportamento di tabulazione per un elemento, vedere le proprietà UIElement. TabFocusNavigation e TabIndex .See the UIElement.TabFocusNavigation and the TabIndex properties for more detail on tabbing behavior for an element.

Per le versioni precedenti a Windows 10 Creators Update (Build 10.0.15063), le impostazioni delle schede erano limitate agli oggetti ControlTemplate .For versions older than Windows 10 Creators Update (build 10.0.15063), tab settings were limited to ControlTemplate objects. Per altre informazioni, vedere Control. TabNavigation.For more info, see Control.TabNavigation.

TabFocusNavigation ha un valore di tipo KeyboardNavigationMode con i valori possibili seguenti (si noti che questi esempi non sono gruppi di controlli personalizzati e non richiedono la navigazione interna con i tasti di direzione):TabFocusNavigation has a value of type KeyboardNavigationMode with the following possible values (note that these examples are not custom control groups and do not require inner navigation with the arrow keys):

  • Locale (impostazione predefinita)Local (default)
    Gli indici di tabulazione vengono riconosciuti nel sottoalbero locale all'interno del contenitore.Tab indexes are recognized on the local subtree inside the container. Per questo esempio, l'ordine di tabulazione è B1, B2, B3, B4, B5, B6, B7, B1.For this example, the tab order is B1, B2, B3, B4, B5, B6, B7, B1.

    Comportamento di navigazione della scheda "locale"

    Comportamento di navigazione della scheda "locale""Local" tab navigation behavior

  • Una voltaOnce
    Il contenitore e tutti gli elementi figlio ricevono lo stato attivo una sola volta.The container and all child elements receive focus once. Per questo esempio, l'ordine di tabulazione è B1, B2, B7, B1 (viene anche illustrata la navigazione interna con il tasto freccia).For this example, the tab order is B1, B2, B7, B1 (inner navigation with arrow key is also demonstrated).

    Comportamento di navigazione della scheda "once"

    Comportamento di navigazione della scheda "once""Once" tab navigation behavior

  • Ciclo Cycle
    Lo stato attivo viene riattivato nell'elemento attivo iniziale all'interno di un contenitore.Focus cycles back to the initial focusable element inside a container. Per questo esempio, l'ordine di tabulazione è B1, B2, B3, B4, B5, B6, B2...For this example, the tab order is B1, B2, B3, B4, B5, B6, B2...

    Comportamento di navigazione della scheda "ciclo"

    Comportamento di navigazione della scheda "ciclo""Cycle" tab navigation behavior

Ecco il codice per gli esempi precedenti (with TabFocusNavigation = "Cycle").Here's the code for the preceding examples (with TabFocusNavigation ="Cycle").

<Grid 
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
    TabFocusNavigation="Cycle">
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="300"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Name="KeyPressed"
               Grid.Row="0" 
               FontWeight="ExtraBold" 
               HorizontalTextAlignment="Center"
               TextWrapping="Wrap" 
               Padding="10" />
    <StackPanel Name="ContainerPrimary"
                KeyDown="Container_KeyDown" 
                Orientation="Horizontal" 
                HorizontalAlignment="Center"
                BorderBrush="Green" 
                BorderThickness="2" 
                Grid.Row="1" 
                Padding="10" 
                MaxWidth="200">
        <Button Name="B1" 
                Content="B1" 
                GettingFocus="Btn_GettingFocus" 
                Margin="5"/>
        <StackPanel Name="ContainerSecondary" 
                    KeyDown="Container_KeyDown"
                    XYFocusKeyboardNavigation="Enabled" 
                    TabFocusNavigation ="Cycle"
                    Orientation="Vertical" 
                    VerticalAlignment="Center"
                    BorderBrush="Red" 
                    BorderThickness="2"
                    Padding="5" Margin="5">
            <Button Name="B2" 
                    Content="B2" 
                    GettingFocus="Btn_GettingFocus" 
                    Margin="5"/>
            <Button Name="B3" 
                    Content="B3" 
                    GettingFocus="Btn_GettingFocus" 
                    Margin="5"/>
            <Button Name="B4" 
                    Content="B4" 
                    GettingFocus="Btn_GettingFocus" 
                    Margin="5"/>
            <Button Name="B5" 
                    Content="B5" 
                    GettingFocus="Btn_GettingFocus" 
                    Margin="5"/>
            <Button Name="B6" 
                    Content="B6" 
                    GettingFocus="Btn_GettingFocus" 
                    Margin="5"/>
        </StackPanel>
        <Button Name="B7" 
                Content="B7" 
                GettingFocus="Btn_GettingFocus" 
                Margin="5"/>
    </StackPanel>
</Grid>

TabIndexTabIndex

Usare TabIndex per specificare l'ordine in cui gli elementi ricevono lo stato attivo quando l'utente passa attraverso i controlli usando il tasto TAB.Use TabIndex to specify the order in which elements receive focus when the user navigates through controls using the Tab key. Un controllo con un indice di tabulazione inferiore riceve lo stato attivo prima di un controllo con un indice superiore.A control with a lower tab index receives focus before a control with a higher index.

Quando un controllo non ha un TabIndex specificato, viene assegnato un valore di indice più alto rispetto al valore di indice più alto corrente (e alla priorità più bassa) di tutti i controlli interattivi nella struttura ad albero visuale, in base all'ambito.When a control has no TabIndex specified, it is assigned a higher index value than the current highest index value (and the lowest priority) of all interactive controls in the visual tree, based on scope.

Tutti gli elementi figlio di un controllo sono considerati un ambito e se uno di questi elementi dispone anche di elementi figlio, vengono considerati un altro ambito.All child elements of a control are considered a scope, and if one of these elements also has child elements, they are considered another scope. Qualsiasi ambiguità viene risolta scegliendo il primo elemento nella struttura ad albero visuale dell'ambito.Any ambiguity is resolved by choosing the first element on the visual tree of the scope.

Per escludere un controllo dall'ordine di tabulazione, impostare la proprietà IsTabStop su false .To exclude a control from the tab order, set the IsTabStop property to false .

Eseguire l'override dell'ordine di tabulazione predefinito impostando la proprietà TabIndex .Override the default tab order by setting the TabIndex property.

Nota

TabIndex funziona allo stesso modo con UIElement. TabFocusNavigation e Control. TabNavigation.TabIndex works the same way with both UIElement.TabFocusNavigation and Control.TabNavigation.

In questo esempio viene illustrato il modo in cui la navigazione dello stato attivo può essere interessata dalla proprietà TabIndex su elementi specifici.Here, we show how focus navigation can be affected by the TabIndex property on specific elements.

Navigazione con la scheda "locale" con comportamento TabIndex

Navigazione con la scheda "locale" con comportamento TabIndex"Local" tab navigation with TabIndex behavior

Nell'esempio precedente sono presenti due ambiti:In the preceding example, there are two scopes:

  • B1, area direzionale (B2-B6) e B7B1, directional area (B2 - B6), and B7
  • area direzionale (B2-B6)directional area (B2 - B6)

Quando B3 (nell'area direzionale) ottiene lo stato attivo, l'ambito viene modificato e lo spostamento tramite tabulazione viene trasferito all'area direzionale in cui viene identificato il candidato migliore per lo stato attivo successivo.When B3 (in the directional area) gets focus, the scope changes and tab navigation transfers to the directional area where the best candidate for subsequent focus is identified. In questo caso, B2 seguito da B4, B5 e B6.In this case, B2 followed by B4, B5, and B6. L'ambito viene quindi nuovamente modificato e lo stato attivo passa a B1.Scope then changes again, and focus moves to B1.

Ecco il codice per questo esempio.Here's the code for this example.

<Grid
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    TabFocusNavigation="Cycle">
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="300"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Name="KeyPressed"
               Grid.Row="0"
               FontWeight="ExtraBold"
               HorizontalTextAlignment="Center"
               TextWrapping="Wrap"
               Padding="10" />
    <StackPanel Name="ContainerPrimary"
                KeyDown="Container_KeyDown"
                Orientation="Horizontal"
                HorizontalAlignment="Center"
                BorderBrush="Green"
                BorderThickness="2"
                Grid.Row="1"
                Padding="10"
                MaxWidth="200">
        <Button Name="B1"
                Content="B1"
                TabIndex="1"
                ToolTipService.ToolTip="TabIndex = 1"
                GettingFocus="Btn_GettingFocus"
                Margin="5"/>
        <StackPanel Name="ContainerSecondary"
                    KeyDown="Container_KeyDown"
                    TabFocusNavigation ="Local"
                    Orientation="Vertical"
                    VerticalAlignment="Center"
                    BorderBrush="Red"
                    BorderThickness="2"
                    Padding="5" Margin="5">
            <Button Name="B2"
                    Content="B2"
                    GettingFocus="Btn_GettingFocus"
                    Margin="5"/>
            <Button Name="B3"
                    Content="B3"
                    TabIndex="3"
                    ToolTipService.ToolTip="TabIndex = 3"
                    GettingFocus="Btn_GettingFocus"
                    Margin="5"/>
            <Button Name="B4"
                    Content="B4"
                    GettingFocus="Btn_GettingFocus"
                    Margin="5"/>
            <Button Name="B5"
                    Content="B5"
                    GettingFocus="Btn_GettingFocus"
                    Margin="5"/>
            <Button Name="B6"
                    Content="B6"
                    GettingFocus="Btn_GettingFocus"
                    Margin="5"/>
        </StackPanel>
        <Button Name="B7"
                Content="B7"
                TabIndex="2"
                ToolTipService.ToolTip="TabIndex = 2"
                GettingFocus="Btn_GettingFocus"
                Margin="5"/>
    </StackPanel>
</Grid>

navigazione direzionale 2D per tastiera, gamepad e controllo remoto2D directional navigation for keyboard, gamepad, and remote control

I tipi di input non puntatore, ad esempio tastiera, gamepad, controllo remoto e strumenti di accessibilità come assistente vocale di Windows, condividono un meccanismo comune sottostante per lo spostamento e l'interazione con l'interfaccia utente dell'applicazione Windows.Non-pointer input types such as keyboard, gamepad, remote control, and accessibility tools like Windows Narrator, share a common, underlying mechanism for navigating and interacting with the UI of your Windows application.

In questa sezione viene illustrato come specificare una strategia di esplorazione preferita e ottimizzare l'esplorazione dello stato attivo all'interno dell'applicazione tramite un set di proprietà della strategia di navigazione che supportano tutti i tipi di input non puntatore basati sullo stato attivo.In this section, we cover how to specify a preferred navigation strategy and fine tune focus navigation within your application through a set of navigation strategy properties that support all focus-based, non-pointer input types.

Per informazioni generali sulla creazione di app ed esperienze per Xbox/TV, vedere interazione da tastiera, progettazione per Xbox e TVe interazioni di controllo remoto e Gamepad.For more general information on building apps and experiences for Xbox/TV, see Keyboard Interaction, Designing for Xbox and TV, and Gamepad and remote control interactions.

Le strategie di navigazione sono applicabili alla tastiera, al gamepad, al controllo remoto e a diversi strumenti di accessibilità.Navigation strategies are applicable to keyboard, gamepad, remote control, and various accessibility tools.

Le proprietà della strategia di navigazione seguenti consentono di influenzare il controllo che riceve lo stato attivo in base al tasto di direzione, al pulsante del pad direzionale (D-Pad) o alla pressione simile.The following navigation strategy properties let you influence which control receives focus based on the arrow key, directional pad (D-pad) button, or similar pressed.

  • XYFocusUpNavigationStrategyXYFocusUpNavigationStrategy
  • XYFocusDownNavigationStrategyXYFocusDownNavigationStrategy
  • XYFocusLeftNavigationStrategyXYFocusLeftNavigationStrategy
  • XYFocusRightNavigationStrategyXYFocusRightNavigationStrategy

Queste proprietà hanno i possibili valori di auto (impostazione predefinita), NavigationDirectionDistance, projectiono RectilinearDistance .These properties have possible values of Auto (default), NavigationDirectionDistance, Projection, or RectilinearDistance .

Se impostato su auto , il comportamento dell'elemento è basato sui predecessori dell'elemento.If set to Auto , the behavior of the element is based on the ancestors of the element. Se tutti gli elementi sono impostati su auto , viene usata la proiezione .If all elements are set to Auto , Projection is used.

Nota

Altri fattori, ad esempio l'elemento precedentemente incentrato o la vicinanza all'asse della direzione di navigazione, possono influenzare il risultato.Other factors, such as the previously focused element or proximity to the axis of the navigation direction, can influence the result.

ProiezioneProjection

La strategia di proiezione sposta lo stato attivo sul primo elemento rilevato quando il bordo dell'elemento attualmente attivo viene proiettato nella direzione della navigazione.The Projection strategy moves focus to the first element encountered when the edge of the currently focused element is projected in the direction of navigation.

In questo esempio, ogni direzione di spostamento dello stato attivo è impostata sulla proiezione.In this example, each focus navigation direction is set to Projection. Si noti il modo in cui lo stato attivo si sposta da B1 a B4, ignorando B3.Notice how focus moves down from B1 to B4, bypassing B3. Il motivo è che B3 non si trova nell'area di proiezione.This is because, B3 is not in the projection zone. Si noti inoltre come un candidato attivo non venga identificato quando si sposta a sinistra da B1.Also notice how a focus candidate is not identified when moving left from B1. Questo perché la posizione di B2 rispetto a B1 Elimina B3 come candidato.This is because the position of B2 relative to B1 eliminates B3 as a candidate. Se B3 si trovava nella stessa riga di B2, sarebbe un candidato valido per la navigazione a sinistra.If B3 was in the same row as B2, it would be a viable candidate for left navigation. B2 è un candidato realizzabile a causa della vicinanza non ostruita all'asse della direzione di navigazione.B2 is a viable candidate due to its unobstructed proximity to the axis of navigation direction.

Strategia di esplorazione della proiezione

Strategia di esplorazione della proiezioneProjection navigation strategy

La strategia NavigationDirectionDistance sposta lo stato attivo sull'elemento più vicino all'asse della direzione di navigazione.The NavigationDirectionDistance strategy moves focus to the element closest to the axis of the navigation direction.

Il bordo del rettangolo di delimitazione che corrisponde alla direzione di navigazione viene esteso e proiettato per identificare le destinazioni candidate.The edge of the bounding rect corresponding to the navigation direction is extended and projected to identify candidate targets. Il primo elemento rilevato viene identificato come destinazione.The first element encountered is identified as the target. Nel caso di più candidati, l'elemento più vicino viene identificato come destinazione.In the case of multiple candidates, the closest element is identified as the target. Se sono ancora presenti più candidati, l'elemento più in alto/a sinistra viene identificato come candidato.If there are still multiple candidates, the topmost/leftmost element is identified as the candidate.

Strategia di navigazione NavigationDirectionDistance

Strategia di navigazione NavigationDirectionDistanceNavigationDirectionDistance navigation strategy

RectilinearDistanceRectilinearDistance

La strategia RectilinearDistance sposta lo stato attivo sull'elemento più vicino in base alla distanza rettilinea 2D (geometria del taxi).The RectilinearDistance strategy moves focus to the closest element based on 2D rectilinear distance (Taxicab geometry).

La somma della distanza primaria e della distanza secondaria a ogni potenziale candidato viene usata per identificare il candidtate accettiamo migliore.The sum of the primary distance and the secondary distance to each potential candidate is used to identify the best candidtate. In una cravatta, il primo elemento a sinistra viene selezionato se la direzione richiesta è verso l'alto o verso il basso e il primo elemento nella parte superiore viene selezionato se la direzione richiesta è sinistra o destra.In a tie, the first element to the left is selected if the requested direction is up or down, and the first element to the top is selected if the requested direction is left or right.

Strategia di navigazione RectilinearDistance

Strategia di navigazione RectilinearDistanceRectilinearDistance navigation strategy

Questa immagine mostra come, quando B1 ha lo stato attivo e il basso è la direzione richiesta, B3 è il candidato RectilinearDistance Focus.This image shows how, when B1 has focus and down is the requested direction, B3 is the RectilinearDistance focus candidate. Si basa sui seguenti calcualations per questo esempio:This is based on the following calcualations for this example:

  • Distanza (B1, B3, giù) è 10 + 0 = 10Distance (B1, B3, Down) is 10 + 0 = 10
  • Distanza (B1, B2, giù) è 0 + 40 = 30Distance (B1, B2, Down) is 0 + 40 = 30
  • Distanza (B1, D, giù) è 30 + 0 = 30Distance (B1, D, Down) is 30 + 0 = 30