Interaksi Surface Dial

Artikel
07/13/2023

Gambar Surface Dial dengan Surface Studio
Surface Dial dengan Surface Studio dan Pena (tersedia untuk dibeli di Microsoft Store).

Gambaran Umum

Perangkat roda Windows, seperti Surface Dial, adalah kategori baru perangkat input yang memungkinkan sejumlah pengalaman interaksi pengguna yang menarik dan unik untuk aplikasi Windows dan Windows.

Penting

Dalam topik ini, kami merujuk secara khusus ke interaksi Surface Dial, tetapi info tersebut berlaku untuk semua perangkat roda Windows.

Dengan faktor bentuk berdasarkan tindakan putar (atau gerakan), Surface Dial dimaksudkan sebagai perangkat input multi-modal sekunder yang melengkapi input dari perangkat utama. Dalam kebanyakan kasus, perangkat dimanipulasi oleh tangan pengguna yang tidak dominan saat melakukan tugas dengan tangan dominan mereka (seperti penintaan dengan pena). Ini tidak dirancang untuk input pointer presisi (seperti sentuhan, pena, atau mouse).

Surface Dial juga mendukung tindakan tekan dan tahan dan tindakan klik . Tekan dan tahan memiliki satu fungsi: menampilkan menu perintah. Jika menu aktif, input putar dan klik diproses oleh menu. Jika tidak, input diteruskan ke aplikasi Anda untuk diproses.

Seperti halnya semua perangkat input Windows, Anda dapat menyesuaikan dan menyesuaikan pengalaman interaksi Surface Dial agar sesuai dengan fungsionalitas di aplikasi Anda.

Tip

Digunakan bersama-sama, Surface Dial dan Surface Studio baru 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 menggunakan info ini untuk 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.

Menu di luar layar Surface Dial

Menu Surface Dial di layar

Integrasi sistem

Surface Dial terintegrasi erat dengan Windows dan mendukung sekumpulan alat bawaan pada menu: volume sistem, gulir, perbesar/perbesar tampilan, dan urungkan/ulangi.

Kumpulan alat bawaan ini beradaptasi dengan konteks sistem saat ini untuk menyertakan:

Alat kecerahan sistem saat pengguna berada di Windows Desktop
Alat trek sebelumnya/berikutnya saat media sedang diputar

Selain dukungan platform umum ini, Surface Dial juga terintegrasi erat dengan kontrol platform Windows Ink (InkCanvas dan InkToolbar).

Surface Dial dengan Surface Pen

Saat digunakan dengan Surface Dial, kontrol ini memungkinkan fungsionalitas tambahan untuk memodifikasi atribut tinta dan mengontrol stensil penggaris toolbar tinta.

Saat Anda membuka Menu Panggilan Permukaan dalam aplikasi penintaan yang menggunakan toolbar tinta, menu sekarang menyertakan alat untuk mengontrol jenis pena dan ketebalan kuas. Saat penggaris diaktifkan, alat yang sesuai ditambahkan ke menu yang memungkinkan perangkat mengontrol posisi dan sudut penggaris.

Menu Surface Dial dengan alat pemilihan pena untuk bilah alat Windows Ink

Menu Surface Dial dengan alat ukuran goresan untuk toolbar Windows Ink

Menu Surface Dial dengan alat penggaris untuk toolbar Windows Ink

Kustomisasi pengguna

Pengguna dapat menyesuaikan beberapa aspek pengalaman Dial mereka melalui halaman Pengaturan Windows -> Perangkat -> Roda , termasuk alat default, getaran (atau umpan balik haptik), dan menulis (atau dominan) tangan.

Saat menyesuaikan pengalaman pengguna Surface Dial, Anda harus selalu memastikan bahwa fungsi atau perilaku tertentu tersedia dan diaktifkan oleh pengguna.

Alat kustom

Di sini kita membahas panduan UX dan pengembang untuk menyesuaikan alat yang diekspos pada menu Surface Dial.

