Gamepad ve uzaktan kumanda etkileşimleri

Birçok etkileşim deneyimi oyun yüzeyi, uzaktan denetim ve klavye arasında paylaşılır

Windows uygulamalarınızda, hem geleneksel bilgisayar, dizüstü bilgisayar ve tablet giriş türleri (fare, klavye, dokunma vb.) hem de oyun yüzeyi ve uzaktan kumanda gibi TV ve Xbox 10 ayak deneyimine özgü giriş türleri aracılığıyla kullanılabilir ve erişilebilir olmasını sağlayan etkileşim deneyimleri oluşturun.

3 metrelik deneyimde Windows uygulamalarıyla ilgili genel tasarım kılavuzu için bkz. Xbox ve TV için tasarlama.

Genel Bakış

Bu konu başlığında, etkileşim tasarımınızda neleri dikkate almanız gerektiğini (veya platformun sizin yerinize bakması durumunda neleri dikkate almayabileceğinizi) tartışacak ve cihaz, giriş türü veya kullanıcı yetenekleri ve tercihlerinden bağımsız olarak kullanımı keyifli windows uygulamaları oluşturmaya yönelik rehberlik, öneriler ve öneriler sağlayacağız.

Sonuç olarak, uygulamanız 0.6 metrelik ortamda olduğu kadar 3 metrelik ortamda da sezgisel ve kullanımı kolay olmalıdır (ve tam tersi). Kullanıcının tercih ettiği cihazları destekleyin, kullanıcı arabirimi odağını net ve belirgin hale getirin, içeriği gezintinin tutarlı ve öngörülebilir olmasını sağlayacak şekilde düzenleyin ve kullanıcılara yapmak istedikleri şey için mümkün olan en kısa yolu verin.

Uyarı

Bu konudaki kod parçacıklarının çoğu XAML/C# içindedir; ancak ilkeler ve kavramlar tüm Windows uygulamaları için geçerlidir. Xbox için bir HTML/JavaScript Windows uygulaması geliştiriyorsanız GitHub'da mükemmel TVHelpers kitaplığına göz atın.

Hem 6 metrelik hem de 10 metrelik deneyimler için iyileştirme

En azından, uygulamalarınızı test ederek hem 6 metrelik hem de 10 metrelik senaryolarda düzgün çalıştığından ve tüm işlevlerin Xbox gamepad ve uzaktan kumanda için bulunabilir ve erişilebilir olduğundan emin olmanız önerilir.

Uygulamanızı hem 6 metrelik hem de 10 metrelik deneyimlerde ve tüm giriş cihazlarında (bu konudaki uygun bölümün her bağlantısı) kullanmak üzere iyileştirebileceğiniz diğer bazı yollar aşağıdadır.

Uyarı

Xbox gamepad'leri ve uzaktan kumandalar birçok Windows klavye davranışını ve deneyimini desteklediği için, bu öneriler her iki giriş türü için de uygundur. Daha ayrıntılı klavye bilgileri için bkz. Klavye etkileşimleri .

Özellik	Description
XY odak navigasyonu ve etkileşimi	XY odak gezintisi , kullanıcının uygulamanızın kullanıcı arabiriminde gezinmesini sağlar. Ancak bu, kullanıcının yukarı, aşağı, sola ve sağa gezinmesini sınırlar. Bununla ilgilenmeye yönelik öneriler ve diğer önemli noktalar bu bölümde özetlenmiştir.
Mouse modu	XY odak gezintisi, haritalar, çizim ve boyama uygulamaları gibi bazı uygulama türleri için pratik veya hatta mümkün değildir. Böyle durumlarda fare modu , kullanıcıların tıpkı bilgisayardaki fare gibi bir oyun yüzeyi veya uzaktan kumanda ile serbestçe gezinmesini sağlar.
Odak görseli	Odak görseli, şu anda odaklanmış kullanıcı arabirimi öğesini vurgulayan bir kenarlıktır. Bu, kullanıcının gezindikleri veya etkileşimde bulundukları kullanıcı arabirimini hızla tanımlamalarına yardımcı olur.
Etkileşim üzerine odaklanma	Kullanıcının bir kullanıcı arabirimi öğesi odakta olduğunda onunla etkileşime geçmek için oyun kumandasındaki veya uzaktan kumandadaki A/Select düğmesine basması gerekir.
Donanım düğmeleri	Oyun yüzeyi ve uzaktan kumanda çok farklı düğmeler ve yapılandırmalar sağlar.

Gamepad ve uzaktan kumanda

Tıpkı klavye ve farenin bilgisayar için ve dokunmatiğin telefon ve tablet için olduğu gibi, 10-foot deneyiminde ana giriş cihazları olarak gamepad ve uzaktan kumanda kullanılır. Bu bölümde donanım düğmelerinin ne olduğu ve ne yaptıkları tanıtılır. XY odak gezintisi, etkileşim ve Fare modunda, bu giriş cihazlarını kullanırken uygulamanızı nasıl iyileştireceğinizi öğreneceksiniz.

Oyun kontrolcüsü ve uzaktan kumanda davranışının kutudan çıktığı andaki kalitesi, klavyenin uygulamanızda ne kadar iyi desteklendiğine bağlıdır. Uygulamanızın oyun çubuğu/uzak ile iyi çalışmasını sağlamanın iyi bir yolu, pc'de klavyeyle iyi çalıştığından emin olmak ve ardından kullanıcı arabiriminizdeki zayıf noktaları bulmak için oyun çubuğu/uzak ile test etmektir.

Donanım düğmeleri

Bu belgenin tamamında düğmelere, aşağıdaki diyagramda belirtilen adlarla atıfta bulunulacaktır.

Diyagramdan görebileceğiniz gibi, uzaktan kumandada desteklenmeyen ancak oyun kumandasında (gamepad) desteklenen bazı düğmeler vardır ve tam tersi de geçerlidir. Kullanıcı arabiriminde daha hızlı gezinmek için yalnızca bir giriş cihazında desteklenen düğmeleri kullanabilirsiniz ancak bunları kritik etkileşimler için kullanmanın kullanıcının kullanıcı arabiriminin belirli bölümleriyle etkileşim kuramadığı bir durum oluşturabileceğini unutmayın.

Aşağıdaki tabloda, Windows uygulamaları tarafından desteklenen tüm donanım düğmeleri ve bunları hangi giriş cihazının desteklediği listelenmektedir.

Button	Oyun kumandası	Uzaktan denetim
A/Seç düğmesi	Yes	Yes
B tuşu/Geri düğmesi	Yes	Yes
Yön paneli (D-pad)	Yes	Yes
Menü düğmesi	Yes	Yes
Görünüm düğmesi	Yes	Yes
X ve Y düğmeleri	Yes	Hayı
Sol çubuk	Yes	Hayı
Sağ çubuk	Yes	Hayı
Sol ve sağ tetikleyiciler	Yes	Hayı
Sol ve sağ tamponlar	Yes	Hayı
OneGuide düğmesi	Hayı	Yes
Ses düzeyi düğmesi	Hayı	Yes
Kanal düğmesi	Hayı	Yes
Medya denetimi düğmeleri	Hayı	Yes
Sesi kapat düğmesi	Hayı	Yes

Yerleşik düğme desteği

UWP, mevcut klavye giriş davranışını otomatik olarak oyun çubuğu ve uzaktan denetim girişine eşler. Aşağıdaki tabloda bu yerleşik eşlemeler listelenir.

Keyboard	Oyun kolu/uzaktan kumanda
Ok tuşları	D-pad (oyun çubuğunda da sol çubuk)
Ara Çubuğu	A/Seç düğmesi
Giriniz	A/Seç düğmesi
Kaçmak	B/Geri düğmesi*

*B düğmesi için KeyDown veya KeyUp olayları uygulama tarafından işlenmediğinde SystemNavigationManager.BackRequested olayı tetiklenir ve bu da uygulama içinde geri gezintiye neden olur. Ancak, aşağıdaki kod parçacığında olduğu gibi bunu kendiniz uygulamanız gerekir:

// This code goes in the MainPage class

public MainPage()
{
    this.InitializeComponent();

    // Handling Page Back navigation behaviors
    SystemNavigationManager.GetForCurrentView().BackRequested +=
        SystemNavigationManager_BackRequested;
}

private void SystemNavigationManager_BackRequested(
    object sender,
    BackRequestedEventArgs e)
{
    if (!e.Handled)
    {
        e.Handled = this.BackRequested();
    }
}

public Frame AppFrame { get { return this.Frame; } }

private bool BackRequested()
{
    // Get a hold of the current frame so that we can inspect the app back stack
    if (this.AppFrame == null)
        return false;

    // Check to see if this is the top-most page on the app back stack
    if (this.AppFrame.CanGoBack)
    {
        // If not, set the event to handled and go back to the previous page in the
        // app.
        this.AppFrame.GoBack();
        return true;
    }
    return false;
}

Uyarı

B düğmesi geri dönmek için kullanılıyorsa kullanıcı arabiriminde geri düğmesini göstermeyin. Gezinti görünümü kullanıyorsanız, geri düğmesi otomatik olarak gizlenir. Geriye doğru gezinti hakkında daha fazla bilgi için bkz . Windows uygulamaları için gezinti geçmişi ve geriye doğru gezinti.

Xbox One'da Windows uygulamaları, bağlam menülerini açmak için Menü düğmesine basmayı da destekler. Daha fazla bilgi için bkz. CommandBar ve ContextFlyout.

Hızlandırıcı desteği

Hızlandırıcı düğmeleri, kullanıcı arabiriminde gezinmeyi hızlandırmak için kullanılabilen düğmelerdir. Ancak, bu düğmeler belirli bir giriş cihazı için benzersiz olabilir, bu nedenle tüm kullanıcıların bu işlevleri kullanamayacağını unutmayın. Aslında, gamepad şu anda Xbox One'daki Windows uygulamaları için hızlandırıcı işlevlerini destekleyen tek giriş cihazıdır.

Aşağıdaki tabloda UWP'de yerleşik olarak bulunan hızlandırıcı desteğinin yanı sıra kendi başınıza uygulayabileceğiniz destek de listelenir. Tutarlı ve kolay bir kullanıcı deneyimi sağlamak için özel kullanıcı arabiriminizde bu davranışları kullanın.

Etkileşim	Klavye/Fare	Oyun kumandası	Yerleşik için:	Aşağıdakiler için önerilir:
Sayfa yukarı/aşağı	Sayfa yukarı/aşağı	Sol/sağ tetikleyiciler	CalendarView, ListBox, ListViewBase, ListViewScrollViewerSelector, LoopingSelector, ComboBox, FlipView	Dikey kaydırmayı destekleyen görünümler
Sayfa sol/sağ	Hiç kimse	Sol/sağ tamponlar	ListBox, ListViewBase, ListView, ScrollViewer, Selector, LoopingSelector, FlipView	Yatay kaydırmayı destekleyen görünümler
Yakınlaştırma/uzaklaştırma	Ctrl + / -	Sol/sağ tetikleyiciler	Hiç kimse	ScrollViewer, yakınlaştırmayı ve uzaklaştırmayı destekleyen görünümler
Gezinti bölmesini açma/kapatma	Hiç kimse	View	Hiç kimse	Gezinti bölmeleri
Search	Hiç kimse	Y düğmesi	Hiç kimse	Uygulamadaki ana arama işlevinin kısayolu
Bağlam menüsünü açma	Diskler'e sağ	Menü düğmesi	ContextFlyout	Bağlam menüleri

XY odak gezintisi ve etkileşimi

Uygulamanız klavye için uygun odak gezintisini destekliyorsa, bu, gamepad ve uzaktan kumandaya iyi aktarılır. Ok tuşlarıyla gezinti , D tuş takımına (oyun çubuğundaki sol çubuğun yanı sıra) eşlenir ve kullanıcı arabirimi öğeleriyle etkileşim Enter/Select tuşuna eşlenir (bkz. Gamepad ve uzaktan kumanda).

Birçok olay ve özellik hem klavye hem de oyun kumandası tarafından kullanılır; her ikisi de KeyDown ve KeyUp olaylarını tetikler ve yalnızca IsTabStop="True" ve Visibility="Visible" özelliklerine sahip denetimlere gider. Klavye tasarımı kılavuzu için bkz. Klavye etkileşimleri.

Klavye desteği düzgün bir şekilde uygulanırsa, uygulamanız makul bir şekilde çalışır; ancak, her senaryoya destek olmak için bazı ek çalışmalar gerekebilir. Mümkün olan en iyi kullanıcı deneyimini sağlamak için uygulamanızın özel gereksinimlerini düşünün.

Önemli

Fare modu, Xbox One üzerinde çalışan Windows uygulamaları için varsayılan olarak etkindir. Fare modunu devre dışı bırakmak ve XY odak gezintisini etkinleştirmek için ayarını yapın Application.RequiresPointerMode=WhenRequested.

Hata ayıklama odak sorunları

FocusManager.GetFocusedElement yöntemi, şu anda hangi öğenin odakta olduğunu size bildirir. Bu, odak görselinin konumunun belirgin olmayabileceği durumlarda kullanışlıdır. Bu bilgileri Visual Studio çıkış penceresine şu şekilde günlüğe kaydedebilirsiniz:

page.GotFocus += (object sender, RoutedEventArgs e) =>
{
    FrameworkElement focus = FocusManager.GetFocusedElement() as FrameworkElement;
    if (focus != null)
    {
        Debug.WriteLine("got focus: " + focus.Name + " (" +
            focus.GetType().ToString() + ")");
    }
};

XY gezintisinin beklediğiniz gibi çalışmamasının üç yaygın nedeni vardır:

• IsTabStop veya Visibility özelliği yanlış ayarlanmış.
• Odağı alan denetim aslında düşündüğünüzden daha büyük. XY gezintisi, denetimin yalnızca ilginç bir şey oluşturan bölümüne değil, denetimin toplam boyutuna (ActualWidth ve ActualHeight) bakar.
• Odaklanabilir denetimlerden biri diğerinin üstündedir; XY gezintisi çakışan denetimleri desteklemez.

XY gezintisi bu sorunları giderdikten sonra hala beklediğiniz gibi çalışmıyorsa, varsayılan gezintiyi geçersiz kılma bölümünde açıklanan yöntemi kullanarak odaklanmak istediğiniz öğeye el ile işaret edebilirsiniz.

XY gezintisi amaçlandığı gibi çalışıyorsa ancak odak görseli görüntülenmiyorsa, bunun nedeni aşağıdaki sorunlardan biri olabilir:

• Denetimi yeniden şablonladınız ve odak görselini eklemediniz. UseSystemFocusVisuals="True" ayarlayın veya odak görselini el ile ekleyin.
• Focus(FocusState.Pointer) çağrısını yaparak odağı taşıdınız. FocusState parametresi odak görseline ne olacağını denetler. Genellikle bunu FocusState.Programmatic olarak ayarlamanız gerekir, bu da, odak görseli daha önce görünür durumdaysa görünür kalmasını ve daha önce gizlenmişse gizli kalmasını sağlar.

Bu bölümün geri kalanında, XY gezintisini kullanırken karşılaşılan yaygın tasarım zorlukları hakkında ayrıntılı bilgiler ve bunları çözmek için çeşitli yollar sunulmaktadır.

Erişilemez kullanıcı arabirimi

XY odak gezintisi kullanıcıyı yukarı, aşağı, sola ve sağa hareket etmeyle sınırladığı için kullanıcı arabiriminin bölümlerinin erişilemediği senaryolarla karşılaşabilirsiniz. Aşağıdaki diyagramda XY odak gezintisinin desteklemediği kullanıcı arabirimi düzeninin bir örneği gösterilmektedir. Ortadaki öğeye oyun çubuğu/uzak kullanılarak erişilemediğine dikkat edin çünkü dikey ve yatay gezinti önceliklendirilecek ve ortadaki öğe hiçbir zaman odaklanmak için yeterli önceliğe sahip olmayacaktır.

Bazı nedenlerden dolayı kullanıcı arabirimini yeniden düzenlemek mümkün değilse, varsayılan odak davranışını geçersiz kılmak için sonraki bölümde açıklanan tekniklerden birini kullanın.

Varsayılan gezintiyi geçersiz kılma

Evrensel Windows Platformu, D-pad/sol çubuk gezintisinin kullanıcıya anlamlı olmasını sağlamaya çalışsa da, uygulamanızın amaçları için iyileştirilmiş davranışı garanti edemez. Gezintinin uygulamanız için en iyi duruma getirildiğinden emin olmak için en iyi yol, bunu bir oyun yüzeyiyle test etmek ve kullanıcı tarafından her kullanıcı arabirimi öğesine uygulamanızın senaryoları için anlamlı bir şekilde erişilebildiğini onaylamaktır. Uygulamanızın senaryoları, sağlanan XY odak gezintisi aracılığıyla elde edilmeyecek bir davranış çağrısında bulunursa, aşağıdaki bölümlerde yer alan önerileri takip etmeyi ve/veya odağı mantıksal bir öğeye yerleştirmek için davranışı geçersiz kılmayı göz önünde bulundurun.

