Interaksi Surface Dial
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 Windows Pengaturan - 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.
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.
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 Windows Pengaturan -> 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 Windows Pengaturan -> 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:
Left
Naik
Kehabisan
Right
Tidak berfungsi
Masuk
| 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 |
Masuk | 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.
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, UI terkait Surface Dial harus menyesuaikan dengan tangan yang berlawanan yang ditentukan oleh pengguna (Windows Pengaturan > 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.
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.
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.
Artikel terkait
Tutorial: Mendukung Surface Dial (dan perangkat roda lainnya) di aplikasi Windows Anda
Referensi API
- Kelas RadialController
- Kelas RadialControllerButtonClickedEventArgs
- Kelas RadialControllerConfiguration
- Kelas RadialControllerControlAcquiredEventArgs
- Kelas RadialControllerMenu
- Kelas RadialControllerMenuItem
- Kelas RadialControllerRotationChangedEventArgs
- Kelas RadialControllerScreenContact
- Kelas RadialControllerScreenContactContinuedEventArgs
- Kelas RadialControllerScreenContactStartedEventArgs
- Enum RadialControllerMenuKnownIcon
- Enum RadialControllerSystemMenuItemKind
Sampel
Sampel topik
Sampel lainnya
Tutorial Memulai: Mendukung Surface Dial (dan perangkat roda lainnya) di aplikasi Windows Anda
Windows developer
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk