Interaksi gamepad dan kontrol jarak jauh

Bangun pengalaman interaksi di aplikasi SDK Aplikasi Windows Anda yang bekerja dengan baik dengan gamepad dan input kontrol jarak jauh, selain mouse, keyboard, dan sentuhan.

Gambaran Umum

Gamepad dan telekomando adalah perangkat masukan utama untuk pengalaman Xbox yang dirancang untuk digunakan dari jarak sekitar 10 kaki. Aplikasi Windows Anda harus dapat digunakan dan dapat diakses melalui jenis input ini serta jenis input PC tradisional.

Lihat Merancang untuk Xbox dan TV untuk panduan umum tentang desain bagi pengalaman layar 10 kaki.

API Utama

Tombol gamepad dan kontrol jarak jauh

Tabel berikut mencantumkan tombol perangkat keras dan perangkat input mana yang mendukungnya.

Button Pengontrol Permainan Kontrol jarak jauh
A/Pilih Yes Yes
B/Kembali Yes Yes
D-pad Yes Yes
Daftar Pilihan Yes Yes
Tampilkan Yes Yes
X dan Y Yes Tidak.
Tongkat kiri/kanan Yes Tidak.
Pemicu kiri/kanan Yes Tidak.
Bumper kiri/kanan Yes Tidak.

Pemetaan masukan bawaan

Windows secara otomatis memetakan input keyboard ke gamepad dan remote control:

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

Navigasi fokus XY

Navigasi fokus XY memungkinkan pengguna menavigasi UI aplikasi Anda dalam empat arah (atas, bawah, kiri, kanan) menggunakan D-pad atau tongkat kiri.

Mengaktifkan navigasi XY

Navigasi fokus XY dibangun ke dalam kerangka kerja XAML. Atur XYFocusKeyboardNavigation pada kontainer untuk mengaktifkannya:

<StackPanel XYFocusKeyboardNavigation="Enabled">
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
</StackPanel>

Mengesampingkan navigasi arah

XYFocusUpGunakan properti , XYFocusDown, XYFocusLeft, dan XYFocusRight untuk mengambil alih perilaku navigasi default:

<Button Content="Button 1"
        XYFocusRight="{x:Bind Button2}"/>
<Button x:Name="Button2" Content="Button 2"
        XYFocusLeft="{x:Bind Button1}"/>

Fokus visual

Visual fokus adalah batas yang menyoroti elemen UI yang saat ini difokuskan. Gunakan visual fokus bawaan untuk membantu pengguna menavigasi dengan gamepad atau remote control.

Di WinUI 3, sesuaikan visual fokus dengan mengatur properti pada FrameworkElement:

<Button Content="My Button"
        FocusVisualPrimaryBrush="Red"
        FocusVisualPrimaryThickness="2"
        FocusVisualSecondaryBrush="Yellow"
        FocusVisualSecondaryThickness="1"/>

Keterlibatan terfokus

Keterlibatan fokus mengharuskan pengguna menekan tombol A/Pilih untuk berinteraksi dengan kontrol yang berfokus. Ini mencegah aktivasi yang tidak disengaja saat menavigasi dengan D-pad.

Atur IsFocusEngagementEnabled pada kontrol yang mendapat manfaat dari perilaku ini:

<Slider IsFocusEngagementEnabled="True"/>

Saat mode fokus diaktifkan, pengguna menekan A/Select untuk "mengaktifkan" kontrol, berinteraksi dengan kontrol tersebut, lalu menekan B untuk "menonaktifkannya."

Mode tetikus

Untuk pengalaman aplikasi di mana navigasi fokus XY tidak praktis (seperti peta atau aplikasi gambar), aktifkan mode mouse. Ini memungkinkan pengguna menavigasi dengan bebas dengan gamepad, mirip dengan menggunakan mouse.

Nota

UWP menyediakan properti Application.RequiresPointerMode untuk seluruh aplikasi untuk skenario ini. Microsoft.UI.Xaml.Application di WinUI 3 tidak memiliki properti yang setara, jadi atur RequiresPointer pada masing-masing Page sebagai gantinya.

Untuk mengaktifkan mode mouse untuk halaman tertentu, atur RequiresPointer pada Page:

<Page RequiresPointer="WhenEngaged">
    <!-- Page content -->
</Page>

CommandBar dan ContextFlyout

Gunakan ContextFlyout untuk menyediakan menu konteks yang dapat diakses melalui tombol Menu di gamepad:

<GridView>
    <GridView.ContextFlyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Open"/>
            <MenuFlyoutItem Text="Delete"/>
        </MenuFlyout>
    </GridView.ContextFlyout>
</GridView>

Praktik terbaik

  • Uji aplikasi Anda dengan pengalaman 2 kaki (desktop) dan 10 kaki (TV).
  • Pastikan semua fungsionalitas dapat diakses dengan navigasi D-pad saja.
  • Gunakan XYFocusKeyboardNavigation pada kontainer untuk mengaktifkan navigasi arah.
  • Tempatkan konten dan kontrol terpenting di bagian atas atau awal tata letak Anda.
  • Jangan mengandalkan tombol yang unik untuk satu perangkat input untuk interaksi penting.
  • Last updated on