Not
Bu sayfaya erişim yetkilendirme gerektiriyor. Oturum açmayı veya dizinleri değiştirmeyi deneyebilirsiniz.
Bu sayfaya erişim yetkilendirme gerektiriyor. Dizinleri değiştirmeyi deneyebilirsiniz.
Windows uygulamalarınızda ve klavye konusunda yetkin kullanıcılar, engelli kişiler ve diğer erişilebilirlik gereksinimleri olan kullanıcılar için, televizyon ekranları ve Xbox One''ın 3 metrelik deneyimi de dahil olmak üzere, kapsamlı ve tutarlı etkileşim deneyimleri sağlamak amacıyla odak gezintisinden ve özel kontrollerden yararlanın.
Genel Bakış
Odak gezintisi, kullanıcıların klavye, oyun yüzeyi veya uzaktan denetim kullanarak Windows uygulamasının kullanıcı arabiriminde gezinmesini ve bu kullanıcı arabirimiyle etkileşim kurmasını sağlayan temel mekanizmayı ifade eder.
Uyarı
Giriş cihazları genellikle dokunmatik yüzey, kalem ve fare gibi işaret eden cihazlar ve klavye, oyun yüzeyi ve uzaktan kumanda gibi işaretsiz cihazlar olarak sınıflandırılır.
Bu konu başlığında, bir Windows uygulamasını iyileştirme ve işaret etmeyen giriş türleri kullanan kullanıcılar için özel etkileşim deneyimleri oluşturma açıklanmaktadır.
Bilgisayarlardaki Windows uygulamalarında özel denetimler için klavye girişlerine odaklansak da, dokunmatik klavye ve Ekran Klavyesi (OSK) gibi yazılım klavyeleri, Windows Ekran Okuyucusu gibi erişilebilirlik araçlarını desteklemek ve 10 metrelik deneyimi desteklemek için iyi tasarlanmış bir klavye deneyimi de önemlidir.
İşaret cihazları için Windows uygulamalarında özel deneyimler oluşturma yönergeleri için bkz. İşaretçi girişini işleme.
Klavye için uygulama ve deneyim oluşturma hakkında daha fazla genel bilgi için bkz. Klavye Etkileşimi.
Genel kılavuz
Yalnızca kullanıcı etkileşimi gerektiren kullanıcı arabirimi öğeleri odak gezintisini desteklemelidir. Statik görüntüler gibi eylem gerektirmeyen öğeler klavye odağına ihtiyaç duymaz. Ekran okuyucular ve benzer erişilebilirlik araçları, odak gezintisinde yer almasalar bile bu statik öğeleri duyurmaya devam eder.
Fare veya dokunma gibi bir işaretçi cihazıyla gezinmenin aksine odak gezintisi doğrusaldır. Odak gezintisini uygularken, kullanıcının uygulamanızla nasıl etkileşim kuracağını ve mantıksal gezintinin ne olması gerektiğini göz önünde bulundurun. Çoğu durumda, özel odak gezinti davranışının kullanıcı kültürünün tercih edilen okuma desenini izlemesini öneririz.
Diğer bazı odak gezintisi konuları şunlardır:
- Denetimler mantıksal olarak gruplandırıldı mı?
- Daha önemli denetim grupları var mı?
- Evet ise, bu gruplar alt gruplar içeriyor mu?
- Düzen için özel yönlü gezinti (ok tuşları) ve sekme sırası gerekiyor mu?
Erişilebilirlik için Mühendislik Yazılımı eKitap, Mantıksal Hiyerarşiyi Tasarlama konusunda mükemmel bir bölüme sahiptir.
Klavye için 2D yönlü navigasyon
Denetimin veya denetim grubunun iki boyutlu iç navigasyon bölgesi, "yönlü alanı" olarak adlandırılır. Odak bu nesneye kaydığında, klavye ok tuşları (sol, sağ, yukarı ve aşağı) yön alanı içindeki alt öğeler arasında gezinmek için kullanılabilir.
denetim grubunun 2B iç gezinti bölgesi veya yön alanı
Klavye ok tuşlarıyla 2B iç gezintiyi yönetmek için XYFocusKeyboardNavigation özelliğini (olası Otomatik, Etkin veya Devre Dışı değerlerine sahip) kullanabilirsiniz.
Uyarı
Sekme sırası bu özellikten etkilenmez. Kafa karıştırıcı bir gezinti deneyiminden kaçınmak için, bir yön alanının alt öğelerinin uygulamanızın sekme gezinti sırasına açıkça belirtilmemesi önerilir. Bir öğenin sekme davranışı hakkında daha fazla ayrıntı için UIElement.TabFocusNavigation ve TabIndex özelliklerine bakın.
Otomatik (varsayılan davranış)
Otomatik olarak ayarlandığında, yön gezinti davranışı öğenin alt öğesi veya devralma hiyerarşisi tarafından belirlenir. Ataların tümü varsayılan modda ise (Otomatik olarak ayarlanmışsa), klavyeyle yön gezintisi desteklenmez.
Disabled
Denetime ve alt öğelerine yönelik yönlü gezintiyi engellemek için XYFocusKeyboardNavigation değerini Devre Dışı olarak ayarlayın.
XYFocusKeyboardNavigation devre dışı bırakıldığında davranış
Bu örnekte, birincil StackPanel (ContainerPrimary) XYFocusKeyboardNavigationetkin olarak ayarlanmıştır. Tüm alt öğeler bu ayarı devralır ve ok tuşlarıyla gezinilebilir. Ancak, B3 ve B4 öğeleri, XYFocusKeyboardNavigationayarı Devre Dışı olarak ayarlanmış ve birincil kapsayıcıyı geçersiz kılarak kendisine ve alt öğeleri arasında ok tuşu gezintisini devre dışı bırakan ikincil bir StackPanel (ContainerSecondary) içinde bulunur.
<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
XYFocusKeyboardNavigation değerini Etkin olarak ayarlayarak bir denetime ve UIElement alt nesnelerinin her birine 2B yönlü gezintiyi destekleyin.
Ayarlandığında, ok tuşlarıyla gezinti yön alanı içindeki öğelerle sınırlıdır. Sekme gezintisi etkilenmez, tüm denetimlere sekme sırası hiyerarşileri üzerinden erişilebilir durumda kalır.
XYFocusKeyboardNavigation etkinleştirilmiş davranış
Bu örnekte, birincil StackPanel (ContainerPrimary) XYFocusKeyboardNavigationetkin olarak ayarlanmıştır. Tüm alt öğeler bu ayarı devralır ve ok tuşlarıyla gidilebilir. B3 ve B4 öğeleri, XYFocusKeyboardNavigation'ın ayarlanmadığı ikincil bir StackPanel'de (ContainerSecondary) bulunur ve bu da birincil kapsayıcı ayarını devralır. B5 öğesi bildirilen bir yön alanı içinde değildir ve ok tuşu gezintisini desteklemez, ancak standart sekme gezinti davranışını destekler.
<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>
birden çok iç içe yönlü alan düzeyine sahip olabilirsiniz. Eğer tüm ebeveyn öğelerde XYFocusKeyboardNavigation Etkin olarak ayarlandıysa, iç gezinti bölgesi sınırları yoksayılır.
Aşağıda, 2B yönlü gezintiyi açıkça desteklemeyen bir öğenin içinde iç içe yerleştirilmiş iki yönlü alan örneği verilmiştir. Bu durumda, iç içe iki alan arasında yönlü gezinti desteklenmez.
XYFocusKeyboardNavigation etkin ve iç içe geçmiş davranış
Burada iç içe yerleştirilmiş üç yönlü alanın daha karmaşık bir örneği verilmiştir:
- B1 odakta olduğunda, bir yön alanı sınırı olduğu için yalnızca B5'e odaklanılabilir (ve B5'te odaklandığında B1'e geri dönülebilir); XYFocusKeyboardNavigation seçeneği Devre Dışı olarak ayarlanmış olduğundan, ok tuşlarıyla B2, B3 ve B4'e ulaşılamaz.
- B2 odaktayken, yön alanının sınırları B1, B4 ve B5’e ok tuşlarıyla gezinmeyi engellediğinden sadece B3'e gidilebilir (ve tam tersi).
- B4'te odak olduğunda, denetimler arasında gezinmek için Sekme tuşu kullanılmalıdır
XYFocusKeyboardNavigation etkin ve karmaşık iç içe geçmiş davranış
Sekmeyle gezinme
Ok tuşları bir denetimin veya denetim grubunun 2B yönlü gezintisi için kullanılabilse de, Bir Windows uygulamasındaki tüm denetimler arasında gezinmek için Sekme tuşu kullanılabilir.
Tüm etkileşimli denetimler, uygulamanızdaki denetim düzeninden türetilen mantıksal sekme sırasıyla sekme tuşu gezintisini varsayılan olarak destekler (IsEnabled ve IsTabStop özelliği true). Ancak, varsayılan sıra görsel sırasına karşılık gelmez. Görüntüleme konumunun kesin yeri, ebeveyn düzen kapsayıcısına ve düzeni etkilemek için alt öğelerde ayarlayabileceğiniz belirli özelliklere bağlı olabilir.
Odağın uygulamanızda gezinmesini sağlayan özel bir sekme sırası kullanmaktan kaçının. Örneğin, formdaki denetimlerin listesinde yukarıdan aşağıya ve soldan sağa (yerel ayara bağlı olarak) akan bir sekme sırası olmalıdır.
Bu bölümde, bu sekme sırasının uygulamanıza uyacak şekilde nasıl tamamen özelleştirilebileceğini açıklayacağız.
Sekme gezinti davranışını ayarlama
UIElement'inTabFocusNavigation özelliği, nesne ağacının tamamı (veya yön alanı) için sekme gezinti davranışını belirtir.
Uyarı
Görünümlerini tanımlamak için ControlTemplatekullanmayan nesneler için Control.TabNavigation özelliği yerine bu özelliği kullanın.
Önceki bölümde de belirttiğimiz gibi, kafa karıştırıcı bir gezinti deneyiminden kaçınmak için, bir yön alanının alt öğelerinin uygulamanızın sekme gezinti sıralamasında açıkça belirtilmemesi önerilir. Bir öğenin sekme davranışı hakkında daha fazla ayrıntı için UIElement.TabFocusNavigation ve TabIndex özelliklerine bakın.
Windows 10 Creators Update'ten (derleme 10.0.15063) daha eski sürümler için sekme ayarları ControlTemplate nesneleriyle sınırlıydı. Daha fazla bilgi için bkz. Control.TabNavigation.
TabFocusNavigation , aşağıdaki olası değerlerle KeyboardNavigationMode türünde bir değere sahiptir (bu örneklerin özel denetim grupları olmadığını ve ok tuşlarıyla iç gezinti gerektirmediğini unutmayın):
Yerel (varsayılan) Sekme dizinleri kapsayıcının içindeki yerel alt ağaçta tanınır. Bu örnekte, sekme sırası B1, B2, B3, B4, B5, B6, B7, B1'dir.
"Yerel" sekme gezinti davranışı
Bir defada Kapsayıcı ve tüm alt öğeler odaklanır. Bu örnekte, sekme sırası B1, B2, B7, B1'dir (ok tuşuyla iç gezinti de gösterilir).
"Tek sefer" sekme gezinti davranışı
Çevrim
Odak, kapsayıcı içindeki ilk odaklanabilir öğeye geri döner. Bu örnekte, sekme sırası B1, B2, B3, B4, B5, B6, B2...
"Döngü" sekmesi gezinti davranışı
Yukarıdaki örneklerin kodu aşağıda verilmiştir (TabFocusNavigation ="Cycle ile").
<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
Kullanıcı Sekme tuşunu kullanarak denetimler arasında gezinirken öğelerin odağı alma sırasını belirtmek için TabIndex'i kullanın. Daha düşük sekme dizinine sahip bir denetim, daha yüksek dizine sahip bir denetimden önce odağı alır.
Bir denetimde TabIndex belirtilmediğinde, bu denetimin dizin değeri kapsama göre görsel ağaçtaki tüm etkileşimli denetimlerin mevcut en yüksek dizin değerinden daha yüksek (ve en düşük öncelikli) olacak şekilde atanır.
Denetimin tüm alt öğeleri kapsam olarak kabul edilir ve bu öğelerden birinde de alt öğeler varsa, bunlar başka bir kapsam olarak kabul edilir. Tüm belirsizlikler, kapsamın görsel ağacındaki ilk öğe seçilerek çözülür.
Bir denetimi sekme sırasının dışında tutmak için IsTabStop özelliğini false olarak ayarlayın.
TabIndex özelliğini ayarlayarak varsayılan sekme sırasını geçersiz kılın.
Uyarı
TabIndex hem UIElement.TabFocusNavigation hem de Control.TabNavigation ile aynı şekilde çalışır.
Burada, odak gezintisinin belirli öğelerdeki TabIndex özelliğinden nasıl etkilenebileceğini göstereceğiz.
TabIndex davranışıyla "Yerel" sekme gezintisi
Yukarıdaki örnekte iki kapsam vardır:
- B1, yön alanı (B2 - B6) ve B7
- yön alanı (B2 - B6)
B3 (yön alanında) odak aldığında kapsam değişir ve sekme gezintisi sonraki odak için en iyi adayın belirlendiği yön alanına aktarılır. Bu durumda, B2 ve ardından B4, B5 ve B6. Kapsam yeniden değişir ve odak B1'e taşınır.
Bu örneğin kodu aşağıda verilmiştır.
<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>
Klavye, oyun kolu ve uzaktan kumanda için 2D yönlü gezinme
Klavye, oyun çubuğu, uzaktan denetim ve Windows Ekran Okuyucusu gibi erişilebilirlik araçları gibi işaretçisiz giriş türleri, Windows uygulamanızın kullanıcı arabiriminde gezinmek ve etkileşimde olmak için ortak, temel alınan bir mekanizmayı paylaşır.
Bu bölümde, tercih edilen gezinti stratejisini belirtme ve tüm odak tabanlı, işaretçisiz giriş türlerini destekleyen bir gezinti stratejisi özellikleri kümesi aracılığıyla uygulamanızda odak gezintisinde ince ayar yapmayı ele alacağız.
Xbox/TV için uygulama ve deneyim oluşturma hakkında daha fazla genel bilgi için bkz. Klavye Etkileşimi, Xbox ve TV için Tasarlama veGamepad ve uzaktan kumanda etkileşimleri.
Gezinti Stratejileri
Gezinti stratejileri klavye, oyun yüzeyi, uzaktan denetim ve çeşitli erişilebilirlik araçları için geçerlidir.
Aşağıdaki gezinti stratejisi özellikleri, ok tuşuna, yön tuş takımına (D-pad) veya benzeri tuşlara basılarak hangi denetimin odağı alacağını etkilemenizi sağlar.
- XYFocusUpNavigationStrategy
- XYFocusDownNavigationStrategy
- XYFocusLeftNavigationStrategy
- XYFocusRightNavigationStrategy
Bu özellikler Otomatik (varsayılan), NavigationDirectionDistance, Projeksiyon veya RectilinearDistance olası değerlerine sahiptir.
Otomatik olarak ayarlanırsa, öğesinin davranışı öğenin atalarını temel alır. Tüm öğeler Otomatik olarak ayarlanırsa Projeksiyon kullanılır.
Uyarı
Daha önce odaklanmış öğe veya gezinti yönünün eksenine yakınlık gibi diğer faktörler sonucu etkileyebilir.
Projection
Projeksiyon stratejisi, odağı o anda odaklanmış olan öğenin kenarı gezinti yönünde yansıtıldığında karşılaşılan ilk öğeye taşır.
Bu örnekte her odak gezinti yönü Projeksiyon olarak ayarlanmıştır. Odağın B3'i atlayarak B1'den B4'e nasıl aşağı doğru ilerlerken dikkat edin. Bunun nedeni, B3'un projeksiyon bölgesinde olmamasıdır. Ayrıca sola B1'den hareket ederken odak adayının nasıl tanımlanmadığını görebilirsiniz. Bunun nedeni B2'nin B1'e göre konumunun B3'ün aday olarak ortadan kaldırılmasıdır. B3, B2 ile aynı satırda yer alırsa, sol gezinti için uygun bir aday olacaktır. B2, gezinti yönü eksenine engelsiz yakınlığı nedeniyle uygun bir adaydır.
Projeksiyon gezinti stratejisi
NavigasyonYönMesafesi
NavigationDirectionDistance stratejisi, odağı gezinti yönünün eksenine en yakın öğeye taşır.
Navigasyon yönüne karşılık gelen sınırlayıcı dikdörtgenin kenarı, aday hedefleri tanımlamak için genişletilir ve uzatılır. Karşılaşılan ilk öğe hedef olarak tanımlanır. Birden çok aday söz konusu olduğunda, en yakın öğe hedef olarak tanımlanır. Hala birden çok aday varsa, en üstteki/en soldaki öğe aday olarak tanımlanır.
NavigationDirectionDistance navigasyon stratejisi
RectilinearDistance
RectilinearDistance stratejisi, odağı 2B rectilinear uzaklığa (Taxicab geometrisi) göre en yakın öğeye taşır.
En iyi adayı belirlemek için, birincil uzaklık ile her potansiyel adayın ikincil uzaklık toplamı kullanılır. Bir eşitlik durumunda, istenen yönde yukarı veya aşağıysa soldaki ilk öğe seçilir ve istenen yönde sola veya sağa ise üstteki ilk öğe seçilir.
RectilinearDistance gezinti stratejisi
Bu görüntüde, B1 odak noktası olduğunda ve aşağı doğru istenen yön olduğunda B3'in RectilinearDistance odak adayı olduğu gösterilir. Bu, bu örnekteki aşağıdaki hesaplamaları temel alır:
- Uzaklık (B1, B3, Aşağı) şu şekilde: 10 + 0 = 10
- Uzaklık (B1, B2, Aşağı) 0 + 40 = 30
- Uzaklık (B1, D, Aşağı) 30 + 0 = 30
İlgili makaleler
Windows developer