Megjegyzés
Az oldalhoz való hozzáféréshez engedély szükséges. Megpróbálhat bejelentkezni vagy módosítani a címtárat.
Az oldalhoz való hozzáféréshez engedély szükséges. Megpróbálhatja módosítani a címtárat.
A fókusznavigációval átfogó és konzisztens interakciós élményt biztosíthat Windows-alkalmazásaiban és testreszabott vezérlőiben azon felhasználóknak, akik a billentyűzetet részesítik előnyben, fogyatékkal élőknek és akadálymentességi követelményekkel rendelkezőknek. Emellett biztosíthatja a televízióképernyőkön és Xbox One-on megvalósuló 10 lábnyi élményt.
Áttekintés
A fókusznavigáció az alapul szolgáló mechanizmusra utal, amely lehetővé teszi a felhasználók számára, hogy billentyűzet, játékpad vagy távvezérlés használatával navigáljanak és kommunikáljanak a Windows-alkalmazások felhasználói felületével.
Megjegyzés:
A bemeneti eszközök általában pontozási eszközökként vannak besorolva, például érintéses, érintőpados, toll- és egéreszközként, valamint nem mutató eszközökként, például billentyűzetként, gamepadként és távvezérlőként.
Ez a témakör azt ismerteti, hogyan optimalizálhat egy Windows-alkalmazást, és hogyan hozhat létre egyéni interakciós szolgáltatásokat a nem pontozásos bemeneti típusokra támaszkodó felhasználók számára.
Annak ellenére, hogy a pc-ken futó Windows-alkalmazásokban az egyéni vezérlők billentyűzetbemenetére összpontosítunk, a jól megtervezett billentyűzethasználat olyan szoftveres billentyűzetek esetében is fontos, mint az érintőbillentyűzet és a képernyő-billentyűzet (OSK), az akadálymentességi eszközök, például a Windows Narrátor támogatása és a 10 lábos felület támogatása.
Az eszközökre mutató windowsos alkalmazásokban az egyéni élmények készítésére vonatkozó útmutatásért tekintse meg a Mutató bemenetének kezelése című témakört.
A billentyűzethez készült alkalmazások és szolgáltatások készítéséről további információt a Billentyűzet-interakció című témakörben talál.
Általános útmutató
Csak a felhasználói beavatkozást igénylő felhasználói felületi elemek támogatják a fókusznavigációt, az olyan elemeknek, amelyek nem igényelnek műveletet, például statikus képeket, nincs szükségük billentyűzetfókuszra. A képernyőolvasók és a hasonló akadálymentességi eszközök továbbra is felolvassa ezeket a statikus elemeket, még akkor is, ha nem szerepelnek a fókusznavigációban.
Fontos megjegyezni, hogy az egérrel vagy érintéssel való navigálástól eltérően a fókusznavigáció lineáris. A fókusznavigáció megvalósításakor vegye figyelembe, hogy egy felhasználó hogyan fogja használni az alkalmazást, és hogy mi legyen a logikai navigáció. A legtöbb esetben azt javasoljuk, hogy az egyéni fókusz navigációs viselkedése a felhasználói kultúra előnyben részesített olvasási mintáját kövesse.
Néhány más fókusznavigációs szempont:
- A vezérlők logikailag vannak csoportosítva?
- Vannak nagyobb jelentőséggel bíró vezérlőcsoportok?
- Ha igen, ezek a csoportok alcsoportokat tartalmaznak?
- Az elrendezéshez egyéni irányított navigációra (nyílbillentyűk) és tabulátorsorrendre van szükség?
A Engineering Software for Accessibility eBook kiváló fejezetet kínál a logikai hierarchia tervezéséről.
2D irányított navigáció billentyűzethez
A vezérlők vagy vezérlőcsoportok 2D belső navigációs régióját "irányított területnek" nevezzük. Amikor a fókusz erre az objektumra vált, a billentyűzet nyílbillentyűivel (balra, jobbra, fel és le) navigálhat az irányított területen belüli gyermekelemek között.
A vezérlőcsoport 2D belső navigációs régiója vagy irányterülete
A XYFocusKeyboardNavigation tulajdonsággal (amely automatikus,engedélyezett vagy letiltott értékekkel rendelkezik) a 2D belső navigációt a billentyűzet nyílbillentyűivel kezelheti.
Megjegyzés:
Ez a tulajdonság nem befolyásolja a tabulátorsorrendet. A zavaró navigációs élmény elkerülése érdekében azt javasoljuk, hogy az irányított terület gyermekelemei ne szerepeljenek kifejezetten az alkalmazás tabulátor navigációs sorrendjében. Az elemek lapozási viselkedésével kapcsolatos további részletekért tekintse meg a UIElement.TabFocusNavigation és a TabIndex tulajdonságokat.
Automatikus (alapértelmezett viselkedés)
Automatikus beállítás esetén az irányított navigációs viselkedést az elem elődje vagy öröklési hierarchiája határozza meg. Ha az összes előd alapértelmezett módban van ( automatikusra van állítva), a billentyűzettel való irányított navigáció nem támogatott.
Disabled
Állítsa az XYFocusKeyboardNavigation beállítást letiltott értékre, hogy letiltsa az irányított navigációt a vezérlőnél és annak gyermekelemeinél.
XYFocusKeyboardNavigation kikapcsolt viselkedés
Ebben a példában az elsődleges StackPanel (ContainerPrimary) XYFocusKeyboardNavigation beállítása engedélyezve van. Ezt a beállítást minden gyermekelem örökli, és a nyílbillentyűkkel navigálhatók. A B3 és a B4 elemek azonban egy másodlagos StackPanelben (ContainerSecondary) találhatók, a XYFocusKeyboardNavigation pedig Letiltva értékre van állítva, amely felülbírálja az elsődleges tárolót, és letiltja a nyílbillentyű-navigációt önmagában és a gyermekelemei között.
<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>
Engedélyezett
Állítsa be az XYFocusKeyboardNavigation értékét Engedélyezett módra, hogy támogassa a 2D irányított navigációt egy vezérlőhöz és annak minden UIElement gyermekobjektumához.
Ha be van állítva, a nyílbillentyűkkel való navigálás az irányított területen belüli elemekre korlátozódik. A tabulátorral való navigálás nincs hatással, mivel az összes vezérlő a lapsorrend-hierarchián keresztül is elérhető marad.
XYFocusKeyboardNavigation engedélyezett viselkedése
Ebben a példában az elsődleges StackPanel (ContainerPrimary) XYFocusKeyboardNavigation beállítása engedélyezve van. Ezt a beállítást minden gyermekelem örökli, és a nyílbillentyűkkel navigálhatók. A B3 és B4 elemek egy másodlagos StackPanelben (ContainerSecondary) vannak, ahol a XYFocusKeyboardNavigation nincs beállítva, amely ezután örökli az elsődleges tárolóbeállítást. A B5 elem nem egy deklarált irányított területen belül van, és nem támogatja a nyílbillentyű-navigációt, de támogatja a szokásos lapnavigációs viselkedést.
<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>
Több szint beágyazott irányított területtel is rendelkezhet. Ha minden szülőelemhez engedélyezve van a XYFocusKeyboardNavigation beállítás, a rendszer figyelmen kívül hagyja a belső navigációs régió határait.
Íme egy példa két beágyazott irányterületre egy olyan elemen belül, amely kifejezetten nem támogatja a 2D irányított navigációt. Ebben az esetben az irányított navigáció nem támogatott a két beágyazott terület között.
XYFocusKeyboardNavigation aktiválva és beágyazott viselkedés
Íme egy összetettebb példa három beágyazott irányterületre, ahol:
- Ha a B1 fókuszban van, csak a B5-re lehet navigálni (és fordítva), mert van egy irányhatár, ahol az XYFocusKeyboardNavigation beállítás letiltva, így a B2, B3 és B4 nem érhető el a nyílbillentyűkkel
- Ha a B2 fókuszban van, csak a B3-ra lehet navigálni (és fordítva), mert az irányított terület határa megakadályozza a nyílbillentyűk B1, B4 és B5 közötti navigációját
- Ha a B4 fókuszban van, a Tab billentyűt kell használni a vezérlők közötti navigáláshoz
XYFocusKeyboardNavigation engedélyezve és összetett beágyazott viselkedés
Lapnavigáció
Bár a nyílbillentyűk 2D irányú navigációhoz is használhatók, a Tab billentyűvel navigálhat a Windows-alkalmazások összes vezérlője között.
Az összes interaktív vezérlő alapértelmezés szerint támogatja a Tab billentyűvel való navigálást (az IsEnabled és az IsTabStop tulajdonság igaz), az alkalmazás vezérlőelrendezéséből származtatott logikai tabulátorsorrenddel. Az alapértelmezett sorrend azonban nem feltétlenül felel meg a vizualizáció sorrendjének. A tényleges megjelenítési pozíció a szülőelrendezési tárolótól és bizonyos tulajdonságoktól függhet, amelyeket beállíthat a gyermekelemeken az elrendezés befolyásolása érdekében.
Kerülje az egyéni tabulátor-rend használatát, ami miatt a fókusz az alkalmazásban össze-vissza ugrálhat. Az űrlap vezérlőinek listájának például lapsorrendnek kell lennie, amely felülről lefelé és balról jobbra halad (területi beállítástól függően).
Ebben a szakaszban azt ismertetjük, hogy ez a lapsorrend hogyan szabható testre teljesen az alkalmazásnak megfelelően.
A tabulátor navigációs viselkedésének beállítása
A UIElementTabFocusNavigation tulajdonsága a teljes objektumfára (vagy irányított területre) vonatkozó tabulációs viselkedést határozza meg.
Megjegyzés:
Használja ezt a tulajdonságot a Control.TabNavigation tulajdonság helyett olyan objektumok esetében, amelyek nem használnak ControlTemplate-ot a megjelenésük meghatározásához.
Ahogy az előző szakaszban is említettük, a zavaró navigációs élmény elkerülése érdekében azt javasoljuk, hogy az irányított terület gyermekelemei ne legyenek explicit módon megadva az alkalmazás lapfül-navigációs sorrendjében. Az elem lapozási viselkedésével kapcsolatos további részletekért tekintse meg a UIElement.TabFocusNavigation és a TabIndex tulajdonságokat.
A Windows 10 Creators Update-nél régebbi verziók (10.0.15063-os build) esetén a lapbeállítások ControlTemplate objektumokra korlátozódtak. További információ: Control.TabNavigation.
A TabFocusNavigation egy KeyboardNavigationMode típusú értékkel rendelkezik a következő lehetséges értékekkel (vegye figyelembe, hogy ezek a példák nem egyéni vezérlőcsoportok, és nem igényelnek belső navigációt a nyílbillentyűkkel):
A rendszer felismeri a helyi (alapértelmezett) tabulátorindexeket a tárolón belüli helyi alhálózaton. Ebben a példában a tabulátorsorrend B1, B2, B3, B4, B5, B6, B7, B1.
A "Helyi" lap navigációs viselkedése
Egyszer A tároló és az összes gyermekelem egyszer kap fókuszt. Ebben a példában a tabulátor sorrendje B1, B2, B7, B1 (a nyílbillentyűvel rendelkező belső navigáció is látható).
A(z) "Egyszeri" lap navigációs viselkedése
Ciklus
A fókusz visszatér a tárolón belüli kezdeti fókuszálható elemre. Ebben a példában a tabulátorsorrend B1, B2, B3, B4, B5, B6, B2...
A "Cycle" (Ciklus) lap navigációs viselkedése
Íme az előző példák kódja (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
A TabIndex használatával megadhatja, hogy az elemek milyen sorrendben kapják meg a fókuszt, amikor a felhasználó a Tab billentyűvel navigál a vezérlők között. Az alacsonyabb tabulátorindexet tartalmazó vezérlők a fókuszt a magasabb indexű vezérlőelemek előtt kapják meg.
Ha egy vezérlőelemhez nincs megadva TabIndex , a rendszer a hatókör alapján magasabb indexértéket rendel hozzá, mint a vizualizációfa összes interaktív vezérlőjének aktuális legmagasabb indexértéke (és legalacsonyabb prioritása).
A vezérlő összes gyermekeleme hatókörnek minősül, és ha ezen elemek egyike gyermekelemekkel is rendelkezik, akkor azok egy másik hatókörnek minősülnek. A kétértelműség a hatókör vizualizációfája első elemének kiválasztásával oldható meg.
Ha ki szeretne zárni egy vezérlőelemet a tabulátorsorrendből, állítsa az IsTabStoptulajdonságot hamisra.
Felülbírálja az alapértelmezett tabulátorsorrendet a TabIndex tulajdonság beállításával.
Megjegyzés:
A TabIndex ugyanúgy működik a UIElement.TabFocusNavigation és a Control.TabNavigation használatával is.
Itt bemutatjuk, hogyan befolyásolhatja a fókusznavigációt a TabIndex tulajdonság bizonyos elemeken.
"Helyi" lapnavigáció TabIndex-viselkedéssel
Az előző példában két hatókör van:
- B1, irányterület (B2 – B6) és B7
- irányított terület (B2 - B6)
Amikor a B3 (az irányító területen) fókuszba kerül, a hatókör megváltozik, és a fülnavigáció áthelyeződik az irányító területre, ahol az utólagos fókusz legjobb jelöltje azonosítva van. Ebben az esetben a B2, majd a B4, B5 és B6. A hatókör ezután újra megváltozik, és a fókusz a B1-be kerül.
Íme a példa kódja.
<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 irányított navigáció billentyűzethez, gamepadhez és távvezérléshez
A nem mutató típusú beviteli típusok, például a billentyűzet, a gamepad, a távvezérlés és az akadálymentességi eszközök, például a Windows Narrátor közös, mögöttes mechanizmust használnak a Windows-alkalmazás felhasználói felületének navigálásához és kezeléséhez.
Ebben a szakaszban bemutatjuk, hogyan adhatja meg az előnyben részesített navigációs stratégiát, és hogyan finomíthatja a fókusznavigációt az alkalmazáson belül az összes fókuszalapú, nem mutató típusú beviteli típust támogató navigációs stratégia tulajdonságainak segítségével.
Az Xbox/TV-alkalmazások és -szolgáltatások létrehozásával kapcsolatos általános információkért lásd: Billentyűzet-interakciók, Az Xbox és TV tervezése, valamint a Gamepad és a távvezérlés interakciói.
Navigációs stratégiák
A navigációs stratégiák a billentyűzetre, a játékpadra, a távvezérlésre és a különböző akadálymentességi eszközökre alkalmazhatók.
Az alábbi navigációs stratégia tulajdonságaival meghatározhatja, hogy melyik vezérlő kapja a fókuszt a nyílbillentyű, az iránygomb (D-pad) vagy egy hasonló gomb lenyomásakor.
- XYFocusUpNavigationStrategy
- XYFókuszLeNavigációStratégia
- XYFocusLeftNavigationStrategy
- XYFocusRightNavigationStrategy [navigációs stratégia]
Ezek a tulajdonságok az Automatikus (alapértelmezett), a NavigationDirectionDistance, a Projection vagy a RectilinearDistance lehetséges értékekkel rendelkeznek.
Ha automatikus értékre van állítva, az elem viselkedése az elem ősein alapul. Ha az összes elem automatikus értékre van állítva, a rendszer vetítést használ.
Megjegyzés:
Más tényezők, például a korábban szűrt elem vagy a navigációs irány tengelyének közelsége, befolyásolhatják az eredményt.
Projection
A vetítési stratégia az első elemre helyezi a fókuszt, amikor a jelenleg fókuszált elem széle a navigáció irányába van vetítve.
Ebben a példában minden fókusz navigációs iránya Előrejelzés értékre van állítva. Figyelje meg, hogyan változik a fókusz a B1-ről a B4-esre, megkerülve a B3-at. Ennek az az oka, hogy a B3 nincs a vetítési zónában. Azt is vegye észre, hogy balra lépve a B1-ből nem azonosítanak fókuszjelöltet. Ennek az az oka, hogy a B2 pozíciója a B1-hez képest kiküszöböli a B3-at jelöltként. Ha a B3 ugyanabban a sorban lenne, mint a B2, akkor a bal oldali navigáció életképes jelöltje lenne. A B2 a navigációs irány tengelyéhez való akadálymentes közelsége miatt életképes jelölt.
Előrejelzési navigációs stratégia
Navigációirány-távolság
A NavigationDirectionDistance stratégia a navigációs irány tengelyéhez legközelebbi elemre helyezi a fókuszt.
A navigációs iránynak megfelelő határolókeret széle ki van terjesztve , és a jelölt célok azonosítására van előrevetítve . A rendszer az első észlelt elemet célként azonosítja. Több jelölt esetén a legközelebbi elem lesz a cél. Ha továbbra is több jelölt van, a rendszer a legfelső/bal szélső elemet azonosítja jelöltként.
NavigationDirectionDistance stratégia a navigációhoz
Derékszögű távolság
A RectilinearDistance stratégia a 2D egyenirányú távolság (Taxicab geometria) alapján a legközelebbi elemre helyezi a fókuszt.
Az elsődleges távolság és az egyes potenciális jelöltekhez mért másodlagos távolság összege a legjobb jelöltség azonosítására szolgál. Döntetlen esetén az első balra lévő elemet választja a rendszer, ha a kért irány felfelé vagy lefelé van, és az első felső elemet, ha a kért irány balra vagy jobbra mutat.
RectilinearDistance navigációs stratégia
Ez a kép azt mutatja be, hogy amikor a B1 fókuszban van, és lefelé van a kért irány, a B3 a RectilinearDistance fókuszjelölt. Ez a példában szereplő alábbi számításokon alapul:
- Távolság (B1, B3, Le): 10 + 0 = 10
- Távolság (B1, B2, Le) 0 + 40 = 30
- Távolság (B1, D, Le) 30 + 0 = 30
Kapcsolódó cikkek
Windows developer