Share via

Tutorial: Mendukung Surface Dial (dan perangkat roda lainnya) di aplikasi Windows Anda

  • Artikel

Image of Surface Dial with Surface Studio
Surface Dial dengan Surface Studio dan Surface Pen (tersedia untuk dibeli di Microsoft Store).

Tutorial ini menjelaskan cara menyesuaikan pengalaman interaksi pengguna yang didukung oleh perangkat roda seperti Surface Dial. Kami menggunakan cuplikan dari aplikasi sampel, yang dapat Anda unduh dari GitHub (lihat Kode sampel), untuk menunjukkan berbagai fitur dan API RadialController terkait yang dibahas di setiap langkah.

Kami berfokus pada hal-hal berikut:

  • Menentukan alat bawaan mana yang ditampilkan pada menu RadialController
  • Menambahkan alat kustom ke menu
  • Mengontrol umpan balik haptik
  • Menyesuaikan interaksi klik
  • Menyesuaikan interaksi rotasi

Untuk informasi selengkapnya tentang menerapkan fitur ini dan fitur lainnya, lihat Interaksi Surface Dial di aplikasi Windows.

Pendahuluan

Surface Dial adalah perangkat input sekunder yang membantu pengguna menjadi lebih produktif ketika digunakan bersama dengan perangkat input utama seperti pena, sentuhan, atau mouse. Sebagai perangkat input sekunder, Dial biasanya digunakan dengan tangan yang tidak dominan untuk menyediakan akses baik ke perintah sistem maupun ke alat dan fungsionalitas lain yang lebih kontekstual.

Dial mendukung tiga gerakan dasar:

  • Tekan dan tahan untuk menampilkan menu perintah bawaan.
  • Putar untuk menyoroti item menu (jika menu aktif) atau untuk mengubah tindakan saat ini di aplikasi (jika menu tidak aktif).
  • Klik untuk memilih item menu yang disorot (jika menu aktif) atau untuk memanggil perintah di aplikasi (jika menu tidak aktif).

Prasyarat

Menyiapkan perangkat Anda

  1. Pastikan perangkat Windows Anda aktif.
  2. Buka Mulai, pilih Pengaturan> Devices>Bluetooth & perangkat lain, lalu nyalakan Bluetooth.
  3. Lepaskan bagian bawah Surface Dial untuk membuka kompartemen baterai, dan pastikan ada dua baterai AAA di dalamnya.
  4. Jika tab baterai ada di bagian bawah Dial, lepaskan.
  5. Tekan dan tahan tombol inset kecil di samping baterai hingga lampu Bluetooth berkedip.
  6. Kembali ke perangkat Windows Anda dan pilih Tambahkan Bluetooth atau perangkat lain.
  7. Dalam dialog Tambahkan perangkat, pilih Bluetooth>Surface Dial. Surface Dial Anda sekarang harus tersambung dan ditambahkan ke daftar perangkat di bawah Mouse, keyboard, & pena di halaman Bluetooth & pengaturan perangkat lainnya.
  8. Uji Dial dengan menekan dan menahannya selama beberapa detik untuk menampilkan menu bawaan.
  9. Jika menu tidak ditampilkan di layar Anda (Dial juga harus bergetar), kembali ke pengaturan Bluetooth, hapus perangkat, dan coba sambungkan perangkat lagi.

Catatan

Perangkat roda dapat dikonfigurasi melalui pengaturan Roda :

  1. Pada menu Mulai, pilih Pengaturan.
  2. Pilih Roda Perangkat>.
    Wheel settings screen

Sekarang Anda siap untuk memulai tutorial ini.

Kode Sampel

Sepanjang tutorial ini, kami menggunakan aplikasi sampel untuk menunjukkan konsep dan fungsionalitas yang dibahas.

Unduh sampel Visual Studio dan kode sumber ini dari GitHub di sampel windows-appsample-get-started-radialcontroller:

  1. Pilih tombol Klon hijau atau unduh .
    Cloning the repo
  2. Jika Anda memiliki akun GitHub, Anda dapat mengkloning repositori ke komputer lokal Anda dengan memilih Buka di Visual Studio.
  3. Jika Anda tidak memiliki akun GitHub, atau Anda hanya ingin salinan lokal proyek, pilih Unduh ZIP (Anda harus memeriksa kembali secara teratur untuk mengunduh pembaruan terbaru).

Penting

Sebagian besar kode dalam sampel dikomentari. Saat kita membahas setiap langkah dalam topik ini, Anda akan diminta untuk membatalkan komentar berbagai bagian kode. Di Visual Studio, cukup sorot baris kode, dan tekan CTRL-K lalu CTRL-U.

Komponen yang mendukung fungsionalitas roda

Objek ini memberikan sebagian besar pengalaman perangkat roda untuk aplikasi Windows.

Komponen Deskripsi
Kelas RadialController dan terkait Mewakili perangkat input roda atau aksesori seperti Surface Dial.
IRadialControllerConfigurationInterop / IRadialControllerInterop
Kami tidak membahas fungsionalitas ini di sini, untuk informasi selengkapnya, lihat sampel desktop Windows.		 Memungkinkan interoperabilitas dengan aplikasi Windows.

Langkah 1: Jalankan sampel

Setelah Anda mengunduh aplikasi sampel RadialController, verifikasi bahwa aplikasi tersebut berjalan:

  1. Buka proyek sampel di Visual Studio .
  2. Atur menu dropdown Platform Solusi ke pilihan non-Arm.
  3. Tekan F5 untuk mengkompilasi, menyebarkan, dan menjalankan.

Catatan

Atau, Anda dapat memilih item menu Debug>Mulai penelusuran kesalahan , atau pilih tombol Jalankan Mesin Lokal yang diperlihatkan di sini: Visual Studio Build project button

Jendela aplikasi terbuka, dan setelah layar splash muncul selama beberapa detik, Anda akan melihat layar awal ini.

Empty app

Oke, kita sekarang memiliki aplikasi Windows dasar yang akan kita gunakan di seluruh tutorial ini. Dalam langkah-langkah berikut, kami menambahkan fungsionalitas RadialController kami.

Langkah 2: Fungsionalitas RadialController Dasar

Dengan aplikasi berjalan dan di latar depan, tekan dan tahan Surface Dial untuk menampilkan menu RadialController .

Kami belum melakukan penyesuaian apa pun untuk aplikasi kami, sehingga menu berisi sekumpulan alat kontekstual default.

Gambar-gambar ini menunjukkan dua variasi menu default. (Ada banyak lainnya, termasuk hanya alat sistem dasar ketika Windows Desktop aktif dan tidak ada aplikasi di latar depan, alat penintaan tambahan saat InkToolbar ada, dan alat pemetaan saat Anda menggunakan aplikasi Peta.

Menu RadialController (default) Menu RadialController (default dengan pemutaran media)
Default RadialController menu Default RadialController menu with music

Sekarang kita akan mulai dengan beberapa penyesuaian dasar.

Langkah 3: Tambahkan kontrol untuk input roda

Pertama, mari kita tambahkan UI untuk aplikasi kita:

  1. Buka file MainPage_Basic.xaml.

  2. Temukan kode yang ditandai dengan judul langkah ini ("<-- Langkah 3: Tambahkan kontrol untuk input roda -->").

  3. Batalkan komentar baris berikut.

    <Button x:Name="InitializeSampleButton" 
        HorizontalAlignment="Center" 
        Margin="10" 
        Content="Initialize sample" />
<ToggleButton x:Name="AddRemoveToggleButton"
                HorizontalAlignment="Center" 
                Margin="10" 
                Content="Remove Item"
                IsChecked="True" 
                IsEnabled="False"/>
<Button x:Name="ResetControllerButton" 
        HorizontalAlignment="Center" 
        Margin="10" 
        Content="Reset RadialController menu" 
        IsEnabled="False"/>
<Slider x:Name="RotationSlider" Minimum="0" Maximum="10"
        Width="300"
        HorizontalAlignment="Center"/>
<TextBlock Text="{Binding ElementName=RotationSlider, Mode=OneWay, Path=Value}"
            Margin="0,0,0,20"
            HorizontalAlignment="Center"/>
<ToggleSwitch x:Name="ClickToggle"
                MinWidth="0" 
                Margin="0,0,0,20"
                HorizontalAlignment="center"/>

Pada titik ini, hanya tombol Inisialisasi sampel , penggerak, dan sakelar pengalih yang diaktifkan. Tombol lain digunakan dalam langkah-langkah selanjutnya untuk menambahkan dan menghapus item menu RadialController yang menyediakan akses ke penggeser dan beralih ke pengalih.

Basic sample app UI

Langkah 4: Sesuaikan menu RadialController dasar

Sekarang mari kita tambahkan kode yang diperlukan untuk mengaktifkan akses RadialController ke kontrol kita.

  1. Buka file MainPage_Basic.xaml.cs.
  2. Temukan kode yang ditandai dengan judul langkah ini ("// Langkah 4: Kustomisasi menu RadialController Dasar").
  3. Batalkan komentar baris berikut:

    • Referensi jenis Windows.UI.Input dan Windows.Storage.Aliran digunakan untuk fungsionalitas dalam langkah-langkah berikutnya:

      // Using directives for RadialController functionality.
using Windows.UI.Input;

    • Objek global ini (RadialController, RadialControllerConfiguration, RadialControllerMenuItem) digunakan di seluruh aplikasi kami.

      private RadialController radialController;
private RadialControllerConfiguration radialControllerConfig;
private RadialControllerMenuItem radialControllerMenuItem;

    • Di sini, kami menentukan penangan Klik untuk tombol yang memungkinkan kontrol kami dan menginisialisasi item menu RadialController kustom kami.

      InitializeSampleButton.Click += (sender, args) =>
{ InitializeSample(sender, args); };

    • Selanjutnya, kami menginisialisasi objek RadialController kami dan menyiapkan handler untuk peristiwa RotationChanged dan ButtonClicked.

      // Set up the app UI and RadialController.
private void InitializeSample(object sender, RoutedEventArgs e)
{
    ResetControllerButton.IsEnabled = true;
    AddRemoveToggleButton.IsEnabled = true;

    ResetControllerButton.Click += (resetsender, args) =>
    { ResetController(resetsender, args); };
    AddRemoveToggleButton.Click += (togglesender, args) =>
    { AddRemoveItem(togglesender, args); };

    InitializeController(sender, e);
}

    • Di sini, kami menginisialisasi item menu RadialController kustom kami. Kami menggunakan CreateForCurrentView untuk mendapatkan referensi ke objek RadialController kami, kami mengatur sensitivitas rotasi ke "1" dengan menggunakan properti RotationResolutionInDegrees, kami kemudian membuat RadialControllerMenuItem dengan menggunakan CreateFromFontGlyph, kami menambahkan item menu ke koleksi item menu RadialController, dan akhirnya, kami menggunakan SetDefaultMenuItems untuk menghapus item menu default dan hanya meninggalkan alat kustom kami.

      // Configure RadialController menu and custom tool.
private void InitializeController(object sender, RoutedEventArgs args)
{
    // Create a reference to the RadialController.
    radialController = RadialController.CreateForCurrentView();
    // Set rotation resolution to 1 degree of sensitivity.
    radialController.RotationResolutionInDegrees = 1;

    // Create the custom menu items.
    // Here, we use a font glyph for our custom tool.
    radialControllerMenuItem =
        RadialControllerMenuItem.CreateFromFontGlyph("SampleTool", "\xE1E3", "Segoe MDL2 Assets");

    // Add the item to the RadialController menu.
    radialController.Menu.Items.Add(radialControllerMenuItem);

    // Remove built-in tools to declutter the menu.
    // NOTE: The Surface Dial menu must have at least one menu item. 
    // If all built-in tools are removed before you add a custom 
    // tool, the default tools are restored and your tool is appended 
    // to the default collection.
    radialControllerConfig =
        RadialControllerConfiguration.GetForCurrentView();
    radialControllerConfig.SetDefaultMenuItems(
        new RadialControllerSystemMenuItemKind[] { });

    // Declare input handlers for the RadialController.
    // NOTE: These events are only fired when a custom tool is active.
    radialController.ButtonClicked += (clicksender, clickargs) =>
    { RadialController_ButtonClicked(clicksender, clickargs); };
    radialController.RotationChanged += (rotationsender, rotationargs) =>
    { RadialController_RotationChanged(rotationsender, rotationargs); };
}

// Connect wheel device rotation to slider control.
private void RadialController_RotationChanged(
    object sender, RadialControllerRotationChangedEventArgs args)
{
    if (RotationSlider.Value + args.RotationDeltaInDegrees >= RotationSlider.Maximum)
    {
        RotationSlider.Value = RotationSlider.Maximum;
    }
    else if (RotationSlider.Value + args.RotationDeltaInDegrees < RotationSlider.Minimum)
    {
        RotationSlider.Value = RotationSlider.Minimum;
    }
    else
    {
        RotationSlider.Value += args.RotationDeltaInDegrees;
    }
}

// Connect wheel device click to toggle switch control.
private void RadialController_ButtonClicked(
    object sender, RadialControllerButtonClickedEventArgs args)
{
    ClickToggle.IsOn = !ClickToggle.IsOn;
}
  4. Sekarang, jalankan aplikasi lagi.
  5. Pilih tombol Inisialisasi pengontrol radial.
  6. Dengan aplikasi di latar depan, tekan dan tahan Surface Dial untuk menampilkan menu. Perhatikan bahwa semua alat default telah dihapus (dengan menggunakan metode RadialControllerConfiguration.SetDefaultMenuItems ), hanya menyisakan alat kustom. Berikut adalah menu dengan alat kustom kami.
Menu RadialController (kustom)
Custom RadialController menu
  1. Pilih alat kustom dan coba interaksi yang sekarang didukung melalui Surface Dial:
    • Tindakan putar memindahkan pengguncuran.
    • Klik mengatur tombol ke aktif atau nonaktif.

Ok, mari kita kaitkan tombol-tombol itu.

Langkah 5: Mengonfigurasi menu saat runtime

Dalam langkah ini, kami menghubungkan tombol menu Tambahkan/Hapus item dan Reset RadialController untuk menunjukkan bagaimana Anda dapat menyesuaikan menu secara dinamis.

  1. Buka file MainPage_Basic.xaml.cs.

  2. Temukan kode yang ditandai dengan judul langkah ini ("// Langkah 5: Konfigurasikan menu pada runtime").

  3. Batalkan komentar kode dalam metode berikut dan jalankan aplikasi lagi, tetapi jangan pilih tombol apa pun (simpan untuk langkah berikutnya).

    // Add or remove the custom tool.
private void AddRemoveItem(object sender, RoutedEventArgs args)
{
    if (AddRemoveToggleButton?.IsChecked == true)
    {
        AddRemoveToggleButton.Content = "Remove item";
        if (!radialController.Menu.Items.Contains(radialControllerMenuItem))
        {
            radialController.Menu.Items.Add(radialControllerMenuItem);
        }
    }
    else if (AddRemoveToggleButton?.IsChecked == false)
    {
        AddRemoveToggleButton.Content = "Add item";
        if (radialController.Menu.Items.Contains(radialControllerMenuItem))
        {
            radialController.Menu.Items.Remove(radialControllerMenuItem);
            // Attempts to select and activate the previously selected tool.
            // NOTE: Does not differentiate between built-in and custom tools.
            radialController.Menu.TrySelectPreviouslySelectedMenuItem();
        }
    }
}

// Reset the RadialController to initial state.
private void ResetController(object sender, RoutedEventArgs arg)
{
    if (!radialController.Menu.Items.Contains(radialControllerMenuItem))
    {
        radialController.Menu.Items.Add(radialControllerMenuItem);
    }
    AddRemoveToggleButton.Content = "Remove item";
    AddRemoveToggleButton.IsChecked = true;
    radialControllerConfig.SetDefaultMenuItems(
        new RadialControllerSystemMenuItemKind[] { });
}

  4. Pilih tombol Hapus item lalu tekan dan tahan Dial untuk menampilkan menu lagi.

    Perhatikan bahwa menu sekarang berisi kumpulan alat default. Ingat bahwa, di Langkah 3, saat menyiapkan menu kustom kami, kami menghapus semua alat default dan hanya menambahkan alat kustom kami. Kami juga mencatat bahwa, ketika menu diatur ke koleksi kosong, item default untuk konteks saat ini dipulihkan. (Kami menambahkan alat kustom kami sebelum menghapus alat default.)

  5. Pilih tombol Tambahkan item lalu tekan dan tahan Dial.

    Perhatikan bahwa menu sekarang berisi kumpulan alat default dan alat kustom kami.

  6. Pilih tombol menu Reset RadialController lalu tekan dan tahan Dial.

    Perhatikan bahwa menu kembali ke keadaan semula.

Langkah 6: Sesuaikan haptik perangkat

Surface Dial, dan perangkat roda lainnya, dapat memberi pengguna umpan balik haptik yang sesuai dengan interaksi saat ini (berdasarkan klik atau rotasi).

Dalam langkah ini, kami menunjukkan bagaimana Anda dapat menyesuaikan umpan balik haptik dengan mengaitkan kontrol pengalihan slider dan beralih kami dan menggunakannya untuk menentukan perilaku umpan balik haptik secara dinamis. Untuk contoh ini, sakelar pengalih harus diatur ke aktif agar umpan balik diaktifkan sementara nilai slider menentukan seberapa sering umpan balik klik diulang.

Catatan

Umpan balik haptic dapat dinonaktifkan oleh pengguna di halaman roda Pengaturan> Devices.>

  1. Buka file App.xaml.cs.

  2. Temukan kode yang ditandai dengan judul langkah ini ("Langkah 6: Sesuaikan haptik perangkat").

  3. Komentari baris pertama dan ketiga ("MainPage_Basic" dan "MainPage") dan batalkan komentar yang kedua ("MainPage_Haptics").

    rootFrame.Navigate(typeof(MainPage_Basic), e.Arguments);
rootFrame.Navigate(typeof(MainPage_Haptics), e.Arguments);
rootFrame.Navigate(typeof(MainPage), e.Arguments);

  4. Buka file MainPage_Haptics.xaml.

  5. Temukan kode yang ditandai dengan judul langkah ini ("<-- Langkah 6: Sesuaikan haptik perangkat -->").

  6. Batalkan komentar baris berikut. (Kode UI ini hanya menunjukkan fitur haptics apa yang didukung oleh perangkat saat ini.)

    <StackPanel x:Name="HapticsStack" 
            Orientation="Vertical" 
            HorizontalAlignment="Center" 
            BorderBrush="Gray" 
            BorderThickness="1">
    <TextBlock Padding="10" 
                Text="Supported haptics properties:" />
    <CheckBox x:Name="CBDefault" 
                Content="Default" 
                Padding="10" 
                IsEnabled="False" 
                IsChecked="True" />
    <CheckBox x:Name="CBIntensity" 
                Content="Intensity" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPlayCount" 
                Content="Play count" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPlayDuration" 
                Content="Play duration" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBReplayPauseInterval" 
                Content="Replay/pause interval" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBBuzzContinuous" 
                Content="Buzz continuous" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBClick" 
                Content="Click" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPress" 
                Content="Press" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBRelease" 
                Content="Release" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBRumbleContinuous" 
                Content="Rumble continuous" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
</StackPanel>

  7. Buka file MainPage_Haptics.xaml.cs

  8. Temukan kode yang ditandai dengan judul langkah ini ("Langkah 6: Kustomisasi Haptik")

  9. Batalkan komentar baris berikut:

    • Referensi jenis Windows.Devices.Haptics digunakan untuk fungsionalitas dalam langkah berikutnya.

      using Windows.Devices.Haptics;

    • Di sini, kami menentukan handler untuk peristiwa ControlAcquired yang dipicu ketika item menu RadialController kustom kami dipilih.

      radialController.ControlAcquired += (rc_sender, args) =>
{ RadialController_ControlAcquired(rc_sender, args); };

    • Selanjutnya, kami menentukan handler ControlAcquired , di mana kami menonaktifkan umpan balik haptik default dan menginisialisasi UI haptics kami.

      private void RadialController_ControlAcquired(
    RadialController rc_sender,
    RadialControllerControlAcquiredEventArgs args)
{
    // Turn off default haptic feedback.
    radialController.UseAutomaticHapticFeedback = false;

    SimpleHapticsController hapticsController =
        args.SimpleHapticsController;

    // Enumerate haptic support.
    IReadOnlyCollection<SimpleHapticsControllerFeedback> supportedFeedback =
        hapticsController.SupportedFeedback;

    foreach (SimpleHapticsControllerFeedback feedback in supportedFeedback)
    {
        if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.BuzzContinuous)
        {
            CBBuzzContinuous.IsEnabled = true;
            CBBuzzContinuous.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Click)
        {
            CBClick.IsEnabled = true;
            CBClick.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Press)
        {
            CBPress.IsEnabled = true;
            CBPress.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Release)
        {
            CBRelease.IsEnabled = true;
            CBRelease.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.RumbleContinuous)
        {
            CBRumbleContinuous.IsEnabled = true;
            CBRumbleContinuous.IsChecked = true;
        }
    }

    if (hapticsController?.IsIntensitySupported == true)
    {
        CBIntensity.IsEnabled = true;
        CBIntensity.IsChecked = true;
    }
    if (hapticsController?.IsPlayCountSupported == true)
    {
        CBPlayCount.IsEnabled = true;
        CBPlayCount.IsChecked = true;
    }
    if (hapticsController?.IsPlayDurationSupported == true)
    {
        CBPlayDuration.IsEnabled = true;
        CBPlayDuration.IsChecked = true;
    }
    if (hapticsController?.IsReplayPauseIntervalSupported == true)
    {
        CBReplayPauseInterval.IsEnabled = true;
        CBReplayPauseInterval.IsChecked = true;
    }
}

    • Dalam penanganan aktivitas RotationChanged dan ButtonClicked kami, kami menghubungkan penggeser yang sesuai dan beralih kontrol tombol ke haptik kustom kami.

      // Connect wheel device rotation to slider control.
private void RadialController_RotationChanged(
    object sender, RadialControllerRotationChangedEventArgs args)
{
    ...
    if (ClickToggle.IsOn && 
        (RotationSlider.Value > RotationSlider.Minimum) && 
        (RotationSlider.Value < RotationSlider.Maximum))
    {
        SimpleHapticsControllerFeedback waveform = 
            FindWaveform(args.SimpleHapticsController, 
            KnownSimpleHapticsControllerWaveforms.BuzzContinuous);
        if (waveform != null)
        {
            args.SimpleHapticsController.SendHapticFeedback(waveform);
        }
    }
}

private void RadialController_ButtonClicked(
    object sender, RadialControllerButtonClickedEventArgs args)
{
    ...

    if (RotationSlider?.Value > 0)
    {
        SimpleHapticsControllerFeedback waveform = 
            FindWaveform(args.SimpleHapticsController, 
            KnownSimpleHapticsControllerWaveforms.Click);

        if (waveform != null)
        {
            args.SimpleHapticsController.SendHapticFeedbackForPlayCount(
                waveform, 1.0, 
                (int)RotationSlider.Value, 
                TimeSpan.Parse("1"));
        }
    }
}

    • Terakhir, kita mendapatkan Waveform yang diminta (jika didukung) untuk umpan balik haptik.

      // Get the requested waveform.
private SimpleHapticsControllerFeedback FindWaveform(
    SimpleHapticsController hapticsController,
    ushort waveform)
{
    foreach (var hapticInfo in hapticsController.SupportedFeedback)
    {
        if (hapticInfo.Waveform == waveform)
        {
            return hapticInfo;
        }
    }
    return null;
}

Sekarang jalankan aplikasi lagi untuk mencoba haptik kustom dengan mengubah nilai pengguncur dan mengalihkan-status.

Langkah 7: Tentukan interaksi di layar untuk Surface Studio dan perangkat serupa

Dipasangkan dengan Surface Studio, Surface Dial dapat memberikan pengalaman pengguna yang lebih khas.

Selain pengalaman menu tekan dan tahan default yang dijelaskan, Surface Dial juga dapat ditempatkan langsung di layar Surface Studio. Ini memungkinkan menu "di layar" khusus.

Dengan mendeteksi lokasi kontak dan batas Surface Dial, sistem menangani oklusi oleh perangkat dan menampilkan versi menu yang lebih besar yang membungkus di luar Dial. Info yang sama ini juga dapat digunakan oleh aplikasi Anda untuk mengadaptasi UI untuk kehadiran perangkat dan penggunaan yang diantisipasi, seperti penempatan tangan dan lengan pengguna.

Sampel yang menyertai tutorial ini mencakup contoh yang sedikit lebih kompleks yang menunjukkan beberapa kemampuan ini.

Untuk melihat tindakan ini (Anda memerlukan Surface Studio):

  1. Unduh sampel di perangkat Surface Studio (dengan Visual Studio terinstal)

  2. Buka sampel di Visual Studio

  3. Buka file App.xaml.cs

  4. Temukan kode yang ditandai dengan judul langkah ini ("Langkah 7: Tentukan interaksi di layar untuk Surface Studio dan perangkat serupa")

  5. Komentari baris pertama dan kedua ("MainPage_Basic" dan "MainPage_Haptics") dan batalkan komentar ketiga ("MainPage")

    rootFrame.Navigate(typeof(MainPage_Basic), e.Arguments);
rootFrame.Navigate(typeof(MainPage_Haptics), e.Arguments);
rootFrame.Navigate(typeof(MainPage), e.Arguments);

  6. Jalankan aplikasi dan tempatkan Surface Dial di masing-masing dari dua wilayah kontrol, bergantian di antaranya.
    On-screen RadialController

Ringkasan

Selamat, Anda telah menyelesaikan Tutorial Memulai: Mendukung Surface Dial (dan perangkat roda lainnya) di aplikasi Windows Anda! Kami menunjukkan kode dasar yang diperlukan untuk mendukung perangkat roda di aplikasi Windows Anda, dan cara memberikan beberapa pengalaman pengguna yang lebih kaya yang didukung oleh API RadialController .

Interaksi Surface Dial

Referensi API

Sampel

Sampel topik

Kustomisasi RadialController

Sampel lainnya

Sampel Buku Mewarnai

sampel Platform Windows Universal (C# dan C++)

Sampel desktop Windows