Navigasi fokus untuk keyboard, gamepad, kontrol jarak jauh, dan alat aksesibilitas
Gunakan navigasi fokus untuk memberikan pengalaman interaksi yang komprehensif dan konsisten di aplikasi Windows dan kontrol kustom untuk pengguna daya keyboard, mereka yang memiliki disabilitas dan persyaratan aksesibilitas lainnya, serta pengalaman 10 kaki layar televisi dan Xbox One.
Gambaran Umum
Navigasi fokus mengacu pada mekanisme yang mendasar yang memungkinkan pengguna menavigasi dan berinteraksi dengan UI aplikasi Windows menggunakan keyboard, gamepad, atau remote control.
Catatan
Perangkat input biasanya diklasifikasikan sebagai perangkat penunjuk, seperti sentuhan, touchpad, pena, dan mouse, dan perangkat non-pointing, seperti keyboard, gamepad, dan remote control.
Topik ini menjelaskan cara mengoptimalkan aplikasi Windows dan membangun pengalaman interaksi kustom untuk pengguna yang mengandalkan jenis input yang tidak menunjuk.
Meskipun kami fokus pada input keyboard untuk kontrol kustom di aplikasi Windows pada PC, pengalaman keyboard yang dirancang dengan baik juga penting untuk keyboard perangkat lunak seperti keyboard sentuh dan Keyboard Layar (OSK), mendukung alat aksesibilitas seperti Windows Narrator, dan mendukung pengalaman 10 kaki.
Lihat Menangani input pointer untuk panduan tentang membangun pengalaman kustom di aplikasi Windows untuk mengarahkan perangkat.
Untuk informasi umum selengkapnya tentang membangun aplikasi dan pengalaman untuk keyboard, lihat Interaksi Keyboard.
Panduan Umum
Hanya elemen UI yang memerlukan interaksi pengguna yang harus mendukung navigasi fokus, elemen yang tidak memerlukan tindakan, seperti gambar statis, tidak memerlukan fokus keyboard. Pembaca layar dan alat aksesibilitas serupa masih mengumumkan elemen statis ini, bahkan ketika tidak disertakan dalam navigasi fokus.
Penting untuk diingat bahwa tidak seperti menavigasi dengan perangkat penunjuk seperti mouse atau sentuhan, navigasi fokus bersifat linier. Saat menerapkan navigasi fokus, pertimbangkan bagaimana pengguna akan berinteraksi dengan aplikasi Anda dan apa navigasi logisnya. Dalam kebanyakan kasus, kami merekomendasikan perilaku navigasi fokus kustom mengikuti pola bacaan yang disukai dari budaya pengguna.
Beberapa pertimbangan navigasi fokus lainnya meliputi:
- Apakah kontrol dikelompokkan secara logis?
- Apakah ada grup kontrol dengan kepentingan yang lebih besar?
- Jika ya, apakah grup tersebut berisi sub-grup?
- Apakah tata letak memerlukan navigasi arah kustom (tombol panah) dan urutan tab?
Perangkat Lunak Rekayasa untuk Aksesibilitas eBook memiliki bab yang sangat baik tentang Merancang Hierarki Logis.
Navigasi arah 2D untuk keyboard
Wilayah navigasi dalam 2D kontrol, atau grup kontrol, disebut sebagai "area arah". Saat fokus bergeser ke objek ini, tombol panah keyboard (kiri, kanan, atas, dan bawah) dapat digunakan untuk menavigasi antar elemen anak di dalam area arah.
Wilayah navigasi dalam 2D, atau area arah, dari grup kontrol
Anda dapat menggunakan properti XYFocusKeyboardNavigation (yang memiliki kemungkinan nilai Auto, Enabled, atau Disabled) untuk mengelola navigasi dalam 2D dengan tombol panah keyboard.
Catatan
Urutan tab tidak dipengaruhi oleh properti ini. Untuk menghindari pengalaman navigasi yang membingungkan, sebaiknya elemen anak dari area arah tidak ditentukan secara eksplisit dalam urutan navigasi tab aplikasi Anda. Lihat properti UIElement.TabFocusNavigation dan TabIndex untuk detail selengkapnya tentang perilaku tab untuk elemen.
Otomatis (perilaku default)
Saat diatur ke Otomatis, perilaku navigasi arah ditentukan oleh hierarki leluhur elemen, atau pewarisan. Jika semua leluhur berada dalam mode default (diatur ke Otomatis), navigasi arah dengan keyboard tidak didukung.
Nonaktif
Atur XYFocusKeyboardNavigation ke Dinonaktifkan untuk memblokir navigasi arah ke kontrol dan elemen turunannya.
Perilaku XYFocusKeyboardNavigation yang dinonaktifkan
Dalam contoh ini, StackPanel utama (ContainerPrimary) memiliki XYFocusKeyboardNavigation yang diatur ke Diaktifkan. Semua elemen turunan mewarisi pengaturan ini, dan dapat dinavigasi dengan tombol panah. Namun, elemen B3 dan B4 berada di StackPanel sekunder (ContainerSecondary) dengan XYFocusKeyboardNavigation diatur ke Dinonaktifkan, yang menggantikan kontainer utama dan menonaktifkan navigasi kunci panah ke dirinya sendiri dan di antara elemen turunannya.
<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>
Diaktifkan
Atur XYFocusKeyboardNavigation ke Diaktifkan untuk mendukung navigasi arah 2D ke kontrol dan setiap objek anak UIElement-nya.
Saat diatur, navigasi dengan tombol panah dibatasi untuk elemen dalam area arah. Navigasi tab tidak terpengaruh, karena semua kontrol tetap dapat diakses melalui hierarki urutan tabnya.
Perilaku XYFocusKeyboardNavigation diaktifkan
Dalam contoh ini, StackPanel utama (ContainerPrimary) memiliki XYFocusKeyboardNavigation yang diatur ke Diaktifkan. Semua elemen turunan mewarisi pengaturan ini, dan dapat dinavigasi dengan tombol panah. Elemen B3 dan B4 berada di StackPanel sekunder (ContainerSecondary) di mana XYFocusKeyboardNavigation tidak diatur, yang kemudian mewarisi pengaturan kontainer utama. Elemen B5 tidak berada dalam area arah yang dinyatakan, dan tidak mendukung navigasi kunci panah tetapi mendukung perilaku navigasi tab standar.
<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>
Anda dapat memiliki beberapa tingkat area arah berlapis. Jika semua elemen induk memiliki XYFocusKeyboardNavigation diatur ke Diaktifkan, batas wilayah navigasi dalam diabaikan.
Berikut adalah contoh dua area arah berlapis dalam elemen yang tidak secara eksplisit mendukung navigasi arah 2D. Dalam hal ini, navigasi arah tidak didukung di antara dua area berlapis.
Perilaku XYFocusKeyboardNavigation diaktifkan dan berlapis
Berikut adalah contoh yang lebih kompleks dari tiga area arah berlapis di mana:
- Ketika B1 memiliki fokus, hanya B5 yang dapat dinavigasi ke (dan sebaliknya) karena ada batas area arah di mana XYFocusKeyboardNavigation diatur ke Dinonaktifkan, membuat B2, B3, dan B4 tidak dapat dijangkau dengan tombol panah
- Ketika B2 memiliki fokus, hanya B3 yang dapat dinavigasi ke (dan sebaliknya) karena batas area arah mencegah navigasi tombol panah ke B1, B4, dan B5
- Ketika B4 memiliki fokus, tombol Tab harus digunakan untuk menavigasi antar kontrol
XYFocusKeyboardNavigation diaktifkan dan perilaku berlapis yang kompleks
Navigasi tab
Meskipun tombol panah dapat digunakan untuk navigasi arah 2D dengan kontrol, atau grup kontrol, tombol Tab dapat digunakan untuk menavigasi di antara semua kontrol dalam aplikasi Windows.
Semua kontrol interaktif mendukung navigasi kunci Tab secara default (properti IsEnabled dan IsTabStop benar), dengan urutan tab logis yang berasal dari tata letak kontrol di aplikasi Anda. Namun, urutan default tidak selalu sesuai dengan urutan visual. Posisi tampilan aktual mungkin bergantung pada kontainer tata letak induk dan properti tertentu yang dapat Anda atur pada elemen turunan untuk memengaruhi tata letak.
Hindari urutan tab kustom yang membuat fokus melompat-lompat di aplikasi Anda. Misalnya, daftar kontrol dalam formulir harus memiliki urutan tab yang mengalir dari atas ke bawah dan kiri ke kanan (tergantung lokal).
Di bagian ini kami menjelaskan bagaimana urutan tab ini dapat sepenuhnya disesuaikan agar sesuai dengan aplikasi Anda.
Mengatur perilaku navigasi tab
Properti TabFocusNavigation UIElement menentukan perilaku navigasi tab untuk seluruh pohon objeknya (atau area arah).
Catatan
Gunakan properti ini alih-alih properti Control.TabNavigation untuk objek yang tidak menggunakan ControlTemplate untuk menentukan tampilannya.
Seperti yang kami sebutkan di bagian sebelumnya, untuk menghindari pengalaman navigasi yang membingungkan, kami menyarankan agar elemen anak dari area arah tidak ditentukan secara eksplisit dalam urutan navigasi tab aplikasi Anda. Lihat UIElement.TabFocusNavigation dan properti TabIndex untuk detail selengkapnya tentang perilaku tab untuk elemen.
Untuk versi yang lebih lama dari Pembaruan Pembuat Windows 10 (build 10.0.15063), pengaturan tab terbatas pada objek ControlTemplate . Untuk informasi selengkapnya, lihat Control.TabNavigation.
TabFocusNavigation memiliki nilai jenis KeyboardNavigationMode dengan nilai yang mungkin berikut (perhatikan bahwa contoh ini bukan grup kontrol kustom dan tidak memerlukan navigasi dalam dengan tombol panah):
Indeks tab lokal (default) dikenali pada subtree lokal di dalam kontainer. Untuk contoh ini, urutan tab adalah B1, B2, B3, B4, B5, B6, B7, B1.
Perilaku navigasi tab "Lokal"
Setelah kontainer dan semua elemen turunan menerima fokus sekali. Untuk contoh ini, urutan tab adalah B1, B2, B7, B1 (navigasi dalam dengan tombol panah juga ditunjukkan).
Perilaku navigasi tab "Sekali"
Daur
Fokus kembali ke elemen awal yang dapat difokuskan di dalam kontainer. Untuk contoh ini, urutan tab adalah B1, B2, B3, B4, B5, B6, B2...Perilaku navigasi tab "Siklus"
Berikut adalah kode untuk contoh sebelumnya (dengan 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
Gunakan TabIndex untuk menentukan urutan di mana elemen menerima fokus saat pengguna menavigasi melalui kontrol menggunakan tombol Tab. Kontrol dengan indeks tab yang lebih rendah menerima fokus sebelum kontrol dengan indeks yang lebih tinggi.
Ketika kontrol tidak memiliki TabIndex yang ditentukan, kontrol diberi nilai indeks yang lebih tinggi daripada nilai indeks tertinggi saat ini (dan prioritas terendah) dari semua kontrol interaktif di pohon visual, berdasarkan cakupan.
Semua elemen turunan dari kontrol dianggap sebagai cakupan, dan jika salah satu elemen ini juga memiliki elemen turunan, elemen tersebut dianggap sebagai cakupan lain. Ambiguitas apa pun diselesaikan dengan memilih elemen pertama pada pohon visual cakupan.
Untuk mengecualikan kontrol dari urutan tab, atur properti IsTabStop ke false.
Ambil alih urutan tab default dengan mengatur properti TabIndex .
Catatan
TabIndex bekerja dengan cara yang sama dengan UIElement.TabFocusNavigation dan Control.TabNavigation.
Di sini, kami menunjukkan bagaimana navigasi fokus dapat dipengaruhi oleh properti TabIndex pada elemen tertentu.
Navigasi tab "Lokal" dengan perilaku TabIndex
Dalam contoh sebelumnya, ada dua cakupan:
- B1, area arah (B2 - B6), dan B7
- area arah (B2 - B6)
Ketika B3 (di area arah) mendapatkan fokus, cakupan berubah dan navigasi tab ditransfer ke area arah tempat kandidat terbaik untuk fokus berikutnya diidentifikasi. Dalam hal ini, B2 diikuti oleh B4, B5, dan B6. Cakupan kemudian berubah lagi, dan fokus berpindah ke B1.
Berikut adalah kode untuk contoh ini.
<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>
Navigasi arah 2D untuk keyboard, gamepad, dan remote control
Jenis input non-pointer seperti keyboard, gamepad, remote control, dan alat aksesibilitas seperti Windows Narrator, berbagi mekanisme umum dan mendasar untuk menavigasi dan berinteraksi dengan UI aplikasi Windows Anda.
Di bagian ini, kami membahas cara menentukan strategi navigasi pilihan dan menyempurnakan navigasi fokus dalam aplikasi Anda melalui serangkaian properti strategi navigasi yang mendukung semua jenis input non-pointer berbasis fokus.
Untuk informasi umum selengkapnya tentang membangun aplikasi dan pengalaman untuk Xbox/TV, lihat Interaksi Keyboard, Merancang untuk Xbox dan TV, serta Gamepad dan interaksi kontrol jarak jauh.
Strategi Navigasi
Strategi navigasi berlaku untuk keyboard, gamepad, remote control, dan berbagai alat aksesibilitas.
Properti strategi navigasi berikut memungkinkan Anda memengaruhi kontrol mana yang menerima fokus berdasarkan tombol panah, tombol tombol tombol arah (D-pad), atau yang serupa ditekan.
- XYFocusUpNavigationStrategy
- XYFocusDownNavigationStrategy
- XYFocusLeftNavigationStrategy
- XYFocusRightNavigationStrategy
Properti ini memiliki kemungkinan nilai Otomatis (default), NavigationDirectionDistance, Projection, atau RectilinearDistance .
Jika diatur ke Otomatis, perilaku elemen didasarkan pada leluhur elemen. Jika semua elemen diatur ke Otomatis, Proyeksi digunakan.
Catatan
Faktor lain, seperti elemen atau kedekatan yang difokuskan sebelumnya dengan sumbu arah navigasi, dapat memengaruhi hasilnya.
Proyeksi
Strategi Proyeksi memindahkan fokus ke elemen pertama yang ditemui ketika tepi elemen yang saat ini difokuskan diproyeksikan ke arah navigasi.
Dalam contoh ini, setiap arah navigasi fokus diatur ke Proyeksi. Perhatikan bagaimana fokus bergerak ke bawah dari B1 ke B4, melewati B3. Ini karena, B3 tidak berada di zona proyeksi. Perhatikan juga bagaimana kandidat fokus tidak diidentifikasi saat bergerak ke kiri dari B1. Hal ini karena posisi B2 relatif terhadap B1 menghilangkan B3 sebagai kandidat. Jika B3 berada di baris yang sama dengan B2, itu akan menjadi kandidat yang layak untuk navigasi kiri. B2 adalah kandidat yang layak karena kedekatannya yang tidak terhalang dengan sumbu arah navigasi.
Strategi navigasi proyeksi
NavigationDirectionDistance
Strategi NavigationDirectionDistance memindahkan fokus ke elemen yang paling dekat dengan sumbu arah navigasi.
Tepi rekreasi pembatas yang sesuai dengan arah navigasi diperluas dan diproyeksikan untuk mengidentifikasi target kandidat. Elemen pertama yang ditemui diidentifikasi sebagai target. Dalam kasus beberapa kandidat, elemen terdekat diidentifikasi sebagai target. Jika masih ada beberapa kandidat, elemen paling atas/paling kiri diidentifikasi sebagai kandidat.
Strategi navigasi NavigationDirectionDistance
RectilinearDistance
Strategi RectilinearDistance memindahkan fokus ke elemen terdekat berdasarkan jarak rectilinear 2D (geometri Taxicab).
Jumlah jarak utama dan jarak sekunder ke setiap kandidat potensial digunakan untuk mengidentifikasi kandidat terbaik. Dalam dasi, elemen pertama di sebelah kiri dipilih jika arah yang diminta adalah atas atau bawah, dan elemen pertama ke atas dipilih jika arah yang diminta dibiarkan atau kanan.
Strategi navigasi RectilinearDistance
Gambar ini menunjukkan bagaimana, ketika B1 memiliki fokus dan ke bawah adalah arah yang diminta, B3 adalah kandidat fokus RectilinearDistance. Ini didasarkan pada kalkualasi berikut untuk contoh ini:
- Jarak (B1, B3, Turun) adalah 10 + 0 = 10
- Jarak (B1, B2, Turun) adalah 0 + 40 = 30
- Jarak (B1, D, Turun) adalah 30 + 0 = 30
Artikel terkait
Windows developer