Interaksi gamepad dan kontrol jarak jauh

Banyak pengalaman interaksi dibagikan antara gamepad, remote control, dan keyboard

Bangun pengalaman interaksi di aplikasi Windows Anda yang memastikan aplikasi Anda dapat digunakan dan dapat diakses melalui jenis input tradisional PC, laptop, dan tablet (mouse, keyboard, sentuhan, dan sebagainya), serta jenis input yang khas dari pengalaman TV dan Xbox 10 kaki , seperti gamepad dan remote control.

Lihat Merancang untuk Xbox dan TV untuk panduan desain umum tentang aplikasi Windows dalam pengalaman 10 kaki .

Gambaran Umum

Dalam topik ini, kami membahas apa yang harus Anda pertimbangkan dalam desain interaksi Anda (atau apa yang tidak Anda lakukan, jika platform mencarinya untuk Anda), dan memberikan panduan, rekomendasi, dan saran untuk membangun aplikasi Windows yang menyenangkan untuk digunakan terlepas dari perangkat, jenis input, atau kemampuan dan preferensi pengguna.

Intinya, aplikasi Anda harus intuitif dan mudah digunakan di lingkungan 2 kaki seperti di lingkungan 10 kaki (dan sebaliknya). Dukung perangkat pilihan pengguna, buat fokus UI jelas dan tidak salah, atur konten sehingga navigasi konsisten dan dapat diprediksi, dan beri pengguna jalur sesingkat mungkin untuk apa yang ingin mereka lakukan.

Nota

Sebagian besar cuplikan kode dalam topik ini ada di XAML/C#; namun, prinsip dan konsep berlaku untuk semua aplikasi Windows. Jika Anda mengembangkan aplikasi Windows HTML/JavaScript untuk Xbox, lihat pustaka yang sangat baik, TVHelpers, di GitHub.

Optimalkan untuk pengalaman 2 kaki dan 10 kaki

Sebagai minimum, kami sarankan Anda menguji aplikasi Anda untuk memastikan aplikasi berfungsi dengan baik dalam skenario jarak 2 kaki dan 10 kaki, dan bahwa semua fungsionalitas dapat ditemukan dan diakses oleh gamepad Xbox dan kontrol jarak jauh.

Berikut adalah beberapa cara lain untuk mengoptimalkan aplikasi agar dapat digunakan dalam pengalaman jarak dekat (2 kaki) dan jarak jauh (10 kaki) serta dengan semua perangkat input, yang masing-masing menaut ke bagian yang tepat dalam topik ini.

Nota

Karena gamepad Xbox dan kontrol jarak jauh mendukung banyak perilaku dan pengalaman keyboard Windows, rekomendasi ini sesuai untuk kedua jenis input. Lihat Interaksi keyboard untuk info keyboard yang lebih terperinci.

Fitur	Description
Navigasi dan interaksi fokus XY	Navigasi fokus XY memungkinkan pengguna untuk menavigasi di sekitar UI aplikasi Anda. Namun, ini membatasi pengguna untuk menavigasi ke atas, bawah, kiri, dan kanan. Rekomendasi untuk menangani pertimbangan ini dan pertimbangan lain diuraikan di bagian ini.
Mode mouse	Navigasi fokus XY tidak praktis, atau bahkan mungkin, untuk beberapa jenis aplikasi, seperti peta atau aplikasi gambar dan lukisan. Dalam kasus ini, mode mouse memungkinkan pengguna menavigasi dengan bebas dengan gamepad atau remote control, seperti mouse pada PC.
Fokus visual	Visual fokus adalah batas yang menyoroti elemen UI yang saat ini difokuskan. Ini membantu pengguna dengan cepat mengidentifikasi UI yang mereka navigasikan atau berinteraksi dengannya.
Keterlibatan fokus	Keterlibatan fokus mengharuskan pengguna untuk menekan tombol A/Pilih pada gamepad atau kontrol jarak jauh ketika elemen UI memiliki fokus untuk berinteraksi dengannya.
Tombol perangkat keras	Gamepad dan remote control menyediakan tombol dan konfigurasi yang sangat berbeda.

Gamepad dan pengendali jarak jauh

Sama seperti keyboard dan mouse untuk PC, dan sentuhan untuk ponsel dan tablet, gamepad dan remote control adalah perangkat input utama untuk pengalaman dari jarak 10 kaki. Bagian ini memperkenalkan apa itu tombol perangkat keras dan apa yang mereka lakukan. Dalam navigasi fokus XY dan interaksi dan mode mouse, Anda akan mempelajari cara mengoptimalkan aplikasi saat menggunakan perangkat input ini.

Kualitas gamepad dan perilaku jarak jauh yang Anda dapatkan di luar kotak tergantung pada seberapa baik keyboard didukung di aplikasi Anda. Cara yang baik untuk memastikan bahwa aplikasi Anda akan bekerja dengan baik dengan gamepad /remote adalah dengan memastikan bahwa ia bekerja dengan baik dengan keyboard di PC, dan kemudian menguji dengan gamepad /remote untuk menemukan titik lemah di UI Anda.

