interaksi dengan Surface Dial

Gambar Surface Dial bersama Surface Studio
Surface Dial dengan Surface Studio dan Pena.

Ikhtisar

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

Penting

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

Dengan faktor bentuk berdasarkan tindakan rotate (atau gerakan putar), Surface Dial dimaksudkan sebagai perangkat input multi-modal sekunder yang melengkapi masukan dari perangkat input 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 semua perangkat input Windows, Anda dapat menyesuaikan pengalaman interaksi Surface Dial agar sesuai dengan fungsionalitas dalam aplikasi.</c0>

Petunjuk

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 khusus "di layar".

Dengan mendeteksi lokasi kontak dan batas dari Surface Dial, sistem menggunakan informasi ini untuk menangani halangan oleh perangkat dan menampilkan versi menu yang lebih besar yang mengelilingi 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 di layar Surface Dial

Integrasi sistem

Surface Dial terintegrasi erat dengan Windows dan mendukung serangkaian alat bawaan pada menu: volume sistem, gulir, perbesar/perkecil, 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 lagu/video sebelumnya/berikutnya saat media 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 bilah alat tinta.

Saat Anda membuka Menu Surface Dial 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

Pengaturan Surface Dial dengan alat ukuran goresan untuk toolbar Tinta Windows
menu Surface Dial dengan alat ukuran sapuan untuk Windows Ink toolbar

Menu Surface Dial dengan alat penggaris untuk toolbar Tinta Windows

Kustomisasi pengguna

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

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 Ketika Anda menjelaskan dengan jelas dan intuitif tentang fungsi 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 memutar Dial untuk melihat alat mana yang tersedia di menu overflow flyout, membuat menu sulit dinavigasi dan alat sulit ditemukan serta dipilih.

Disarankan untuk menyediakan satu alat kustom untuk aplikasi atau konteks 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 default bawaan) 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 melingkar dengan tema Putih Kontras Tinggi

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
- Batalkan 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 halaman kode-belakang, kami menambahkan alat kustom ke menu Surface Dial dan mendeklarasikan pengendali input RadialController.

Kami mendapatkan referensi ke objek RadialController untuk objek 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 Rotation Diubah) 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;
    }
}

Saat menjalankan aplikasi, kami 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.
Antarmuka pengguna 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 yang dapat digulir atau diperbesar dan tidak memerlukan fungsi batalkan/ulangi, alat ini dapat dihilangkan 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 agar hanya menyertakan kontrol media seperti volume dan trek sebelumnya/berikutnya.

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.

Nota

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.

Nota

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

Putar

Surface Dial terutama dirancang untuk mendukung rotasi dalam interaksi yang melibatkan penyesuaian yang lancar dan bertahap pada nilai atau kontrol analog.

Perangkat bisa diputar searah jarum jam dan berlawanan arah jarum jam, dan juga dapat memberikan umpan balik haptik untuk menunjukkan jarak tertentu.

Nota

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

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 tangan penulisan (atau tangan dominan) di Pengaturan Windows -> Perangkat -> Pena & Windows Ink.

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:

Kiri

Ke atas

Out

Gambar dari Surface Dial

Benar

Ke bawah

Arah konseptual	Pemetaan ke Surface Dial	Rotasi searah jajaran jam	Rotasi berlawanan jajaran jam
Horisontal	Pemetaan kiri dan kanan berdasarkan bagian atas Surface Dial	Benar	Kiri
Vertikal	Pemetaan atas dan bawah berdasarkan sisi kiri Surface Dial	Ke bawah	Ke atas
Sumbu Z	Di (atau yang lebih dekat) dipetakan ke arah atas/kanan Keluar (atau lebih jauh) dipetakan ke bawah/kiri	In	Out

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 .

Nota

Secara default, peristiwa input rotasi dikirimkan ke objek RadialController hanya saat 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 .

Nota

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

Click

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 dikembalikan. Selalu memungkinkan pengguna untuk dengan mudah menjelajahi tumpukan balik 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 Tinta Windows, harus diaktifkan atau dinonaktifkan melalui keterjangkauan UI lain (Toolbar Tinta menyediakan kontrol ToggleButton bawaan).

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

Panduan pengembang

Saat Surface Dial diklik, sebuah RadialController.ButtonClicked event diaktifkan. RadialControllerButtonClickedEventArgs memiliki Contact properti yang berisi lokasi dan wilayah pembatas kontak Surface Dial di layar Surface Studio. Jika Surface Dial tidak berhubungan dengan layar, properti ini menjadi null.

Di layar

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

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

Apps harus merespons ketika Surface Dial terdeteksi di layar

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

Sesuaikan antarmuka pengguna yang terkait dengan Surface Dial berdasarkan lokasi perangkat

Perangkat (dan tubuh pengguna) dapat menghalangi antarmuka pengguna yang penting tergantung pada di mana pengguna menempatkannya.

Sesuaikan antarmuka pengguna terkait Surface Dial berdasarkan interaksi pengguna

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

Area yang terhalang tergantung pada tangan mana yang digunakan dengan perangkat. Karena perangkat dirancang untuk digunakan terutama dengan tangan yang tidak dominan, UI terkait Surface Dial harus menyesuaikan dengan tangan yang berlawanan yang ditentukan oleh pengguna (Pengaturan Windows Perangkat Pena & Tinta Windows Pengaturan Pilih tangan mana yang Anda gunakan untuk menulis).

Interactions harus merespons posisi Surface Dial daripada gerakannya

Kaki perangkat dirancang untuk menempel pada layar daripada meluncur, karena bukan perangkat penunjuk presisi. Oleh karena itu, kami berharap lebih lazim bagi pengguna untuk mengangkat dan meletakkan Surface Dial daripada menyeretnya ke seluruh 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 informasi kontak (RadialControllerScreenContactStartedEventArgs.Contact) diberikan ke 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 (DIP). 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;
    }
  }
}

Saat menjalankan aplikasi, kami menggunakan Surface Dial untuk berinteraksi dengannya. Pertama, kami menempatkan perangkat di layar Surface Studio, yang dideteksi dan dikaitkan 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 geser dapat disesuaikan dengan memutar Surface Dial dan sakelar dapat diaktifkan dengan mengklik Surface Dial.

Cuplikan layar Sampel Pengontrol Radial dengan empat slider horizontal diatur ke kiri dan pengontrol keempat disorot.
Antarmuka pengguna 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

Samples

Sampel topik

Kustomisasi RadialController

Sampel lain

sampel Coloring Book

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

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

Sampel desktop Windows

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-03-11

interaksi dengan Surface Dial

Ikhtisar

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

Click

Panduan UX

Panduan pengembang

Di layar

Panduan UX untuk interaksi di layar

Panduan pengembang

RINGKASAN

Artikel terkait

Referensi API

Samples

Sampel topik

Sampel lain

Saran dan Komentar

Sumber Daya Tambahan: