Sdílet prostřednictvím

Fokus navigace pro klávesnici, gamepad, vzdálené ovládání a nástroje pro usnadnění přístupu

Klávesnice, vzdálená klávesnice a D-pad

Pomocí navigace zaostření můžete poskytovat komplexní a konzistentní prostředí interakce ve vašich aplikacích pro Windows a vlastních ovládacích prvcích pro intenzivní uživatele klávesnice, osoby s postižením a uživatele s dalšími nároky na přístupnost, stejně jako zážitek ze vzdálenosti 10 stop televizních obrazovek a konzole Xbox One.

Přehled

Fokus navigace se týká základního principu, který uživatelům umožňuje navigovat a interagovat s uživatelským rozhraním aplikace pro Windows pomocí klávesnice, gamepadu nebo dálkového ovládání.

Poznámka:

Vstupní zařízení se obvykle klasifikují jako polohovací zařízení, jako jsou dotykové ovládání, touchpad, pero a myš, a nepolohovací zařízení, jako je klávesnice, gamepad a dálkový ovladač.

Toto téma popisuje, jak optimalizovat aplikaci pro Windows a vytvářet vlastní interakční prostředí pro uživatele, kteří spoléhají na neukazovací vstupní typy.

I když se zaměřujeme na zadávání z klávesnice pro vlastní ovládací prvky v aplikacích pro Windows na počítačích, dobře navržené prostředí klávesnice je také důležité pro softwarové klávesnice, jako je dotyková klávesnice a klávesnice na obrazovce (OSK), podporu nástrojů pro usnadnění přístupu, jako je Windows Narrator, a podporu prostředí určeného k ovládání na vzdálenost 10 stop.

Pokyny k vytváření vlastních interakcí v aplikacích pro Windows pro ukazovací zařízení najdete v tématu Zpracování vstupu ukazatele.

Další obecné informace o vytváření aplikací a prostředí pro klávesnici naleznete v tématu Interakce s klávesnicí.

Obecné pokyny

Pouze prvky uživatelského rozhraní, které vyžadují interakci uživatele, by měly podporovat navigaci fokusem, prvky, které nevyžadují akci, jako jsou statické obrázky, nepotřebují fokus klávesnice. Čtečky obrazovky a podobné nástroje přístupnosti stále oznamují i tyto statické prvky, i když nejsou součástí navigace zaostření.

Je důležité si uvědomit, že na rozdíl od navigace se zařízením ukazatele, jako je myš nebo dotykové ovládání, je navigace pomocí fokusu lineární. Při implementaci navigace fokusu zvažte, jak bude uživatel pracovat s vaší aplikací a jaká by měla být logická navigace. Ve většině případů doporučujeme, aby vlastní chování fokus navigace následovalo preferovaný způsob čtení podle kultury uživatele.

Mezi další důležité informace o navigaci fokusu patří:

  • Jsou ovládací prvky seskupené logicky?
  • Existují skupiny ovládacích prvků s větší důležitostí?
    • Pokud ano, obsahují tyto skupiny dílčí skupiny?
  • Vyžaduje rozložení vlastní směrovou navigaci (šipkové klávesy) a pořadí ovládacích prvků?

Technický software pro usnadnění přístupu obsahuje vynikající kapitolu o návrhu logické hierarchie.

2D směrová navigace pro klávesnici

2D vnitřní navigační oblast ovládacího prvku nebo skupiny ovládacích prvků se označuje jako její "směrová oblast". Když se fokus přesune na tento objekt, můžete pomocí kláves se šipkami klávesnice (vlevo, vpravo, nahoru a dolů) přecházet mezi podřízenými prvky v rámci směrové oblasti.

směrová oblast 2D Vnitřní navigační oblast nebo směrová oblast řídicí skupiny

Ke správě 2D vnitřní navigace pomocí kláves se šipkami klávesnice můžete použít vlastnost XYFocusKeyboardNavigation (která má možné hodnoty Auto, Enabled nebo Disabled).

Poznámka:

Tato vlastnost nemá vliv na pořadí ovládacích prvků. Abyste se vyhnuli matoucímu navigačnímu prostředí, doporučujeme, aby podřízené prvky směrové oblasti nebyly explicitně zadány v pořadí navigace na kartách vaší aplikace. Další podrobnosti o chování prvku najdete ve vlastnostech UIElement.TabFocusNavigation a TabIndex .

Automatické (výchozí chování)

Při nastavení na hodnotu Auto je směrové navigační chování určeno ancestry elementu nebo hierarchií dědičnosti. Pokud jsou všechny nadřazené položky ve výchozím režimu (nastavené na Auto), směrová navigace pomocí klávesnice není podporována.

Disabled

Nastavte XYFocusKeyboardNavigation na Zakázáno, aby se zablokovala směrová navigace na ovládací prvek a jeho podřízené prvky.

XYFocusKeyboardNavigation deaktivované chování XYFocusKeyboardNavigation deaktivované chování

V tomto příkladu má primární Objekt StackPanel (ContainerPrimary) XYFocusKeyboardNavigation nastaven na Povoleno. Toto nastavení dědí všechny podřízené prvky a lze je procházet pomocí kláves se šipkami. Prvky B3 a B4 jsou však v sekundárním objektu StackPanel (ContainerSecondary) s XYFocusKeyboardNavigation nastaveným na Zakázáno, což přepíše primární kontejner a zakáže navigaci pomocí kláves se šipkami na sebe a mezi jeho podřízenými prvky.

<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>

Enabled

Nastavte XYFocusKeyboardNavigation na Povoleno pro podporu 2D směrové navigace na ovládací prvek a každý z jeho podřízených objektů UIElement.

Při nastavení je navigace pomocí kláves se šipkami omezena na prvky v rámci směrové oblasti. Navigace na kartách není ovlivněná, protože všechny ovládací prvky zůstanou přístupné prostřednictvím hierarchie pořadí záložek.

Povolené chování XYFocusKeyboardNavigation Povolené chování XYFocusKeyboardNavigation

V tomto příkladu má primární Objekt StackPanel (ContainerPrimary) XYFocusKeyboardNavigation nastaven na Povoleno. Toto nastavení dědí všechny podřízené prvky a lze je procházet pomocí kláves se šipkami. Elementy B3 a B4 jsou v sekundárním objektu StackPanel (ContainerSecondary), kde XYFocusKeyboardNavigation není nastaveno, což pak dědí nastavení primárního kontejneru. Prvek B5 není v deklarované směrové oblasti a nepodporuje navigaci pomocí kláves se šipkami, ale podporuje standardní chování navigace tabulátorem.

<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>

Můžete mít více úrovní vnořených směrových oblastí. Pokud mají všechny nadřazené prvky nastaveno XYFocusKeyboardNavigation na Povoleno, ignorují se hranice oblasti vnitřní navigace.

Tady je příklad dvou vnořených směrových oblastí uvnitř elementu, který explicitně nepodporuje 2D směrovou navigaci. V tomto případě není navigace směrem mezi těmito dvěma vnořenými oblastmi podporována.

XYFocusKeyboardNavigation je povolena a má vnořené chování XYFocusKeyboardNavigation je povolena a má vnořené chování

Tady je složitější příklad tří vnořených směrových oblastí, kde:

  • Pokud má B1 fokus, lze přejít pouze na B5 (a naopak), protože existuje směrová oblast s hranicí, kde je XYFocusKeyboardNavigation nastaveno na Zakázáno, takže B2, B3 a B4 jsou nedostupné pomocí kláves se šipkami.
  • Když je fokus B2, lze přejít pouze na B3 (a naopak), protože směrová hranice oblasti brání navigaci pomocí kláves se šipkami na B1, B4 a B5.
  • Pokud je fokus B4, musí být klávesa Tab použita k navigaci mezi ovládacími prvky.

XYFocusKeyboardNavigation povolené a složité vnořené chování

XYFocusKeyboardNavigation povoleno a složité vnořené chování

Navigace mezi kartami

Klávesy se šipkami se dají použít pro 2D směrovou navigaci ve tvaru ovládacího prvku nebo skupiny ovládacích prvků, ale pomocí klávesy Tab můžete přecházet mezi všemi ovládacími prvky v aplikaci pro Windows.

Všechny interaktivní ovládací prvky ve výchozím nastavení podporují navigaci pomocí kláves Tab (vlastnost IsEnabled a IsTabStop jsou true) s logickým pořadím ovládacích prvků odvozeným z rozložení ovládacího prvku ve vaší aplikaci. Výchozí pořadí však nemusí nutně odpovídat pořadí vizuálů. Skutečná pozice zobrazení může záviset na nadřazeném kontejneru rozložení a na určitých vlastnostech, které můžete nastavit u podřízených prvků, aby ovlivnily rozložení.

Vyhněte se vlastnímu pořadí ovládacích prvků, díky kterému se fokus v aplikaci přeskakuje. Například seznam ovládacích prvků ve formuláři by měl mít pořadí ovládacích prvků, které prochází shora dolů a zleva doprava (v závislosti na národním prostředí).

V této části popisujeme, jak se dá toto pořadí ovládacích prvků plně přizpůsobit tak, aby vyhovovalo vaší aplikaci.

Nastavte chování navigace na záložkách

Vlastnost TabFocusNavigation u prvku UIElement specifikuje chování navigace tabulátorem pro celý jeho strom objektů (nebo směrovou oblast).

Poznámka:

Tuto vlastnost použijte místo Control.TabNavigation pro objekty, které nepoužívají ControlTemplate k definování svého vzhledu.

Jak jsme zmínili v předchozí části, abychom se vyhnuli matoucímu navigačnímu prostředí, doporučujeme, aby podřízené prvky směrové oblasti nebyly explicitně zadány v pořadí navigace na kartách vaší aplikace. Další podrobnosti o chování prvku najdete ve vlastnostech UIElement.TabFocusNavigation a TabIndex .

U verzí starších než Windows 10 Creators Update (build 10.0.15063) bylo nastavení záložek omezené na objekty ControlTemplate. Další informace najdete v tématu Control.TabNavigation.

TabFocusNavigation má hodnotu typu KeyboardNavigationMode s následujícími možnými hodnotami (všimněte si, že tyto příklady nejsou vlastní skupiny ovládacích prvků a nevyžadují vnitřní navigaci pomocí kláves se šipkami):

  • Místní (výchozí) indexy záložek jsou rozpoznány na místním podstromu uvnitř kontejneru. V tomto příkladu je pořadí ovládacích prvků B1, B2, B3, B4, B5, B6, B7, B1.

    Chování navigace na kartě Místní

    Chování navigace na kartě 'Local'

  • Jednou Kontejner a všechny podřízené prvky obdrží fokus jednou. V tomto příkladu je pořadí ovládacích prvků B1, B2, B7, B1 (také se ukazuje vnitřní navigace pomocí šipkové klávesy).

    Chování navigace na kartě

    Chování navigace na kartě "Jednorázově"

  • Cyklus
    Fokus se vrátí k počátečnímu fokusovatelnému prvku uvnitř kontejneru. V tomto příkladu je pořadí ovládacích prvků B1, B2, B3, B4, B5, B6, B2...

    Chování navigace v záložce "Cyklus"

Tady je kód pro předchozí příklady (pomocí 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>

TabIndex

Pomocí tabIndex určete pořadí, ve kterém prvky obdrží fokus, když uživatel prochází ovládacími prvky pomocí klávesy Tab. Ovládací prvek s nižším indexem karty získá fokus před ovládacím prvkem s vyšším indexem.

Pokud ovládací prvek nemá zadaný parametr TabIndex , přiřadí se mu vyšší hodnota indexu, než je aktuální nejvyšší hodnota indexu (a nejnižší priorita) všech interaktivních ovládacích prvků ve stromu vizuálu na základě oboru.

Všechny podřízené prvky ovládacího prvku jsou považovány za obor a pokud jeden z těchto prvků má také podřízené prvky, jsou považovány za jiný obor. Jakákoli nejednoznačnost se vyřeší výběrem prvního prvku ve vizuálním stromu oboru.

Chcete-li vyloučit ovládací prvek z pořadí ovládacích prvků, nastavte Vlastnost IsTabStop na false.

Přepsat výchozí pořadí ovládacích prvků nastavením TabIndex vlastnost.

Poznámka:

TabIndex funguje stejně s UIElement.TabFocusNavigation i Control.TabNavigation.

Zde si ukážeme, jak může být fokus navigace ovlivněna vlastností TabIndex u konkrétních prvků.

Navigace na kartě Místní s chováním TabIndex

Navigace na záložce "Místní" s chováním TabIndex

V předchozím příkladu existují dva obory:

  • B1, směrová oblast (B2 - B6) a B7
  • směrová plocha (B2 - B6)

Když B3 v oblasti směru získá pozornost, rozsah se změní a navigace tabulátorem se přesune do směrové oblasti, kde je identifikován nejlepší kandidát pro následné zaostření. V tomto případě B2, za nímž následují B4, B5 a B6. Rozsah se pak znovu změní a fokus se přesune na B1.

Tady je kód pro tento příklad.

<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>

2D směrová navigace pro klávesnici, gamepad a dálkové ovládání

Vstupní typy bez ukazatele, jako jsou klávesnice, gamepad, dálkové ovládání a nástroje pro usnadnění přístupu, jako je Předčítání systému Windows, mají společný, základní mechanismus pro navigaci a interakci s uživatelským rozhraním aplikace pro Windows.

V této části se podíváme na to, jak určit upřednostňovanou navigační strategii a doladit navigaci fokusem v rámci vaší aplikace prostřednictvím sady vlastností navigační strategie, které podporují všechny typy vstupu bez ukazatele.

Další obecné informace o vytváření aplikací a prostředí pro Xbox/TV najdete v tématu Interakce s klávesnicí, navrhování pro Xbox a TV a interakce gamepadu a vzdáleného ovládání.

Strategie navigace se vztahují na klávesnici, gamepad, vzdálené ovládání a různé nástroje pro usnadnění přístupu.

Následující vlastnosti navigační strategie umožňují ovlivnit, který ovládací prvek dostane fokus na základě šipkové klávesy, tlačítka směrového panelu (D-pad) nebo podobného stisknutí.

  • XYFocusUpNavigationStrategy
  • Strategie navigace zaměření dolů XY
  • XYFocusLeftNavigationStrategy
  • XYFocusRightNavigationStrategy

Tyto vlastnosti mají možné hodnoty Auto (výchozí), NavigationDirectionDistance, Projekce nebo RectilinearDistance .

Pokud je nastavena na hodnotu Auto, chování prvku je založeno na nadřazených součástech prvku. Pokud jsou všechny prvky nastaveny na hodnotu Auto, použije se projekce .

Poznámka:

Výsledek můžou ovlivnit jiné faktory, například dříve zaměřený prvek nebo blízkost k ose navigačního směru.

Projection

Strategie projekce přesune fokus na první prvek, na který se narazí, když se okraj aktuálně zaměřeného prvku promítne ve směru navigace.

V tomto příkladu je každý směr navigace fokusu nastavený na Projekce. Všimněte si, jak se fokus přesune z B1 na B4 a vynechá B3. Důvodem je to, že B3 není v projekční zóně. Všimněte si také, že kandidát na zaostření není při přechodu z B1 rozpoznán. Důvodem je to, že pozice B2 vzhledem k B1 eliminuje B3 jako kandidát. Pokud by B3 byl ve stejném řádku jako B2, byl by to vhodný kandidát pro levou navigaci. B2 je vhodným kandidátem díky nebráněné blízkosti navigační osy.

Strategie projekční navigace

Strategie projekční navigace

Strategie NavigationDirectionDistance přesune fokus na prvek nejblíže ose navigačního směru.

Hrana ohraničujícího obdélníku odpovídající navigačnímu směru je rozšířena a promítnuta k identifikaci potenciálních cílů. První zjištěný prvek je identifikován jako cíl. V případě více kandidátů je nejbližší prvek identifikován jako cíl. Pokud stále existuje více kandidátů, je jako kandidát identifikován nejvyšší nebo levý prvek.

Navigační strategie NavigationDirectionDistance

Strategie navigace NavigationDirectionDistance

RetilinearDistance

Strategie RectilinearDistance přesune fokus na nejbližší prvek na základě 2D rectilineární vzdálenosti (geometrie Taxicab).

Součet primární vzdálenosti a sekundární vzdálenosti k jednotlivým potenciálním kandidátům se používá k identifikaci nejlepšího kandidáta. V případě shody je první prvek vlevo vybrán, pokud je požadovaný směr nahoru nebo dolů, a první prvek nahoře je vybrán, pokud je požadovaný směr doprava nebo doleva.

Navigační strategie RectilinearDistance

Strategie navigace RectilinearDistance

Tento obrázek ukazuje, že když má B1 fokus a požadovaný směr je dolů, B3 je kandidátem na focus RectilinearDistance. Toto je založeno na následujících výpočtech v tomto příkladu:

  • Vzdálenost (B1, B3, Dolů) je 10 + 0 = 10
  • Vzdálenost (B1, B2, Dolů) je 0 + 40 = 30
  • Vzdálenost (B1, D, Dolů) je 30 + 0 = 30
  • Last updated on