Tombol perangkat keras

Di seluruh dokumen ini, tombol akan dirujuk oleh nama yang diberikan dalam diagram berikut.

Seperti yang Anda lihat dari diagram, ada beberapa tombol yang didukung pada gamepad yang tidak didukung pada remote control, dan sebaliknya. Meskipun Anda dapat menggunakan tombol yang hanya didukung pada satu perangkat input untuk membuat navigasi UI lebih cepat, ketahuilah bahwa menggunakannya untuk interaksi penting dapat menciptakan situasi di mana pengguna tidak dapat berinteraksi dengan bagian UI tertentu.

Tabel berikut mencantumkan semua tombol perangkat keras yang didukung oleh aplikasi Windows, dan perangkat input mana yang mendukungnya.

Button	Pengontrol Permainan	Kontrol jarak jauh
Tombol A atau Tombol Pilih	Yes	Yes
Tombol B/Kembali	Yes	Yes
Tombol pengendali arah (D-pad)	Yes	Yes
Tombol Menu	Yes	Yes
Tombol Tampilan	Yes	Yes
Tombol X dan Y	Yes	Tidak.
Tongkat kiri	Yes	Tidak.
Tongkat kanan	Yes	Tidak.
Pemicu kiri dan kanan	Yes	Tidak.
Bumper kiri dan kanan	Yes	Tidak.
Tombol OneGuide	Tidak.	Yes
Tombol Volume	Tidak.	Yes
Tombol untuk mengubah saluran	Tidak.	Yes
Tombol pengontrol media	Tidak.	Yes
Tombol Matikan Suara	Tidak.	Yes

Dukungan tombol bawaan

UWP secara otomatis memetakan perilaku input keyboard yang ada ke gamepad dan input kontrol jarak jauh. Tabel berikut mencantumkan pemetaan bawaan ini.

Keyboard	Pengendali permainan/remote control
Tombol panah	D-pad (juga tongkat kiri di gamepad)
Bilah Spasi	Tombol A atau Tombol Pilih
Masuk	Tombol A atau Tombol Pilih
Melarikan diri	Tombol B/Kembali*

*Ketika peristiwa KeyDown maupun KeyUp untuk tombol B tidak ditangani oleh aplikasi, peristiwa SystemNavigationManager.BackRequested akan diaktifkan, yang seharusnya mengakibatkan navigasi mundur dalam aplikasi. Namun, Anda harus menerapkan ini sendiri, seperti dalam cuplikan kode berikut:

// 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;
}

Nota

Jika tombol B digunakan untuk kembali, maka jangan tampilkan tombol kembali di UI. Jika Anda menggunakan tampilan Navigasi, tombol kembali akan disembunyikan secara otomatis. Untuk informasi selengkapnya tentang navigasi mundur, lihat Riwayat navigasi dan navigasi mundur untuk aplikasi Windows.

Aplikasi Windows di Xbox One juga mendukung penekanan tombol Menu untuk membuka menu konteks. Untuk informasi selengkapnya, lihat CommandBar dan ContextFlyout.

Dukungan akselerator

Tombol akselerator adalah tombol yang dapat digunakan untuk mempercepat navigasi melalui UI. Namun, tombol-tombol ini mungkin unik untuk perangkat input tertentu, jadi perlu diingat bahwa tidak semua pengguna akan dapat menggunakan fungsi-fungsi ini. Bahkan, gamepad saat ini adalah satu-satunya perangkat input yang mendukung fungsi akselerator untuk aplikasi Windows di Xbox One.

Tabel berikut mencantumkan dukungan akselerator yang disertakan dalam UWP, serta yang dapat Anda terapkan sendiri. Manfaatkan perilaku ini di UI kustom Anda untuk memberikan pengalaman pengguna yang konsisten dan ramah.

Interaksi	Papan Ketik/Tetikus	Pengontrol Permainan	Terintegrasi untuk:	Disarankan untuk:
Halaman atas/bawah	Halaman atas/bawah	Pemicu kiri/kanan	CalendarView, ListBox, ListViewBase, ListView, ScrollViewer, Selector, LoopingSelector, ComboBox, FlipView	Tampilan yang mendukung pengguliran vertikal
Halaman kiri/kanan	None	Bumper kiri/kanan	ListBox, ListViewBase, ListView, ScrollViewer, Selector, LoopingSelector, FlipView	Tampilan yang mendukung pengguliran horizontal
Memperbesar/memperkecil	Ctrl + -	Pemicu kiri/kanan	None	ScrollViewer, tampilan yang mendukung memperbesar dan memperkecil
Buka/tutup panel navigasi	None	Tampilkan	None	Panel navigasi
Cari	None	Tombol Y	None	Pintasan ke fungsi pencarian utama di aplikasi
Buka menu konteks	Klik kanan	Tombol Menu	ContextFlyout	Menu kontekstual

Navigasi dan interaksi fokus XY

Jika aplikasi Anda mendukung navigasi fokus yang tepat untuk keyboard, ini akan diterjemahkan dengan baik ke gamepad dan kontrol jarak jauh. Navigasi dengan tombol panah dipetakan ke D-pad (serta tongkat kiri pada gamepad), dan interaksi dengan elemen UI dipetakan ke tombol Enter/Select (lihat Gamepad dan remote control).

Banyak peristiwa dan properti digunakan oleh keyboard dan gamepad — keduanya memicu KeyDown dan KeyUp event, serta hanya akan menavigasi ke kontrol yang memiliki properti IsTabStop="True" dan Visibility="Visible". Untuk panduan desain keyboard, lihat Interaksi keyboard.

Jika dukungan keyboard diimplementasikan dengan benar, aplikasi Anda akan bekerja dengan cukup baik; namun, mungkin ada beberapa pekerjaan tambahan yang diperlukan untuk mendukung setiap skenario. Pikirkan kebutuhan spesifik aplikasi Anda untuk memberikan pengalaman pengguna terbaik.

Penting

Mode mouse diaktifkan secara default untuk aplikasi Windows yang berjalan di Xbox One. Untuk menonaktifkan mode mouse dan mengaktifkan navigasi fokus XY, atur Application.RequiresPointerMode=WhenRequested.

Debugging masalah fokus

Metode FocusManager.GetFocusedElement akan memberi tahu Anda elemen mana yang saat ini memiliki fokus. Ini berguna untuk situasi di mana lokasi visual fokus mungkin tidak jelas. Anda dapat mencatat informasi ini ke jendela output Visual Studio seperti itu:

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

Ada tiga alasan umum mengapa navigasi XY mungkin tidak berfungsi seperti yang Anda harapkan:

• Properti IsTabStop atau Visibility diatur dengan salah.
• Kontrol yang mendapatkan fokus sebenarnya lebih besar dari perkiraan Anda—Navigasi XY melihat pada ukuran total kontrol (ActualWidth dan ActualHeight), bukan hanya bagian kontrol yang menampilkan sesuatu yang menarik.
• Satu kontrol yang dapat difokuskan berada di atas kontrol lain—navigasi XY tidak mendukung kontrol yang tumpang tindih.

Jika navigasi XY masih tidak berfungsi seperti yang Anda harapkan setelah memperbaiki masalah ini, Anda dapat mengarahkan secara manual ke elemen yang ingin Anda fokuskan menggunakan metode yang dijelaskan dalam Mengambil alih navigasi default.

Jika navigasi XY berfungsi seperti yang dimaksudkan tetapi tidak ada visual fokus yang ditampilkan, salah satu masalah berikut mungkin menjadi penyebabnya:

• Anda membuat templat ulang kontrol dan tidak menyertakan visual fokus. Atur UseSystemFocusVisuals="True" atau tambahkan visual fokus secara manual.
• Anda memindahkan fokus dengan memanggil Focus(FocusState.Pointer). Parameter FocusState mengontrol apa yang terjadi pada visual fokus. Umumnya Anda harus mengatur ini ke FocusState.Programmatic, yang membuat visual fokus tetap terlihat jika terlihat sebelumnya, dan tersembunyi jika disembunyikan sebelumnya.

Sisa bagian ini masuk ke detail tentang tantangan desain umum saat menggunakan navigasi XY, dan menawarkan beberapa cara untuk menyelesaikannya.

UI yang tidak dapat diakses

Karena navigasi fokus XY membatasi pengguna untuk bergerak ke atas, bawah, kiri, dan kanan, Anda mungkin berakhir dengan skenario di mana bagian UI tidak dapat diakses. Diagram berikut mengilustrasikan contoh jenis tata letak UI yang tidak didukung navigasi fokus XY. Perhatikan bahwa elemen di tengah tidak dapat diakses dengan menggunakan gamepad/remote karena navigasi vertikal dan horizontal akan diprioritaskan dan elemen tengah tidak akan pernah menjadi prioritas yang cukup tinggi untuk mendapatkan fokus.

Jika karena alasan tertentu mengatur ulang UI tidak dimungkinkan, gunakan salah satu teknik yang dibahas di bagian berikutnya untuk mengambil alih perilaku fokus default.

Menimpa navigasi bawaan

Meskipun Universal Windows Platform berusaha memastikan bahwa navigasi dengan D-pad atau tongkat kiri dapat dipahami oleh pengguna, platform tersebut tidak dapat menjamin perilaku yang dioptimalkan sesuai dengan tujuan aplikasi Anda. Cara terbaik untuk memastikan bahwa navigasi dioptimalkan untuk aplikasi Anda adalah dengan mengujinya dengan gamepad dan mengonfirmasi bahwa setiap elemen UI dapat diakses oleh pengguna dengan cara yang masuk akal untuk skenario aplikasi Anda. Jika skenario aplikasi Anda memerlukan perilaku yang tidak dapat dicapai melalui navigasi fokus XY yang telah disediakan, pertimbangkan untuk mengikuti rekomendasi di bagian berikut dan/atau menyesuaikan perilaku untuk menempatkan fokus pada item logis.

Cuplikan kode berikut menunjukkan bagaimana Anda dapat mengambil alih perilaku navigasi fokus XY:

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

Dalam hal ini, ketika fokus ada pada Home tombol dan pengguna menavigasi ke kiri, fokus akan berpindah ke MyBtnLeft tombol; jika pengguna menavigasi ke kanan, fokus akan berpindah ke MyBtnRight tombol; dan sebagainya.

Untuk mencegah fokus berpindah dari kontrol ke arah tertentu, gunakan XYFocus* properti untuk mengarahkannya ke kontrol yang sama:

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

Dengan menggunakan properti XYFocus ini, induk kontrol juga dapat memaksa navigasi anak-anaknya ketika kandidat fokus berikutnya berada di luar pohon visualnya, kecuali jika anak yang memiliki fokus menggunakan properti yang sama XYFocus.

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

Dalam sampel di atas, jika fokusnya adalah pada Button Dua dan pengguna menavigasi ke kanan, kandidat fokus terbaik adalah Button Empat; namun, fokus dipindahkan ke Button Tiga karena induk UserControl memaksanya untuk menavigasi ke sana ketika keluar dari pohon visualnya.

Jalur klik paling sedikit

Cobalah untuk mengizinkan pengguna melakukan tugas yang paling umum dalam jumlah klik paling sedikit. Dalam contoh berikut, TextBlock ditempatkan di antara tombol Putar (yang awalnya mendapatkan fokus) dan elemen yang umum digunakan, sehingga elemen yang tidak perlu ditempatkan di antara tugas prioritas.

Dalam contoh berikut, TextBlock ditempatkan di atas tombol Putar sebagai gantinya. Cukup susun ulang UI sehingga elemen yang tidak perlu tidak ditempatkan di antara tugas prioritas akan sangat meningkatkan kegunaan aplikasi Anda.

CommandBar dan ContextFlyout

Saat menggunakan CommandBar, perlu diingat masalah menggulir daftar sebagaimana dijelaskan dalam Masalah: elemen UI yang terletak setelah menggulir panjang daftar/kisi. Gambar berikut menunjukkan tata letak UI dengan CommandBar di bagian bawah daftar/kisi. Pengguna perlu menggulir sepanjang jalan ke bawah melalui daftar/kisi untuk mencapai CommandBar.

Bagaimana jika Anda meletakkannya di CommandBaratas dari daftar/kisi? Sementara pengguna yang menggulir ke bawah daftar/kisi harus menggulir kembali ke atas untuk mencapai CommandBar, itu membutuhkan navigasi yang sedikit lebih sedikit daripada konfigurasi sebelumnya. Perhatikan bahwa ini mengasumsikan bahwa fokus awal aplikasi Anda ditempatkan di samping atau di atas CommandBar; pendekatan ini tidak akan berfungsi juga jika fokus awal berada di bawah daftar/kisi. Jika item ini CommandBar adalah item tindakan global yang tidak harus diakses sangat sering (seperti tombol Sinkronkan ), mungkin dapat diterima untuk memilikinya di atas daftar/kisi.

Meskipun Anda tidak dapat menumpuk CommandBaritem secara vertikal, menempatkannya ke arah gulir (misalnya, ke kiri atau kanan daftar gulir vertikal, atau atas atau bawah daftar gulir horizontal) adalah opsi lain yang mungkin ingin Anda pertimbangkan jika berfungsi dengan baik untuk tata letak UI Anda.

Jika aplikasi Anda memiliki CommandBar item yang harus mudah diakses oleh pengguna, Anda mungkin ingin mempertimbangkan untuk menempatkan item ini di dalam ContextFlyout dan menghapusnya dari CommandBar. ContextFlyout adalah properti UIElement dan merupakan menu konteks yang terkait dengan elemen tersebut. Di PC, ketika Anda mengklik kanan elemen dengan ContextFlyout, menu konteks tersebut akan muncul. Pada Xbox One, ini akan terjadi ketika Anda menekan tombol Menu saat fokus berada pada elemen seperti itu.

Tantangan tata letak UI

Beberapa tata letak UI lebih menantang karena sifat navigasi fokus XY, dan harus dievaluasi berdasarkan kasus per kasus. Meskipun tidak ada satu pun cara "benar", dan solusi mana yang Anda pilih sesuai dengan kebutuhan spesifik aplikasi Anda, ada beberapa teknik yang dapat Anda gunakan untuk membuat pengalaman TV yang hebat.

Untuk memahami hal ini dengan lebih baik, mari kita lihat aplikasi imajiner yang menggambarkan beberapa masalah dan teknik ini untuk mengatasinya.

Nota

Aplikasi palsu ini dimaksudkan untuk menggambarkan masalah UI dan solusi potensial untuk mereka, dan tidak dimaksudkan untuk menunjukkan pengalaman pengguna terbaik untuk aplikasi tertentu Anda.

Berikut ini adalah aplikasi real estat imajiner yang menunjukkan daftar rumah yang tersedia untuk dijual, peta, deskripsi properti, dan informasi lainnya. Aplikasi ini menimbulkan tiga tantangan yang dapat Anda atasi dengan menggunakan teknik berikut:

• Penataan ulang UI
• Keterlibatan fokus
• Mode mouse

Masalah: Elemen UI yang terletak setelah daftar/kisi yang panjang untuk digulir

ListView berisi properti yang ditampilkan dalam gambar berikut adalah daftar yang sangat panjang dan dapat digulir. Jika keterlibatantidak diperlukan pada ListView, saat pengguna menavigasi ke daftar, fokus akan ditempatkan pada item pertama dalam daftar. Agar pengguna mencapai tombol Sebelumnya atau Berikutnya , mereka harus menelusuri semua item dalam daftar. Dalam kasus seperti ini di mana mengharuskan pengguna untuk melintasi seluruh daftar menyakitkan—yaitu, ketika daftar tidak cukup singkat agar pengalaman ini dapat diterima—Anda mungkin ingin mempertimbangkan opsi lain.

Solutions

Penataan ulang UI

Kecuali fokus awal Anda ditempatkan di bagian bawah halaman, elemen UI yang ditempatkan di atas daftar gulir panjang biasanya lebih mudah diakses daripada jika ditempatkan di bawah ini. Jika tata letak baru ini berfungsi untuk perangkat lain, mengubah tata letak untuk semua keluarga perangkat alih-alih melakukan perubahan UI khusus hanya untuk Xbox One mungkin pendekatan yang lebih murah. Selain itu, menempatkan elemen UI terhadap arah menggulir (yaitu, secara horizontal ke daftar menggulir vertikal, atau secara vertikal ke daftar menggulir horizontal) akan meningkatkan aksesibilitas.

Fokus pada keterlibatan

Ketika keterlibatan diperlukan, seluruh ListView menjadi target fokus tunggal. Pengguna akan dapat melewati konten daftar untuk masuk ke elemen yang dapat difokuskan berikutnya. Baca selengkapnya tentang kontrol apa yang mendukung keterlibatan dan cara menggunakannya dalam Keterlibatan Fokus.

Masalah: ScrollViewer tanpa elemen yang dapat difokuskan

Karena navigasi fokus XY bergantung pada navigasi ke satu elemen UI yang dapat difokuskan pada satu waktu, ScrollViewer yang tidak berisi elemen yang dapat difokuskan (seperti satu dengan hanya teks, seperti dalam contoh ini) dapat menyebabkan skenario di mana pengguna tidak dapat melihat semua konten di ScrollViewer. Untuk solusi skenario ini dan lainnya, lihat Fokus keterlibatan.

Masalah: UI gulir bebas

Saat aplikasi Anda memerlukan UI yang menggulir dengan bebas, seperti permukaan gambar atau, dalam contoh ini, peta, navigasi fokus XY tidak berfungsi. Dalam kasus seperti itu, Anda dapat mengaktifkan mode mouse untuk memungkinkan pengguna menavigasi dengan bebas di dalam elemen UI.

Mode mouse

Seperti yang dijelaskan dalam navigasi dan interaksi fokus XY, pada Xbox One fokus dipindahkan dengan menggunakan sistem navigasi XY, memungkinkan pengguna untuk memindahkan fokus dari satu kendali ke kendali lainnya dengan bergerak ke atas, bawah, kiri, dan kanan. Namun, beberapa kontrol, seperti WebView dan MapControl, memerlukan interaksi seperti mouse di mana pengguna dapat dengan bebas memindahkan pointer di dalam batas kontrol. Ada juga beberapa aplikasi di mana masuk akal bagi pengguna untuk dapat memindahkan pointer di seluruh halaman, dengan pengalaman menggunakan gamepad atau remote yang mirip dengan apa yang dapat ditemukan pengguna pada PC dengan mouse.

Untuk skenario ini, Anda harus meminta penunjuk (mode mouse) untuk seluruh halaman, atau pada kontrol di dalam halaman. Misalnya, aplikasi Anda dapat memiliki halaman yang memiliki WebView kontrol yang hanya menggunakan mode mouse saat berada di dalam kontrol, dan navigasi fokus XY di tempat lain. Untuk meminta penunjuk, Anda dapat menentukan apakah Anda menginginkannya saat kontrol atau halaman dilibatkan atau saat halaman memiliki fokus.

Nota

Meminta penunjuk saat kontrol mendapatkan fokus tidak didukung.

Untuk XAML dan aplikasi web yang dihosting yang berjalan di Xbox One, mode mouse diaktifkan secara default untuk seluruh aplikasi. Sangat disarankan agar Anda menonaktifkan ini dan mengoptimalkan aplikasi Anda untuk navigasi XY. Untuk melakukan ini, atur properti ke Application.RequiresPointerModeWhenRequested sehingga Anda hanya mengaktifkan mode mouse saat kontrol atau halaman memanggilnya.

Untuk melakukan ini di aplikasi XAML, gunakan kode berikut di kelas Anda App :

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

Untuk informasi selengkapnya, termasuk kode sampel untuk HTML/JavaScript, lihat Cara menonaktifkan mode mouse.

Diagram berikut menunjukkan pemetaan tombol untuk gamepad/remote dalam mode mouse.

Nota

Mode mouse hanya didukung pada Xbox One dengan gamepad/remote. Pada keluarga perangkat lain dan jenis input, diabaikan tanpa pemberitahuan.

Gunakan properti RequiresPointer pada kontrol atau halaman untuk mengaktifkan mode mouse di dalamnya. Properti ini memiliki tiga nilai yang mungkin: Never (nilai default), WhenEngaged, dan WhenFocused.

Mengaktifkan mode mouse pada kontrol

Ketika pengguna melibatkan kontrol dengan RequiresPointer="WhenEngaged", mode mouse diaktifkan pada kontrol hingga pengguna melepaskannya. Cuplikan kode berikut menunjukkan MapControl sederhana yang mengaktifkan mode mouse ketika diaktifkan:

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

Nota

Jika kontrol mengaktifkan mode mouse saat diaktifkan, kontrol juga harus memerlukan keterlibatan dengan IsEngagementRequired="true"; jika tidak, mode mouse tidak akan pernah diaktifkan.

Ketika kontrol dalam mode mouse, kontrol tersematnya juga akan berada dalam mode mouse. Mode yang diminta untuk anak-anaknya akan diabaikan—tidak mungkin bagi induk untuk berada dalam mode tetikus sementara anak tidak.

Selain itu, mode kontrol yang diminta hanya diperiksa saat mendapatkan fokus, sehingga mode tidak akan berubah secara dinamis saat memiliki fokus.

Mengaktifkan mode mouse pada halaman

Ketika halaman memiliki properti RequiresPointer="WhenFocused", mode mouse akan diaktifkan untuk seluruh halaman ketika mendapatkan fokus. Cuplikan kode berikut menunjukkan memberikan halaman properti ini:

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

Nota

Nilai WhenFocused hanya didukung pada objek Halaman . Jika Anda mencoba mengatur nilai ini pada kontrol, pengecualian akan dilemparkan.

Menonaktifkan mode mouse untuk konten layar penuh

Biasanya saat menampilkan video atau jenis konten lain dalam layar penuh, Anda ingin menyembunyikan kursor karena dapat mengalihkan perhatian pengguna. Skenario ini terjadi ketika aplikasi lainnya menggunakan mode mouse, tetapi Anda ingin menonaktifkannya saat menampilkan konten layar penuh. Untuk melakukan ini, letakkan konten layar penuh pada Page tersendiri, dan ikuti langkah-langkah berikut.

1. Pada objek App, atur RequiresPointerMode="WhenRequested".
2. Di setiap objek Page, kecuali untuk layar penuh Page, atur RequiresPointer="WhenFocused".
3. Untuk layar Pagepenuh , atur RequiresPointer="Never".

Dengan cara ini, kursor tidak akan pernah muncul saat menampilkan konten layar penuh.

Fokus visual

Visual fokus adalah batas di sekitar elemen UI yang saat ini memiliki fokus. Ini membantu mengorientasikan pengguna sehingga mereka dapat dengan mudah menavigasi UI Anda tanpa tersesat.

Dengan pembaruan visual dan banyak opsi kustomisasi yang ditambahkan untuk memfokuskan visual, pengembang dapat mempercayai bahwa visual fokus tunggal akan bekerja dengan baik pada PC dan Xbox One, serta pada perangkat Windows lainnya yang mendukung keyboard dan/atau gamepad/jarak jauh.

Meskipun visual fokus yang sama dapat digunakan di berbagai platform, konteks di mana pengguna menemukannya sedikit berbeda untuk pengalaman 10 kaki. Anda harus berasumsi bahwa pengguna tidak memberikan perhatian penuh pada seluruh layar TV, dan oleh karena itu penting bahwa elemen yang saat ini berfokus terlihat jelas oleh pengguna setiap saat untuk menghindari frustrasi mencari visual.

Penting juga untuk diingat bahwa visual fokus ditampilkan secara default saat menggunakan gamepad atau remote control, tetapi bukan keyboard. Dengan demikian, bahkan jika Anda tidak menerapkannya, aplikasi akan muncul saat Anda menjalankan aplikasi di Xbox One.

Penempatan visual fokus awal

Saat meluncurkan aplikasi atau menavigasi ke halaman, letakkan fokus pada elemen UI yang masuk akal sebagai elemen pertama tempat pengguna akan mengambil tindakan. Misalnya, aplikasi foto dapat menempatkan fokus pada item pertama di galeri, dan aplikasi musik yang dinavigasi ke tampilan terperinci lagu mungkin menempatkan fokus pada tombol putar untuk kemudahan memutar musik.

Cobalah untuk menempatkan fokus awal di wilayah kiri atas aplikasi Anda (atau kanan atas untuk alur kanan-ke-kiri). Sebagian besar pengguna cenderung fokus pada sudut itu terlebih dahulu karena di situlah alur konten aplikasi umumnya dimulai.

Membuat fokus terlihat dengan jelas

Satu visual fokus harus selalu terlihat di layar agar pengguna dapat melanjutkan dari tempat terakhir mereka tanpa perlu mencari fokus. Demikian pula, harus ada item yang dapat difokuskan pada layar setiap saat—misalnya, jangan gunakan pop-up hanya dengan teks dan tidak ada elemen yang dapat difokuskan.

Pengecualian untuk aturan ini adalah untuk pengalaman layar penuh, seperti menonton video atau melihat gambar, dalam hal ini tidak akan sesuai untuk menampilkan visual fokus.

Ungkapkan fokus

Efek fokus terungkap adalah efek pencahayaan yang menganimasikan tepi elemen yang dapat difokuskan, seperti tombol, ketika pengguna mengalihkan fokus menggunakan gamepad atau keyboard ke elemen tersebut. Dengan memberikan animasi pada cahaya di sekitar batas elemen yang menjadi fokus, Reveal Focus memberi pengguna pemahaman yang lebih baik tentang di mana fokus berada dan ke mana fokus akan berpindah.

Fokus penyajian nonaktif secara bawaan. Untuk pengalaman antarmuka yang dapat diakses dari jarak 10 kaki, Anda harus mengaktifkan fitur untuk menampilkan fokus dengan menetapkan properti Application.FocusVisualKind di konstruktor aplikasi Anda.

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

Untuk informasi selengkapnya, lihat panduan untuk Mengungkapkan fokus.

Menyesuaikan tampilan fokus

Jika Anda ingin menyesuaikan visual fokus, Anda dapat melakukannya dengan memodifikasi properti yang terkait dengan visual fokus untuk setiap kontrol. Ada beberapa properti seperti itu yang dapat Anda manfaatkan untuk mempersonalisasi aplikasi Anda.

Anda bahkan dapat menolak visual fokus yang disediakan sistem dengan menggambar sendiri menggunakan status visual. Untuk mempelajari selengkapnya, lihat VisualState.

Overlay pengabaian cahaya

Untuk menarik perhatian pengguna ke elemen UI yang saat ini dimanipulasi pengguna dengan pengontrol game atau kontrol jarak jauh, UWP secara otomatis menambahkan lapisan "asap" yang mencakup area di luar antarmuka pengguna popup saat aplikasi berjalan di Xbox One. Ini tidak memerlukan pekerjaan tambahan, tetapi adalah sesuatu yang perlu diingat saat merancang UI Anda. Anda dapat mengatur properti LightDismissOverlayMode pada FlyoutBase apa pun untuk mengaktifkan atau menonaktifkan lapisan asap; secara default properti ini disetel ke Auto, yang berarti bahwa diaktifkan pada Xbox dan dinonaktifkan di tempat lain. Untuk informasi selengkapnya, lihat Modal vs Penutupan Ringan.

Keterlibatan terfokus

Fokus interaksi dimaksudkan untuk mempermudah penggunaan gamepad atau pengendali jarak jauh untuk berinteraksi dengan aplikasi.

Nota

Pengaturan keterlibatan fokus tidak memengaruhi keyboard atau perangkat input lainnya.

Saat properti pada objek IsFocusEngagementEnabled diatur ke , properti True menandai kontrol sebagai memerlukan keterlibatan fokus. Ini berarti bahwa pengguna harus menekan tombol A/Pilih untuk "melibatkan" kontrol dan berinteraksi dengannya. Setelah selesai, mereka dapat menekan tombol B/Back untuk melepaskan kontrol dan menavigasi keluar darinya.

Nota

IsFocusEngagementEnabled adalah API baru dan belum didokumenkan.

Penjebakan Fokus

Terjadi jebakan fokus ketika pengguna mencoba menavigasi antarmuka pengguna aplikasi tetapi menjadi "terjebak" dalam sebuah kontrol, sehingga sulit atau bahkan tidak mungkin untuk bergerak di luar kontrol tersebut.

Contoh berikut menunjukkan UI yang membuat trapping fokus.

Tombol di kiri dan kanan penggeser horizontal

Jika pengguna ingin menavigasi dari tombol kiri ke tombol kanan, logis untuk mengasumsikan bahwa yang harus mereka lakukan adalah menekan kanan pada tongkat D-pad/kiri dua kali. Namun, jika Penggeser tidak memerlukan keterlibatan, perilaku berikut akan terjadi: ketika pengguna menekan kanan pertama kali, fokus akan beralih ke Slider, dan ketika mereka menekan kanan lagi, handel Slider akan berpindah ke kanan. Pengguna akan terus memindahkan handel ke kanan dan tidak akan dapat masuk ke tombol .

Ada beberapa pendekatan untuk mengatasi masalah ini. Salah satunya adalah merancang tata letak yang berbeda, mirip dengan contoh aplikasi real estat di navigasi fokus XY dan interaksi di mana kita merelokasi tombol Sebelumnya dan Berikutnya di atas ListView. Menumpuk kontrol secara vertikal alih-alih secara horizontal seperti pada gambar berikut akan menyelesaikan masalah.

Sekarang pengguna dapat menavigasi ke setiap kontrol dengan menekan ke atas dan ke bawah pada D-pad/stick kiri, dan ketika Slider berfokus pada, mereka dapat menekan kiri dan kanan untuk memindahkan Slider pengendali, seperti yang diharapkan.

Pendekatan lain untuk memecahkan masalah ini adalah mewajibkan keterlibatan pada Slider. Jika Anda mengatur IsFocusEngagementEnabled="True", ini akan menghasilkan perilaku berikut.

Slider Ketika membutuhkan keterlibatan fokus, pengguna dapat sampai ke tombol di sebelah kanan hanya dengan menekan kanan pada tongkat D-pad/kiri dua kali. Solusi ini bagus karena tidak memerlukan penyesuaian UI dan menghasilkan perilaku yang diharapkan.

Kontrol item

Selain kontrol Slider , ada kontrol lain yang mungkin ingin Anda perlukan keterlibatannya, seperti:

• Kotak Daftar
• ListView
• GridView
• FlipView

Tidak seperti kontrol Slider, kontrol-kontrol ini tidak mengunci fokus pada dirinya sendiri; namun, kontrol ini dapat menyebabkan masalah dalam kegunaan ketika berisi data dalam jumlah besar. Berikut ini adalah sebuah contoh ListView yang berisi banyak data.

Mirip dengan contoh Slider, mari kita coba menavigasi dari tombol di bagian atas ke tombol di bagian bawah dengan gamepad/remote. Dimulai dengan fokus pada tombol atas, menekan bawah pada D-pad/stick akan menempatkan fokus pada item pertama di ListView ("Item 1"). Ketika pengguna menekan lagi, item berikutnya dalam daftar mendapatkan fokus, bukan tombol di bagian bawah. Untuk masuk ke tombol , pengguna harus menavigasi melalui setiap item di item ListView pertama. ListView Jika berisi sejumlah besar data, ini bisa merepotkan dan bukan pengalaman pengguna yang optimal.

Untuk mengatasi masalah ini, atur properti IsFocusEngagementEnabled="True" pada ListView untuk memerlukan keterlibatan di atasnya. Ini akan memungkinkan pengguna untuk dengan cepat melewatinya ListView hanya dengan menekan tombol ke bawah. Namun, mereka tidak bisa menggulir daftar atau memilih item darinya kecuali mereka mengaktifkannya dengan menekan tombol A/Pilih ketika fokus tertuju padanya, lalu menekan tombol B/Kembali untuk melepaskannya.

ScrollViewer

Sedikit berbeda dari kontrol ini adalah ScrollViewer, yang memiliki kekhasannya sendiri untuk dipertimbangkan. Jika Anda memiliki konten yang ScrollViewer dapat difokuskan, secara default menavigasi ke ScrollViewer akan memungkinkan Anda untuk berpindah melalui elemen yang dapat difokuskan. Seperti dalam ListView, Anda harus menggulir setiap item untuk menavigasi di luar ScrollViewer.

Jika ScrollViewer tidak memiliki konten yang dapat difokuskan—misalnya, jika hanya berisi teks—Anda dapat mengatur IsFocusEngagementEnabled="True" agar pengguna dapat berinteraksi dengan ScrollViewer menggunakan tombol A/Pilih. Setelah mereka terlibat, mereka dapat menggulir teks dengan menggunakan D-pad/tongkat kiri, lalu menekan tombol B/Back untuk berhenti berinteraksi ketika selesai.

Pendekatan lain adalah mengatur IsTabStop="True"ScrollViewer agar pengguna tidak perlu melibatkan kontrol—mereka hanya dapat menempatkan fokus padanya dan kemudian menggulir dengan menggunakan tongkat D-pad/kiri ketika tidak ada elemen yang dapat difokuskan dalam ScrollViewer.

Fokus pada setelan standar keterlibatan

Beberapa kontrol menyebabkan terjebaknya fokus cukup sering untuk menjamin sehingga pengaturan default mereka mengharuskan interaksi fokus, sementara yang lain memiliki interaksi fokus yang dimatikan secara default tetapi dapat memperoleh manfaat dengan mengaktifkannya. Tabel berikut mencantumkan kontrol ini dan perilaku keterlibatan fokus defaultnya.

Pengendalian	Fokuskan keterlibatan default
Pemilih Tanggal Kalender	Aktif
FlipView	Nonaktif
Tampilan Grid (GridView)	Nonaktif
ListBox	Nonaktif
TampilanDaftar (ListView)	Nonaktif
ScrollViewer	Nonaktif
SemantikZoom	Nonaktif
Penggeser	Aktif

Semua kontrol Windows lainnya tidak akan mengakibatkan perubahan perilaku atau visual saat IsFocusEngagementEnabled="True".

Ringkasan

Anda dapat membangun aplikasi Windows yang dioptimalkan untuk perangkat atau pengalaman tertentu, tetapi Universal Windows Platform juga memungkinkan Anda membangun aplikasi yang dapat digunakan dengan sukses lintas perangkat, dalam penggunaan jarak dekat dan jarak jauh, serta terlepas dari kemampuan perangkat input atau pengguna. Menggunakan rekomendasi dalam artikel ini dapat memastikan bahwa aplikasi Anda sebaik mungkin di TV dan PC.

Artikel terkait

• Merancang untuk Xbox dan TV
• Primer perangkat untuk aplikasi Windows