Panduan UX untuk alat kustom

Pastikan alat Anda sesuai dengan konteks saat ini Saat Anda membuatnya jelas dan intuitif apa yang dilakukan alat dan cara kerja interaksi Surface Dial, Anda membantu pengguna belajar dengan cepat dan tetap fokus pada tugas mereka.

Meminimalkan jumlah alat aplikasi sebanyak mungkin
Menu Surface Dial memiliki ruang untuk tujuh item. Jika ada delapan item atau lebih, pengguna perlu mengubah Dial untuk melihat alat mana yang tersedia dalam flyout luapan, membuat menu sulit dinavigasi dan alat sulit ditemukan dan dipilih.

Sebaiknya sediakan satu alat kustom untuk konteks aplikasi atau aplikasi Anda. Melakukannya memungkinkan Anda mengatur alat tersebut berdasarkan apa yang dilakukan pengguna tanpa mengharuskan mereka mengaktifkan menu Surface Dial dan memilih alat.

Memperbarui koleksi alat secara dinamis
Karena item menu Surface Dial tidak mendukung status dinonaktifkan, Anda harus menambahkan dan menghapus alat secara dinamis (termasuk alat bawaan, default) berdasarkan konteks pengguna (tampilan saat ini atau jendela yang difokuskan). Jika alat tidak relevan dengan aktivitas saat ini atau berlebihan, hapus.

Penting

Saat Anda menambahkan item ke menu, pastikan item belum ada.

Jangan hapus alat pengaturan volume sistem bawaan
Kontrol volume biasanya selalu diperlukan oleh pengguna. Mereka mungkin mendengarkan musik saat menggunakan aplikasi Anda, sehingga alat volume dan trek berikutnya harus selalu dapat diakses dari menu Surface Dial. (Alat trek berikutnya secara otomatis ditambahkan ke menu saat media sedang diputar.)

Konsisten dengan organisasi menu
Ini membantu pengguna menemukan dan mempelajari alat apa yang tersedia saat menggunakan aplikasi Anda, dan membantu meningkatkan efisiensi mereka saat beralih alat.

Menyediakan ikon berkualitas tinggi yang konsisten dengan ikon bawaan
Ikon dapat menyampaikan profesionalisme dan keunggulan, dan menginspirasi kepercayaan pada pengguna.

Menyediakan gambar PNG 64 x 64 piksel berkualitas tinggi (44 x 44 adalah yang paling kecil didukung)
Pastikan latar belakang transparan
Ikon harus mengisi sebagian besar gambar
Ikon putih harus memiliki kerangka hitam agar terlihat dalam mode kontras tinggi

Ikon dengan latar belakang alfa

Ikon ditampilkan pada menu roda dengan tema default

Ikon ditampilkan pada menu roda dengan tema High Contrast White

Menggunakan nama ringkas dan deskriptif
Nama alat ditampilkan di menu alat bersama dengan ikon alat dan juga digunakan oleh pembaca layar.

Nama harus pendek agar pas di dalam lingkaran tengah menu roda
Nama harus dengan jelas mengidentifikasi tindakan utama (tindakan pelengkap dapat disiratkan):
- Gulir menunjukkan efek kedua arah rotasi
- Urungkan menentukan tindakan utama, tetapi ulangi (tindakan pelengkap) dapat disimpulkan dan mudah ditemukan oleh pengguna

Panduan pengembang

Anda dapat menyesuaikan pengalaman Surface Dial untuk melengkapi fungsionalitas di aplikasi Anda melalui serangkaian API Windows Runtime yang komprehensif.

Seperti yang disebutkan sebelumnya, menu Surface Dial default telah diisi sebelumnya dengan sekumpulan alat bawaan yang mencakup berbagai fitur sistem dasar (volume sistem, kecerahan sistem, gulir, zoom, batalkan, dan kontrol media saat sistem mendeteksi pemutaran audio atau video yang sedang berlangsung). Namun, alat default ini mungkin tidak menyediakan fungsionalitas yang diperlukan oleh aplikasi Anda.