Aşağıdaki kod parçacığı, XY odak gezinti davranışını nasıl geçersiz kılabileceğinizi gösterir:

<StackPanel>
    <Button x:Name="MyBtnLeft"
            Content="Search" />
    <Button x:Name="MyBtnRight"
            Content="Delete"/>
    <Button x:Name="MyBtnTop"
            Content="Update" />
    <Button x:Name="MyBtnDown"
            Content="Undo" />
    <Button Content="Home"  
            XYFocusLeft="{x:Bind MyBtnLeft}"
            XYFocusRight="{x:Bind MyBtnRight}"
            XYFocusDown="{x:Bind MyBtnDown}"
            XYFocusUp="{x:Bind MyBtnTop}" />
</StackPanel>

Bu durumda, odak düğmeye Home geldiğinde ve kullanıcı sola gittiğinde, odak düğmeye MyBtnLeft taşınır; kullanıcı sağa giderse, odak düğmeye MyBtnRight taşınır ve bu şekilde devam eder.

Odağın belirli bir yöndeki bir denetimden taşınmasını önlemek için XYFocus* özelliğini kullanarak odağı aynı denetime işaret edin.

<Button Name="HomeButton"  
        Content="Home"  
        XYFocusLeft ="{x:Bind HomeButton}" />

Bu XYFocus özellikleri kullanan bir denetim üst öğesi, odağı olan alt öğe aynı XYFocus özelliği kullanmadığı sürece, bir sonraki odak adayı görsel ağacının dışındayken de alt öğelerinin gezintisini zorlayabilir.

<StackPanel Orientation="Horizontal" Margin="300,300">
    <UserControl XYFocusRight="{x:Bind ButtonThree}">
        <StackPanel>
            <Button Content="One"/>
            <Button Content="Two"/>
        </StackPanel>
    </UserControl>
    <StackPanel>
        <Button x:Name="ButtonThree" Content="Three"/>
        <Button Content="Four"/>
    </StackPanel>
</StackPanel>

Yukarıdaki örnekte, odak Button İki'deyse ve kullanıcı sağa giderse, en iyi odak adayı Button Dört'tür; ancak, ebeveyn UserControl görsel ağacının dışına çıktığında oraya gitmesi için zorladığı için odak Button Üç'e taşınır.

En az tıklama yolu

Kullanıcının en az sayıda tıklamayla en yaygın görevleri gerçekleştirmesine izin vermeye çalışın. Aşağıdaki örnekte, başlangıçta odağı alan Oynat düğmesi ile yaygın olarak kullanılan bir öğe arasına TextBlock yerleştirilmiştir. Bu düzenleme, öncelikli görevler arasında gereksiz bir öğe yerleştirmek amacıyla yapılmıştır.

Aşağıdaki örnekte, TextBlock bunun yerine Yürüt düğmesinin hemen üstüne yerleştirilir. Öncelikli görevler arasında gereksiz öğelerin yerleştirilmemesi için kullanıcı arabirimini yeniden düzenlemek, uygulamanızın kullanılabilirliğini büyük ölçüde artırır.

CommandBar ve ContextFlyout

CommandBar kullanırken, Sorun: Uzun kaydırma listesi/kılavuzdan sonra bulunan kullanıcı arabirimi öğeleri bölümünde belirtildiği gibi listede kaydırma sorununu aklınızda bulundurun. Aşağıdaki görüntüde, liste/kılavuzun altında CommandBar bulunan bir kullanıcı arabirimi düzeni gösterilmektedir. kullanıcının CommandBar öğesine ulaşması için listeyi/kılavuzu tamamen aşağı doğru kaydırması gerekir.

Listenin/ızgaranın CommandBarüstüne yerleştirirseniz ne olur? Listeyi/kılavuzu aşağı kaydıran bir kullanıcı, CommandBar öğesine ulaşmak için yukarı doğru kaydırması gerekse de, önceki yapılandırmaya göre gezinme biraz daha az olur. Bunun, uygulamanızın ilk odağının öğesinin yanına veya üstüne CommandBaryerleştirildiği varsayılır; ilk odak liste/kılavuz altındaysa bu yaklaşım da çalışmaz. Bu CommandBar öğeler çok sık erişilmesi gerekmeyen genel eylem öğeleriyse ( eşitle düğmesi gibi), bunların listenin/kılavuzun üzerinde olması kabul edilebilir.

Öğeleri dikey olarak yığamıyor CommandBarolsanız da, bunları kaydırma yönüne (örneğin, dikey kaydırma listesinin soluna veya sağ kısmına veya yatay olarak kaydırma listesinin üstüne veya altına) yerleştirmek, kullanıcı arabirimi düzeninizde düzgün çalışıp çalışmadığını göz önünde bulundurmak isteyebileceğiniz bir diğer seçenektir.

Uygulamanızın kullanıcılar tarafından kolayca erişilebilmesi gereken öğeleri içeren bir CommandBar öğesi varsa, bu öğeleri bir ContextFlyout içine yerleştirip CommandBar öğesinden çıkarmayı düşünebilirsiniz. ContextFlyout , UIElement'in bir özelliğidir ve bu öğeyle ilişkilendirilmiş bağlam menüsüdür. Bilgisayarda, ile ContextFlyoutbir öğeye sağ tıkladığınızda bu bağlam menüsü açılır. Xbox One'da odak böyle bir öğe üzerindeyken Menü düğmesine bastığınızda bu durum oluşur.

Kullanıcı arabirimi düzeni zorlukları

XY odak gezintisinin yapısı nedeniyle bazı kullanıcı arabirimi düzenleri daha zorludur ve duruma göre değerlendirilmelidir. Tek bir "doğru" yol olmasa da ve seçtiğiniz çözüm uygulamanızın özel gereksinimlerine bağlı olsa da, harika bir TV deneyimi sağlamak için kullanabileceğiniz bazı teknikler vardır.

Bunu daha iyi anlamak için, bu sorunların ve bunların üstesinden gelmek için kullanılan tekniklerin bazılarını gösteren hayali bir uygulamaya göz atalım.

Uyarı

Bu sahte uygulama, kullanıcı arabirimi sorunlarını ve bunlara olası çözümleri göstermek için tasarlanmıştır ve belirli bir uygulama için en iyi kullanıcı deneyimini göstermek üzere tasarlanmamıştır.

Aşağıda, satışa sunulan evlerin listesini, haritayı, bir özelliğin açıklamasını ve diğer bilgileri gösteren hayali bir emlak uygulaması yer almaktadır. Bu uygulama, aşağıdaki teknikleri kullanarak üstesinden gelebileceğiniz üç zorluk oluşturur:

• KULLANıCı arabirimini yeniden düzenleme
• Etkileşim üzerine odaklanma
• Mouse modu

Sorun: Uzun bir kaydırma listesi/kılavuzunun ardından bulunan kullanıcı arabirimi öğeleri

Aşağıdaki görüntüde gösterilen özelliklerin ListView'u çok uzun bir kaydırma listesidir. etkileşimgerekliListView, kullanıcı listeye gittiğinde odak listedeki ilk öğeye yerleştirilir. Kullanıcının Önceki veya Sonraki düğmesine ulaşması için listedeki tüm öğeleri gözden geçirmelidir. Kullanıcının listenin tamamında dolaşmasını zorunlu hale getirmenin zor olduğu durumlarda (yani, listenin bu deneyimin kabul edilebilir olması için yeterince kısa olmadığında) diğer seçenekleri göz önünde bulundurmak isteyebilirsiniz.

Solutions

KULLANıCı arabirimini yeniden düzenleme

İlk odağınız sayfanın en altına yerleştirilmediği sürece, uzun bir kaydırma listesinin üstünde yer alan kullanıcı arabirimi öğelerine, altta yer almasına kıyasla genellikle daha kolay erişilebilir. Bu yeni düzen diğer cihazlarda çalışıyorsa, yalnızca Xbox One için özel kullanıcı arabirimi değişiklikleri yapmak yerine tüm cihaz ailelerinin düzenini değiştirmek daha az maliyetli bir yaklaşım olabilir. Ayrıca, kullanıcı arabirimi öğelerini kaydırma yönüne zıt yerleştirmek (yani dikey kaydırma yapılan bir listeye yatay ya da yatay kaydırma yapılan bir listeye dikey olarak) erişilebilirliği daha da artırır.

Odak etkileşimi

Etkileşim gerektiğinde, tüm ListView tek bir odak hedefi haline gelir. Kullanıcı, bir sonraki odaklanılabilir öğeye ulaşmak için listenin içeriğini atlayabilir. Hangi denetimlerin etkileşimi desteklediği ve bunları Odak katılımında nasıl kullanacağınız hakkında daha fazla bilgi edinin.

Sorun: Odaklanabilir öğe içermeyen ScrollViewer

XY odak gezintisi bir kerede tek bir odaklanabilir UI öğesine gitmek gerektiğinden, odaklanabilir öğe içermeyen bir ScrollViewer (bu örnekte olduğu gibi yalnızca metin içeren bir öğe gibi) kullanıcının içindeki ScrollViewertüm içeriği görüntüleyemediği bir senaryoya neden olabilir. Bu ve diğer ilgili senaryoların çözümleri için bkz. Odak Etkileşimi.

Sorun: Serbest kaydırma kullanıcı arabirimi

Uygulamanız çizim yüzeyi veya bu örnekte bir harita gibi serbestçe kaydıran bir kullanıcı arabirimi gerektirdiğinde XY odak gezintisi çalışmaz. Böyle durumlarda, kullanıcının kullanıcı arabirimi öğesi içinde serbestçe gezinmesine izin vermek için fare modunu açabilirsiniz.

Fare modu

XY odak gezintisi ve etkileşimi bölümünde açıklandığı gibi, Xbox One'da odak bir XY gezinti sistemi kullanılarak taşınır ve kullanıcının yukarı, aşağı, sola ve sağa hareket ederek odağı denetimden denetime kaydırmasına olanak tanır. Ancak , WebView ve MapControl gibi bazı denetimler, kullanıcıların işaretçiyi denetimin sınırları içinde serbestçe hareket ettirebileceği fare benzeri bir etkileşim gerektirir. Bazı uygulamalar, kullanıcının işaretçiyi tüm sayfa boyunca hareket ettirmesinin mantıklı olduğu durumlardır. Bu, kullanıcıların fareyle bilgisayarda deneyimlediklerine benzer bir oyun kolu/uzaktan kumanda deneyimi sağlar.

Bu senaryolarda, sayfanın tamamı için veya bir sayfanın içindeki denetimde bir işaretçi (fare modu) istemeniz gerekir. Örneğin, uygulamanız yalnızca denetimin içinde fare modunu kullanan bir denetime sahip bir WebView sayfaya ve diğer her yerde XY odak gezintisine sahip olabilir. İşaretçi istemek için, denetim veya sayfa devrede olduğunda mı yoksabir sayfanın odağı olduğunda mı istediğinizi belirtebilirsiniz.

Uyarı

Denetim odak aldığında işaretçi isteme işlemi desteklenmemektedir.

Xbox One'da çalışan hem XAML hem de barındırılan web uygulamaları için, tüm uygulama için fare modu varsayılan olarak açıktır. Bunu kapatmanız ve uygulamanızı XY gezintisi için iyileştirmeniz kesinlikle önerilir. Bunu yapmak için özelliğini Application.RequiresPointerMode olarak ayarlayınWhenRequested, böylece fare modunu yalnızca bir denetim veya sayfa çağırdığında etkinleştirebilirsiniz.

Bunu bir XAML uygulamasında yapmak için sınıfınızda App aşağıdaki kodu kullanın:

public App()
{
    this.InitializeComponent();
    this.RequiresPointerMode =
        Windows.UI.Xaml.ApplicationRequiresPointerMode.WhenRequested;
    this.Suspending += OnSuspending;
}

HTML/JavaScript için örnek kod da dahil olmak üzere daha fazla bilgi için bkz. Fare modunu devre dışı bırakma.

Aşağıdaki diyagramda fare modunda gamepad/remote için düğme eşlemeleri gösterilmektedir.

Uyarı

Fare modu yalnızca xbox one'da oyun çubuğu/uzak ile desteklenir. Diğer cihaz ailelerinde ve giriş türlerinde sessizce yoksayılır.

Üzerinde fare modunu etkinleştirmek için denetim veya sayfadaki RequiresPointer özelliğini kullanın. Bu özelliğin üç olası değeri vardır: Never (varsayılan değer), WhenEngagedve WhenFocused.

Denetimde fare modunu etkinleştirme

Kullanıcı bir denetimi RequiresPointer="WhenEngaged" ile kullandığında, kullanıcı onu bırakana kadar denetimde fare modu etkinleştirilir. Aşağıdaki kod parçacığı, devreye girildiğinde fare modunu etkinleştiren basit MapControl bir kod parçacığını gösterir:

<Page>
    <Grid>
        <MapControl IsEngagementRequired="true"
                    RequiresPointer="WhenEngaged"/>
    </Grid>
</Page>

Uyarı

Eğer bir denetim etkileşime geçtiğinde fare modunu etkinleştiriyorsa, fare modunun etkinleşmesi için IsEngagementRequired="true" ile de etkileşimde bulunulması gereklidir; aksi takdirde, fare modu hiçbir zaman etkinleştirilmez.

Bir denetim fare modundayken iç içe geçmiş denetimleri de fare modunda olur. Alt öğelerinin istenen modu yoksayılır—bir ebeveynin fare modunda olması mümkün olduğu halde bir alt öğenin olmaması mümkün değildir.

Ayrıca, bir denetimin istenen modu yalnızca odak aldığında incelenir, bu nedenle odak olduğunda mod dinamik olarak değişmez.

Sayfada fare modunu etkinleştirme

Bir sayfa özelliğine RequiresPointer="WhenFocused"sahip olduğunda, odak geldiğinde tüm sayfa için fare modu etkinleştirilir. Aşağıdaki kod parçacığı, bir sayfaya bu özelliğin verilmesini gösterir:

<Page RequiresPointer="WhenFocused">
    ...
</Page>

Uyarı

Değer WhenFocused yalnızca Sayfa nesnelerinde desteklenir. Bir denetimde bu değeri ayarlamaya çalışırsanız, bir hata fırlatılır.

Tam ekran içeriği için fare modunu devre dışı bırakma

Genellikle videoyu veya diğer içerik türlerini tam ekranda görüntülerken imleci gizlemek istersiniz çünkü kullanıcının dikkatini dağıtabilir. Bu senaryo, uygulamanın geri kalanı fare modunu kullandığında, ancak tam ekran içeriğini gösterirken kapatmak istediğinizde oluşur. Bunu yapmak için, tam ekran içeriğini kendi Pageüzerine yerleştirin ve aşağıdaki adımları izleyin.

1. App nesnesinde RequiresPointerMode="WhenRequested" ayarlayın.
2. Tam ekran Pagedışındaki her Page nesnede ayarlayınRequiresPointer="WhenFocused".
3. Tam ekran için Page, RequiresPointer="Never" ayarlayın.

Bu şekilde, tam ekran içeriği gösterilirken imleç hiçbir zaman görünmez.

Odak görseli

Odak görseli, şu anda odağı olan kullanıcı arabirimi öğesinin etrafındaki kenarlıktır. Bu, kullanıcının kullanıcı arabiriminizde kaybolmadan kolayca gezinebilmesini sağlar.

Görsel bir güncelleştirme ve odak görseline eklenen çok sayıda özelleştirme seçeneğiyle geliştiriciler, tek bir odak görselin bilgisayarlar ve Xbox One'ın yanı sıra klavye ve/veya gamepad/remote destekleyen diğer Windows cihazlarında da iyi çalışacağına güvenebilir.

Aynı odak görseli farklı platformlarda kullanılabilse de, kullanıcının karşılaştığı bağlam 3 metrelik deneyim için biraz farklıdır. Kullanıcının TV ekranının tamamına tam olarak dikkat etmediğini ve bu nedenle görseli aramanın sıkıntısını önlemek için şu anda odaklanmış olan öğenin kullanıcıya her zaman net bir şekilde görünür olması önemlidir.

Odak görselinin bir oyun çubuğu veya uzaktan denetim kullanılırken varsayılan olarak görüntülendiğini, ancak klavyenin görüntülenmediğini de aklınızda bulundurmak önemlidir. Bu nedenle, uygulamayı uygulamasanız bile, uygulamanızı Xbox One'da çalıştırdığınızda görünür.

İlk odak görüntüsü yerleştirme

Bir uygulamayı başlatırken veya bir sayfaya gezinirken, odağı kullanıcının işlem yapacağı ilk öğe olarak anlamlı olan bir kullanıcı arabirimi öğesine yerleştirin. Örneğin, bir fotoğraf uygulaması odağı galerideki ilk öğeye, bir şarkının ayrıntılı görünümüne gidilen bir müzik uygulaması ise müzik çalma kolaylığı için odağı oynat düğmesine yerleştirebilir.

İlk odağı uygulamanızın sol üst bölgesine (veya sağdan sola akış için sağ üstte) yerleştirmeyi deneyin. Çoğu kullanıcı önce bu köşeye odaklanma eğilimindedir çünkü uygulama içerik akışı genellikle burada başlar.

Odağı net bir şekilde görünür hale getirme

Bir odak görseli, kullanıcının odağı aramadan kaldığınız yerden devam edebilmesi için her zaman ekranda görünür olmalıdır. Benzer şekilde, ekranda her zaman odaklanabilir bir öğe olmalıdır; örneğin, yalnızca metin içeren ve odaklanabilir öğeleri olmayan açılır pencereleri kullanmayın.

Bu kuralın bir istisnası, video izleme veya görüntüleri görüntüleme gibi tam ekran deneyimler için geçerlidir ve bu durumlarda odak görselinin gösterilmesi uygun olmaz.

Odağı göster

Odak gösterme, kullanıcı oyun yüzeyindeki veya klavyedeki odağı düğme gibi focus alabilen öğelere taşıdığında, bu öğelerin kenarlarına animasyon uygulayan bir aydınlatma efektidir. Odaklanmış öğelerin kenarlığındaki parlamanın animasyonunu yaparak, Odağı ortaya çıkar seçeneği kullanıcılara odağın nerede olduğunu ve odağın nereye gittiğini daha iyi anlamalarını sağlar.

Reveal odak varsayılan olarak kapalıdır. 3 metrelik deneyimler için uygulama oluşturucunuzda Application.FocusVisualKind özelliğini ayarlayarak odağı göstermeyi kabul etmeniz gerekir.

    if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
    {
        this.FocusVisualKind = FocusVisualKind.Reveal;
    }

Daha fazla bilgi için Odağı Göster yönergelerine bakın.

Odak görselini özelleştirme

Odak görselini özelleştirmek isterseniz, her denetim için odak görseli ile ilgili özellikleri değiştirerek bunu yapabilirsiniz. Uygulamanızı kişiselleştirmek için yararlanabileceğiniz çeşitli özellikler vardır.

Hatta görsel durumlarını kullanarak kendi odak görsellerinizi çizerek sistem tarafından sağlanan odak görsellerinden vazgeçebilirsiniz. Daha fazla bilgi için bkz. VisualState.

Hafif kapatma örtüsü

Kullanıcının dikkatini kullanıcının oyun kumandasıyla veya uzaktan kumandayla işlemekte olduğu kullanıcı arabirimi öğelerine çağırmak için UWP, uygulama Xbox One'da çalışırken açılır kullanıcı arabirimi dışındaki alanları kapsayan bir "duman" katmanını otomatik olarak ekler. Bunun için fazladan çalışma gerekmez, ancak kullanıcı arabiriminizi tasarlarken göz önünde bulundurmanız gereken bir şeydir. Duman katmanını LightDismissOverlayMode etkinleştirmek veya devre dışı bırakmak için herhangi bir FlyoutBase özelliği ayarlayabilirsiniz; varsayılan olarak Autoolarak ayarlanır; yani Xbox'ta etkinleştirilir ve başka bir yerde devre dışı bırakılır. Daha fazla bilgi için bkz. Modal vs light dismiss.

Odak etkileşimi

Odak etkileşimi, bir uygulamayla etkileşimi kolaylaştırmak için bir oyun kolu veya uzaktan kumanda kullanımını daha rahat hale getirir.

Uyarı

Odak etkileşiminin ayarlanması klavyeyi veya diğer giriş cihazlarını etkilemez.

IsFocusEngagementEnabled bir FrameworkElement nesnesindeki özelliği True olarak ayarlandığında, denetimi odak etkileşimi gerektiriyor olarak işaretler. Bu, kullanıcının denetimi "devreye almak" ve onunla etkileşim kurmak için A/Select düğmesine basması gerektiği anlamına gelir. İşlem tamamlandığında B /Geri düğmesine basarak denetimi devre dışı bırakabilir ve denetimin dışına gidebilirler.

Uyarı

IsFocusEngagementEnabled yeni bir API'dir ve henüz belgelenmemiştir.

Odak tuzağı

Odak yakalama, kullanıcı bir uygulamanın kullanıcı arabiriminde gezinmeye çalıştığında ancak bir denetim içinde "kapana kısıldığında" gerçekleşir ve bu da denetimin dışına taşınmayı zorlaştırır ve hatta imkansız hale getirir.

Aşağıdaki örnekte odak yakalama oluşturan kullanıcı arabirimi gösterilmektedir.

Kullanıcı sol düğmeden sağ düğmeye gitmek istiyorsa tek yapması gerekenin D-pad/sol çubuğun sağ tuşuna iki kez basmak olduğunu varsaymak mantıklı olacaktır. Ancak Kaydırıcı etkileşim gerektirmiyorsa, aşağıdaki davranış ortaya çıkar: kullanıcı ilk kez sağa bastığında odak Slider'e kayacak, ve kullanıcı yeniden sağa bastığında, Slider'nin tutamacı sağa doğru hareket edecektir. Kullanıcı tutamacı sağa doğru taşımaya devam eder ve düğmeye ulaşamaz.

Bu sorunu çözmek için çeşitli yaklaşımlar vardır. Bunlardan biri, üzerinde Önceki ve Sonraki düğmelerini yeniden konumlandırdığımız XY odak gezintisi ve etkileşimindeki emlak uygulaması örneğine benzer şekilde farklı bir düzen tasarlamaktırListView. Denetimlerin aşağıdaki görüntüde olduğu gibi yatay yerine dikey olarak yığılması sorunu çözer.

Artık kullanıcı, D-pad/sol çubuk üzerinde yukarı ve aşağı basarak denetimlerin her birine gidebilir ve Slider odağı aldığında, Slider tutamacı beklendiği gibi taşımak için sola ve sağa basabilir.

Bu sorunu çözmenin bir diğer yaklaşımı, Slider üzerinde katılım gerektirmektir. ayarlarsanız IsFocusEngagementEnabled="True", bu aşağıdaki davranışa neden olur.

Slider odak etkileşimi gerektirdiğinde, kullanıcı doğrudan D-pad/sol çubuğun sağ tuşuna iki kez basarak sağ taraftaki düğmeye ulaşabilir. Bu çözüm, kullanıcı arabirimi ayarlaması gerektirmediğinden ve beklenen davranışı ürettiğinden harikadır.

Öğe denetimleri

Kaydırıcı denetiminin yanı sıra, etkileşim gerektirmek isteyebileceğiniz başka denetimler de vardır, örneğin:

• ListBox
• ListView
• GridView
• Çevirme Görünümü

Slider denetiminin aksine, bu kontrol unsurları odağı yakalamaz; ancak büyük miktarda veri içerirse kullanılabilirlik sorunlarına neden olabilir. Aşağıda, büyük miktarda veri içeren bir ListView örneği verilmiştir.

Örneğe Slider benzer şekilde, üstteki düğmeden alttaki düğmeye bir gamepad/remote ile gitmeyi deneyelim. Üst düğmeye odaklanarak başlayıp, D-pad/stick tuşuna aşağı doğru bastığınızda odak, ListView içindeki ilk öğeye ("Öğe 1") geçer. Kullanıcı yeniden aşağı bastığında, listedeki bir sonraki öğe odağı alır, alttaki düğmeyi değil. Düğmeye ulaşmak için kullanıcının önce ListView içindeki her öğede gezinmesi gerekir. ListView büyük miktarda veri içeriyorsa, bu uygun bir kullanıcı deneyimi değil, rahatsız edici olabilir.

Bu sorunu çözmek için, IsFocusEngagementEnabled="True" üzerinde özelliğini ListView üzerine görevlendirmeyi gerektirecek şekilde ayarlayın. Bu, kullanıcının yalnızca bir tuşa basarak hızlı bir şekilde ListView üzerinden atlamasına olanak tanır. Ancak, odaktayken A/Select düğmesine basmazlarsa ve ardından B/Geri düğmesine basarak bağlantıyı kesmezlerse, listede gezinemeyecek veya listeden bir öğe seçemeyecekler.

Kaydırma Görüntüleyici

Bu denetimlerden biraz farklı olan ScrollViewer, dikkate alınması gereken kendi ilginçliklerine sahiptir. Odaklanabilir içeriğe sahip bir ScrollViewer varsa, bu içeriğe varsayılan olarak ScrollViewer üzerinden gidildiğinde, odaklanabilir öğeleri arasında geçiş yapabilirsiniz. Bir ListView'da olduğu gibi, ScrollViewer dışında gezinmek için her bir öğeyi kaydırarak gezmeniz gerekir.

ScrollViewer Üzerinde odaklanabilir içerik yoksa (örneğin, yalnızca metin içeriyorsa) kullanıcının IsFocusEngagementEnabled="True" düğmesini kullanarak etkileşim kurabilmesini ScrollViewer ayarlayabilirsiniz. Etkileşime geçtikten sonra D-pad/sol çubuğu kullanarak metinde gezinebilir ve bitirdiklerinde etkileşimi sonlandırmak için B/Geri düğmesine basabilirler.

Başka bir yaklaşım, kullanıcının kontrolü devreye sokmasına gerek kalmadan, IsTabStop="True" üzerinde ayarı kurarak yapılabilir. Böylece, ScrollViewer üzerinde odaklandığında, eğer içinde odaklanabilir bir öğe yoksa, ScrollViewer kullanarak kaydırabilirler.

Odak etkileşimi varsayılanları

Bazı denetimler odak yakalamaya, varsayılan ayarlarının odak etkileşimi gerektirmesini sağlayacak kadar yaygın olarak neden olurken, diğer denetimlerde odak etkileşimi varsayılan olarak kapalıdır ancak bu özelliğin açılması yararlı olabilir. Aşağıdaki tabloda bu denetimler ve bunların varsayılan odak etkileşimi davranışları listelemektedir.

Yönetim	Odak görevlendirme varsayılanı
Takvim Tarih Seçici	On
FlipView	Off
Kılavuz Görünümü	Off
ListBox	Off
Liste Görünümü (ListView)	Off
Kaydırma Görüntüleyici	Off
SemantikZoom	Off
Kaydırma çubuğu	On

Diğer tüm Windows denetimleri, IsFocusEngagementEnabled="True" kullanıldığında hiçbir davranışsal veya görsel değişiklikle sonuçlanmaz.

Özet

Belirli bir cihaz veya deneyim için en iyi duruma getirilmiş Windows uygulamaları oluşturabilirsiniz, ancak Evrensel Windows Platformu, giriş cihazı veya kullanıcı yeteneğinden bağımsız olarak hem 6 metrelik hem de 10 metrelik deneyimlerde cihazlar arasında başarıyla kullanılabilecek uygulamalar oluşturmanıza da olanak tanır. Bu makaledeki önerileri kullanmak, uygulamanızın hem TV'de hem de bilgisayarda olduğu kadar iyi olmasını sağlayabilir.

İlgili makaleler

• Xbox ve TV için Tasarım Yapmak
• Windows uygulamaları için cihaz rehberi