Di bagian berikut, kami menjelaskan cara menambahkan alat kustom ke menu Surface Dial dan menentukan alat bawaan mana yang diekspos.

Unduh versi yang lebih kuat dari sampel ini dari kustomisasi RadialController.

Menambahkan alat kustom

Dalam contoh ini, kami menambahkan alat kustom dasar yang meneruskan data input dari rotasi dan mengklik peristiwa ke beberapa kontrol UI XAML.

Pertama, kami mendeklarasikan UI kami (hanya penggeser dan tombol pengalih) di XAML.

Cuplikan layar Sampel Pengontrol Radial dengan slider horizontal diatur ke kiri.
UI aplikasi sampel

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <StackPanel x:Name="HeaderPanel" 
    Orientation="Horizontal" 
    Grid.Row="0">
      <TextBlock x:Name="Header"
        Text="RadialController customization sample"
        VerticalAlignment="Center"
        Style="{ThemeResource HeaderTextBlockStyle}"
        Margin="10,0,0,0" />
  </StackPanel>
  <StackPanel Orientation="Vertical" 
    VerticalAlignment="Center" 
    HorizontalAlignment="Center"
    Grid.Row="1">
      <!-- Slider for rotation input -->
      <Slider x:Name="RotationSlider"
        Width="300"
        HorizontalAlignment="Left"/>
      <!-- Switch for click input -->
      <ToggleSwitch x:Name="ButtonToggle"
        HorizontalAlignment="Left"/>
  </StackPanel>
</Grid>

Kemudian, di code-behind, kami menambahkan alat kustom ke menu Surface Dial dan mendeklarasikan handler input RadialController .

Kami mendapatkan referensi ke objek RadialController untuk Surface Dial (myController) dengan memanggil CreateForCurrentView.

Kami kemudian membuat instans RadialControllerMenuItem (myItem) dengan memanggil RadialControllerMenuItem.CreateFromIcon.

Selanjutnya, kami menambahkan item tersebut ke koleksi item menu.

Kami mendeklarasikan penanganan aktivitas input (ButtonClicked dan RotationChanged) untuk objek RadialController.

Terakhir, kami mendefinisikan penanganan aktivitas.

public sealed partial class MainPage : Page
{
    RadialController myController;

    public MainPage()
    {
        this.InitializeComponent();
        // Create a reference to the RadialController.
        myController = RadialController.CreateForCurrentView();

        // Create an icon for the custom tool.
        RandomAccessStreamReference icon =
          RandomAccessStreamReference.CreateFromUri(
            new Uri("ms-appx:///Assets/StoreLogo.png"));

        // Create a menu item for the custom tool.
        RadialControllerMenuItem myItem =
          RadialControllerMenuItem.CreateFromIcon("Sample", icon);

        // Add the custom tool to the RadialController menu.
        myController.Menu.Items.Add(myItem);

        // Declare input handlers for the RadialController.
        myController.ButtonClicked += MyController_ButtonClicked;
        myController.RotationChanged += MyController_RotationChanged;
    }

    // Handler for rotation input from the RadialController.
    private void MyController_RotationChanged(RadialController sender,
      RadialControllerRotationChangedEventArgs args)
    {
        if (RotationSlider.Value + args.RotationDeltaInDegrees > 100)
        {
            RotationSlider.Value = 100;
            return;
        }
        else if (RotationSlider.Value + args.RotationDeltaInDegrees < 0)
        {
            RotationSlider.Value = 0;
            return;
        }
        RotationSlider.Value += args.RotationDeltaInDegrees;
    }

    // Handler for click input from the RadialController.
    private void MyController_ButtonClicked(RadialController sender,
      RadialControllerButtonClickedEventArgs args)
    {
        ButtonToggle.IsOn = !ButtonToggle.IsOn;
    }
}

Ketika kita menjalankan aplikasi, kita menggunakan Surface Dial untuk berinteraksi dengannya. Pertama, kami menekan dan menahan untuk membuka menu dan memilih alat kustom kami. Setelah alat kustom diaktifkan, kontrol slider dapat disesuaikan dengan memutar Dial dan sakelar dapat dialihkan dengan mengeklik Dial.

Cuplikan layar Sampel Pengontrol Radial dengan slider horizontal diatur ke tengah.
UI aplikasi sampel diaktifkan menggunakan alat kustom Surface Dial

Tentukan alat bawaan

Anda dapat menggunakan kelas RadialControllerConfiguration untuk menyesuaikan koleksi item menu bawaan untuk aplikasi Anda.

Misalnya, jika aplikasi Anda tidak memiliki wilayah pengguliran atau perbesar tampilan dan tidak memerlukan fungsi pembukaan/pengulangan, alat-alat ini dapat dihapus dari menu. Ini membuka ruang pada menu untuk menambahkan alat kustom untuk aplikasi Anda.

Penting

Menu Surface Dial harus memiliki setidaknya satu item menu. Jika semua alat default dihapus sebelum Anda menambahkan salah satu alat kustom, alat default akan dipulihkan dan alat Anda ditambahkan ke koleksi default.

Sesuai pedoman desain, kami tidak menyarankan untuk menghapus alat kontrol media (volume dan trek sebelumnya/berikutnya) karena pengguna sering memiliki musik latar belakang yang diputar saat mereka melakukan tugas lain.

Di sini, kami menunjukkan cara mengonfigurasi menu Surface Dial untuk hanya menyertakan kontrol media untuk volume dan trek berikutnya/sebelumnya.

public MainPage()
{
  ...
  //Remove a subset of the default system tools
  RadialControllerConfiguration myConfiguration = 
  RadialControllerConfiguration.GetForCurrentView();
  myConfiguration.SetDefaultMenuItems(new[] 
  {
    RadialControllerSystemMenuItemKind.Volume,
      RadialControllerSystemMenuItemKind.NextPreviousTrack
  });
}

Interaksi kustom

Seperti disebutkan, Surface Dial mendukung tiga gerakan (tekan dan tahan, putar, klik) dengan interaksi default yang sesuai.

Pastikan interaksi kustom apa pun berdasarkan gerakan ini masuk akal untuk tindakan atau alat yang dipilih.

Catatan

Pengalaman interaksi tergantung pada status menu Surface Dial. Jika menu aktif, menu memproses input; jika tidak, aplikasi Anda akan melakukannya.

Tekan dan tahan

Gerakan ini mengaktifkan dan menunjukkan menu Surface Dial, tidak ada fungsionalitas aplikasi yang terkait dengan gerakan ini.

Secara default, menu ditampilkan di tengah layar pengguna. Namun, pengguna dapat mengambilnya dan memindahkannya ke mana saja yang mereka pilih.

Catatan

Saat Surface Dial ditempatkan di layar Surface Studio, menu dipusatkan di lokasi layar Surface Dial.

Putar

Surface Dial terutama dirancang untuk mendukung rotasi untuk interaksi yang melibatkan penyesuaian yang halus dan bertahas pada nilai atau kontrol analog.

Perangkat dapat diputar searah jajar dan berlawanan searah jarang, dan juga dapat memberikan umpan balik haptik untuk menunjukkan jarak diskrit.

Catatan

Umpan balik haptic dapat dinonaktifkan oleh pengguna di halaman Pengaturan Windows -> Perangkat -> Roda .

Panduan UX untuk interaksi kustom

Alat dengan sensitivitas rotasi berkelanjutan atau tinggi harus menonaktifkan umpan balik haptik

Umpan balik haptik cocok dengan sensitivitas rotasi alat aktif. Sebaiknya nonaktifkan umpan balik haptik untuk alat dengan sensitivitas rotasi berkelanjutan atau tinggi karena pengalaman pengguna bisa menjadi tidak nyaman.

Tangan dominan tidak boleh memengaruhi interaksi berbasis rotasi

Surface Dial tidak dapat mendeteksi tangan mana yang digunakan, tetapi pengguna dapat mengatur tulisan (atau tangan dominan) di Pengaturan Windows -> Perangkat -> Pena & Tinta Windows.

Lokal harus dipertimbangkan untuk semua interaksi rotasi

Maksimalkan kepuasan pelanggan dengan mengakomodasi dan menyesuaikan interaksi Anda dengan tata letak lokal dan kanan-ke-kiri.

Alat dan perintah bawaan pada menu Panggil mengikuti panduan ini untuk interaksi berbasis rotasi:

Left

Naik

Kehabisan

Gambar Surface Dial

Right

Tidak berfungsi

Dalam

Arah konseptual	Pemetaan ke Surface Dial	Rotasi searah jajaran jam	Rotasi berlawanan jajaran jam
Horizontal	Pemetaan kiri dan kanan berdasarkan bagian atas Surface Dial	Right	Left
Vertikal	Pemetaan atas dan bawah berdasarkan sisi kiri Surface Dial	Tidak berfungsi	Naik
Sumbu Z	Di (atau lebih dekat) dipetakan ke atas/kanan Keluar (atau lebih lanjut) dipetakan ke bawah/kiri	Dalam	Kehabisan

Panduan pengembang

Saat pengguna memutar perangkat, peristiwa RadialController.RotationChanged diaktifkan berdasarkan delta (RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees) relatif terhadap arah rotasi. Sensitivitas (atau resolusi) data dapat diatur dengan properti RadialController.RotationResolutionInDegrees.

Catatan

Secara default, peristiwa input rotasi dikirimkan ke objek RadialController hanya ketika perangkat diputar minimal 10 derajat. Setiap peristiwa input menyebabkan perangkat bergetar.

Secara umum, sebaiknya nonaktifkan umpan balik haptik ketika resolusi rotasi diatur ke kurang dari 5 derajat. Ini memberikan pengalaman yang lebih lancar untuk interaksi berkelanjutan.

Anda dapat mengaktifkan dan menonaktifkan umpan balik haptik untuk alat kustom dengan mengatur properti RadialController.UseAutomaticHapticFeedback .

Catatan

Anda tidak dapat mengambil alih perilaku haptik untuk alat sistem seperti kontrol volume. Untuk alat-alat ini, umpan balik haptik hanya dapat dinonaktifkan oleh pengguna dari halaman pengaturan roda.

Berikut adalah contoh cara menyesuaikan resolusi data rotasi dan mengaktifkan atau menonaktifkan umpan balik haptik.

private void MyController_ButtonClicked(RadialController sender, 
  RadialControllerButtonClickedEventArgs args)
{
  ButtonToggle.IsOn = !ButtonToggle.IsOn;

  if(ButtonToggle.IsOn)
  {
    //high resolution mode
    RotationSlider.LargeChange = 1;
    myController.UseAutomaticHapticFeedback = false;
    myController.RotationResolutionInDegrees = 1;
  }
  else
  {
    //low resolution mode
    RotationSlider.LargeChange = 10;
    myController.UseAutomaticHapticFeedback = true;
    myController.RotationResolutionInDegrees = 10;
  }
}

Klik

Mengklik Surface Dial mirip dengan mengklik tombol mouse kiri (status rotasi perangkat tidak berpengaruh pada tindakan ini).

Panduan UX

Jangan memetakan tindakan atau perintah ke gerakan ini jika pengguna tidak dapat dengan mudah pulih dari hasil

Tindakan apa pun yang diambil oleh aplikasi Anda berdasarkan pengguna yang mengklik Surface Dial harus dapat dibatalkan. Selalu aktifkan pengguna untuk dengan mudah melintasi tumpukan kembali aplikasi dan memulihkan status aplikasi sebelumnya.

Operasi biner seperti mematikan suara/menyalakan suara atau menampilkan/menyembunyikan memberikan pengalaman pengguna yang baik dengan gerakan klik.

Alat modal tidak boleh diaktifkan atau dinonaktifkan dengan mengklik Surface Dial

Beberapa mode aplikasi/alat dapat bertentangan dengan, atau menonaktifkan interaksi yang mengandalkan rotasi. Alat seperti penggaris di toolbar Windows Ink, harus diaktifkan atau dimatikan melalui ketersediaan UI lain (Toolbar Tinta menyediakan kontrol ToggleButton bawaan).

Untuk alat modal, petakan item menu Surface Dial aktif ke alat target atau ke item menu yang dipilih sebelumnya.

Panduan pengembang

Saat Surface Dial diklik, peristiwa RadialController.ButtonClicked diaktifkan. RadialControllerButtonClickedEventArgs menyertakan properti Kontak yang berisi lokasi dan area pembatas kontak Surface Dial di layar Surface Studio. Jika Surface Dial tidak bersentuhan dengan layar, properti ini null.

Di layar

Seperti yang dijelaskan sebelumnya, Surface Dial dapat digunakan bersama dengan Surface Studio untuk menampilkan menu Surface Dial dalam mode khusus di layar.

Saat dalam mode ini, Anda dapat mengintegrasikan dan menyesuaikan pengalaman interaksi Dial dengan aplikasi Anda lebih jauh. Contoh pengalaman unik yang hanya dimungkinkan dengan Surface Dial dan Surface Studio meliputi:

Menampilkan alat kontekstual (seperti palet warna) berdasarkan posisi Surface Dial, yang membuatnya lebih mudah ditemukan dan digunakan
Mengatur alat aktif berdasarkan UI tempat Surface Dial ditempatkan
Memperbesar area layar berdasarkan lokasi Surface Dial
Interaksi game unik berdasarkan lokasi layar

Panduan UX untuk interaksi di layar

Aplikasi harus merespons saat Surface Dial terdeteksi di layar

Umpan balik visual membantu menunjukkan kepada pengguna bahwa aplikasi Anda telah mendeteksi perangkat di layar Surface Studio.

Menyesuaikan antarmuka pengguna terkait Surface Dial-related berdasarkan lokasi perangkat

Perangkat (dan isi pengguna) dapat menempati antarmuka pengguna penting tergantung di mana pengguna menempatkannya.

Menyesuaikan antarmuka pengguna terkait Surface Dial-related berdasarkan interaksi pengguna

Selain oklusi perangkat keras, tangan dan lengan pengguna dapat menempati bagian layar saat menggunakan perangkat.

Area okludasi tergantung pada tangan mana yang digunakan dengan perangkat. Karena perangkat dirancang untuk digunakan terutama dengan tangan yang tidak dominan, antarmuka pengguna terkait Surface Dial harus menyesuaikan dengan tangan yang berlawanan yang ditentukan oleh pengguna (Windows Settings > Devices > Pen & Windows Ink > Pilih tangan mana yang Anda tulis dengan pengaturan).

Interaksi harus merespons posisi Surface Dial daripada gerakan

Kaki perangkat dirancang untuk menempel ke layar daripada slide, karena bukan perangkat penunjuk presisi. Oleh karena itu, kami mengharapkannya lebih umum bagi pengguna untuk mengangkat dan menempatkan Surface Dial daripada menyeretnya di layar.

Gunakan posisi layar untuk menentukan niat pengguna

Mengatur alat aktif berdasarkan konteks UI, seperti kedekatan dengan kontrol, kanvas, atau jendela, dapat meningkatkan pengalaman pengguna dengan mengurangi langkah-langkah yang diperlukan untuk melakukan tugas.

Panduan pengembang

Ketika Surface Dial ditempatkan ke permukaan digitizer Surface Studio, peristiwa RadialController.ScreenContactStarted diaktifkan dan info kontak (RadialControllerScreenContactStartedEventArgs.Contact) disediakan untuk aplikasi Anda.

Demikian pula, jika Surface Dial diklik saat bersentuhan dengan permukaan digitizer Surface Studio, peristiwa RadialController.ButtonClicked diaktifkan dan info kontak (RadialControllerButtonClickedEventArgs.Contact) disediakan untuk aplikasi Anda.

Info kontak (RadialControllerScreenContact) mencakup koordinat X/Y pusat Surface Dial di ruang koordinat aplikasi (RadialControllerScreenContact.Position), serta persegi panjang pembatas (RadialControllerScreenContact.Bounds) di Device Independent Pixels (DIPs). Info ini sangat berguna untuk memberikan konteks ke alat aktif dan memberikan umpan balik visual terkait perangkat kepada pengguna.

Dalam contoh berikut, kami telah membuat aplikasi dasar dengan empat bagian berbeda, yang masing-masing mencakup satu penggeser dan satu tombol. Kami kemudian menggunakan posisi pada layar Surface Dial untuk menentukan set slider dan tombol mana yang dikontrol oleh Surface Dial.

Pertama, kami mendeklarasikan UI kami (empat bagian, masing-masing dengan penggeser dan tombol pengalih) di XAML.

Cuplikan layar Sampel Pengontrol Radial dengan empat slider horizontal diatur ke kiri.
UI aplikasi sampel

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <StackPanel x:Name="HeaderPanel" 
        Orientation="Horizontal" 
        Grid.Row="0">
    <TextBlock x:Name="Header"
      Text="RadialController customization sample"
      VerticalAlignment="Center"
      Style="{ThemeResource HeaderTextBlockStyle}"
      Margin="10,0,0,0" />
  </StackPanel>
  <Grid Grid.Row="1" x:Name="RootGrid">
    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid x:Name="Grid0"
      Grid.Row="0"
      Grid.Column="0">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider0"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle0"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
    <Grid x:Name="Grid1"
      Grid.Row="0"
      Grid.Column="1">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider1"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle1"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
    <Grid x:Name="Grid2"
      Grid.Row="1"
      Grid.Column="0">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider2"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle2"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
    <Grid x:Name="Grid3"
      Grid.Row="1"
      Grid.Column="1">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider3"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle3"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
  </Grid>
</Grid>

Berikut adalah kode di belakang dengan handler yang ditentukan untuk posisi layar Surface Dial.

Slider ActiveSlider;
ToggleSwitch ActiveSwitch;
Grid ActiveGrid;

public MainPage()
{
  ...

  myController.ScreenContactStarted += 
    MyController_ScreenContactStarted;
  myController.ScreenContactContinued += 
    MyController_ScreenContactContinued;
  myController.ScreenContactEnded += 
    MyController_ScreenContactEnded;
  myController.ControlLost += MyController_ControlLost;

  //Set initial grid for Surface Dial input.
  ActiveGrid = Grid0;
  ActiveSlider = RotationSlider0;
  ActiveSwitch = ButtonToggle0;
}

private void MyController_ScreenContactStarted(RadialController sender, 
  RadialControllerScreenContactStartedEventArgs args)
{
  //find grid at contact location, update visuals, selection
  ActivateGridAtLocation(args.Contact.Position);
}

private void MyController_ScreenContactContinued(RadialController sender, 
  RadialControllerScreenContactContinuedEventArgs args)
{
  //if a new grid is under contact location, update visuals, selection
  if (!VisualTreeHelper.FindElementsInHostCoordinates(
    args.Contact.Position, RootGrid).Contains(ActiveGrid))
  {
    ActiveGrid.Background = new 
      SolidColorBrush(Windows.UI.Colors.White);
    ActivateGridAtLocation(args.Contact.Position);
  }
}

private void MyController_ScreenContactEnded(RadialController sender, object args)
{
  //return grid color to normal when contact leaves screen
  ActiveGrid.Background = new 
  SolidColorBrush(Windows.UI.Colors.White);
}

private void MyController_ControlLost(RadialController sender, object args)
{
  //return grid color to normal when focus lost
  ActiveGrid.Background = new 
    SolidColorBrush(Windows.UI.Colors.White);
}

private void ActivateGridAtLocation(Point Location)
{
  var elementsAtContactLocation = 
    VisualTreeHelper.FindElementsInHostCoordinates(Location, 
      RootGrid);

  foreach (UIElement element in elementsAtContactLocation)
  {
    if (element as Grid == Grid0)
    {
      ActiveSlider = RotationSlider0;
      ActiveSwitch = ButtonToggle0;
      ActiveGrid = Grid0;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
    else if (element as Grid == Grid1)
    {
      ActiveSlider = RotationSlider1;
      ActiveSwitch = ButtonToggle1;
      ActiveGrid = Grid1;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
    else if (element as Grid == Grid2)
    {
      ActiveSlider = RotationSlider2;
      ActiveSwitch = ButtonToggle2;
      ActiveGrid = Grid2;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
    else if (element as Grid == Grid3)
    {
      ActiveSlider = RotationSlider3;
      ActiveSwitch = ButtonToggle3;
      ActiveGrid = Grid3;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
  }
}

Ketika kita menjalankan aplikasi, kita menggunakan Surface Dial untuk berinteraksi dengannya. Pertama, kami menempatkan perangkat di layar Surface Studio, yang dideteksi dan dikaitkan aplikasi dengan bagian kanan bawah (lihat gambar). Kami kemudian menekan dan menahan Surface Dial untuk membuka menu dan memilih alat kustom kami. Setelah alat kustom diaktifkan, kontrol slider dapat disesuaikan dengan memutar Surface Dial dan sakelar dapat dialihkan dengan mengklik Surface Dial.

Cuplikan layar Sampel Pengontrol Radial dengan empat slider horizontal diatur ke kiri dan pengontrol keempat disorot.
UI aplikasi sampel diaktifkan menggunakan alat kustom Surface Dial

Ringkasan

Topik ini memberikan gambaran umum tentang perangkat input Surface Dial dengan UX dan panduan pengembang tentang cara menyesuaikan pengalaman pengguna untuk skenario di luar layar serta skenario di layar saat digunakan dengan Surface Studio.

Silakan kirim pertanyaan, saran, dan umpan balik Anda ke radialcontroller@microsoft.com.

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

Referensi API

Sampel

Sampel topik

Kustomisasi RadialController

Sampel lainnya

Sampel Buku Mewarnai

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

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

Sampel desktop Windows

Bagikan melalui

Interaksi Surface Dial

Gambaran Umum

Integrasi sistem

Kustomisasi pengguna

Alat kustom

Panduan UX untuk alat kustom

Panduan pengembang

Interaksi kustom

Tekan dan tahan

Putar

Panduan UX untuk interaksi kustom

Panduan pengembang

Klik

Panduan UX

Panduan pengembang

Di layar

Panduan UX untuk interaksi di layar

Panduan pengembang

Ringkasan

Referensi API

Sampel

Sampel topik

Sampel lainnya

Sumber Daya Tambahan:

Bagikan melalui

Interaksi Surface Dial

Gambaran Umum

Integrasi sistem

Kustomisasi pengguna

Alat kustom

Panduan UX untuk alat kustom

Panduan pengembang

Interaksi kustom

Tekan dan tahan

Putar

Panduan UX untuk interaksi kustom

Panduan pengembang

Klik

Panduan UX

Panduan pengembang

Di layar

Panduan UX untuk interaksi di layar

Panduan pengembang

Ringkasan

Artikel terkait

Referensi API

Sampel

Sampel topik

Sampel lainnya

Sumber Daya Tambahan: