Bagikan melalui

Panduan pengembang interaksi sentuh

Desain aplikasi Anda dengan harapan bahwa sentuhan akan menjadi metode input utama pengguna Anda. Jika Anda menggunakan kontrol WinUI, dukungan untuk touchpad, mouse, dan pena/stylus tidak memerlukan pemrograman tambahan, karena aplikasi WinUI menyediakan ini secara gratis.

Namun, perlu diingat bahwa UI yang dioptimalkan untuk sentuhan tidak selalu lebih unggul daripada UI tradisional. Keduanya memberikan kelebihan dan kekurangan yang unik untuk teknologi dan aplikasi. Dalam perpindahan ke UI touch-first, penting untuk memahami perbedaan inti antara sentuhan, touchpad, pena/stylus, mouse, dan input keyboard.

API Penting: Windows.UI.Xaml.Input, Windows.UI.Core, Windows.Devices.Input

Banyak perangkat memiliki layar multi-sentuh yang mendukung penggunaan satu atau beberapa jari (atau kontak sentuh) sebagai input. Kontak sentuh, dan gerakan mereka, ditafsirkan sebagai gerakan sentuh dan manipulasi untuk mendukung berbagai interaksi pengguna.

Windows app mencakup sejumlah mekanisme yang berbeda untuk menangani input sentuhan, memungkinkan Anda untuk menciptakan pengalaman imersif yang dapat dijelajahi pengguna Anda dengan percaya diri. Di sini, kami membahas dasar-dasar penggunaan input sentuhan dalam Windows app.

Interaksi sentuh memerlukan tiga hal:

  • Layar sensitif sentuhan.
  • Kontak langsung (atau kedekatan dengan, jika layar memiliki sensor kedekatan dan mendukung deteksi hover) dari satu atau beberapa jari pada tampilan tersebut.
  • Pergerakan kontak sentuhan (atau ketiadaannya, sesuai dengan batas waktu).

Data input yang disediakan oleh sensor sentuh dapat berupa:

  • Ditafsirkan sebagai gerakan fisik untuk manipulasi langsung satu atau beberapa elemen UI, seperti menggeser, memutar, mengubah ukuran, atau memindahkan. (Sebaliknya, berinteraksi dengan elemen melalui properties window, kotak dialog, atau keterjanjian UI lainnya dianggap sebagai manipulasi tidak langsung.)
  • Dikenali sebagai metode input alternatif, seperti mouse atau pena.
  • Digunakan untuk melengkapi atau memodifikasi aspek metode input lainnya, seperti mengaburkan goresan tinta yang digambar dengan pena.

Input sentuh biasanya melibatkan manipulasi langsung elemen di layar. Elemen ini langsung merespons setiap kontak sentuh di dalam area uji sentuhan, dan bereaksi secara tepat terhadap pergerakan kontak sentuh berikutnya, termasuk penghapusannya.

Gerakan dan interaksi sentuhan kustom harus dirancang dengan hati-hati. Mereka harus intuitif, responsif, dan dapat ditemukan, dan mereka harus membiarkan pengguna menjelajahi aplikasi Anda dengan percaya diri.

Pastikan bahwa fungsionalitas aplikasi diekspos secara konsisten di setiap jenis perangkat input yang didukung. Jika perlu, gunakan beberapa bentuk mode input secara tidak langsung, seperti input teks untuk interaksi keyboard, atau elemen UI untuk mouse dan pena.

Ingatlah bahwa perangkat input tradisional (seperti mouse dan keyboard) sudah akrab dan menarik bagi banyak pengguna. Mereka dapat menawarkan kecepatan, akurasi, dan umpan balik taktil yang tidak dapat diberikan oleh sentuhan.

Memberikan pengalaman interaksi yang unik dan khas untuk semua perangkat input akan mendukung berbagai kemampuan dan preferensi terluas, menarik audiens seluas mungkin, dan menarik lebih banyak pelanggan ke aplikasi Anda.

Membandingkan persyaratan interaksi sentuh

Tabel berikut menunjukkan beberapa perbedaan antara perangkat input yang harus Anda pertimbangkan saat merancang aplikasi Windows yang dioptimalkan sentuhan.

Faktor Interaksi sentuh Interaksi mouse, interaksi keyboard, interaksi pena/stylus papan sentuh
Presisi Area kontak ujung jari lebih besar dari satu koordinat x-y, yang meningkatkan kemungkinan aktivasi perintah yang tidak diinginkan. Mouse dan pena serta stylus menyediakan koordinat x-y yang tepat. Sama seperti mouse komputer.
Bentuk area kontak berubah sepanjang pergerakan. Gerakan mouse dan goresan pena/stylus memasok koordinat x-y yang tepat. Fokus keyboard bersifat eksplisit. Sama seperti mouse komputer.
Tidak ada kursor mouse untuk membantu penargetan. Kursor mouse, kursor pena/stylus, dan fokus keyboard semuanya membantu dalam penyetelan sasaran. Sama seperti mouse komputer.
Anatomi manusia Gerakan ujung jari tidak tepat, karena gerakan garis lurus dengan satu atau beberapa jari sulit. Hal ini disebabkan oleh kelengkungan sendi tangan dan jumlah sendi yang terlibat dalam gerakan. Lebih mudah untuk melakukan gerakan garis lurus dengan mouse atau pena/stylus karena tangan yang mengontrol mereka melakukan jarak fisik yang lebih pendek daripada kursor di layar. Sama seperti mouse komputer.
Beberapa area pada permukaan sentuh perangkat tampilan dapat sulit dijangkau karena cengkeraman dan postur jari pengguna. Mouse dan pena/stylus dapat mencapai bagian layar mana pun sementara kontrol apa pun harus dapat diakses oleh keyboard melalui urutan tab. Postur jari dan genggaman bisa menjadi masalah.
Objek mungkin dikaburkan oleh satu atau beberapa ujung jari atau tangan pengguna. Ini dikenal sebagai oklusi. Perangkat input tidak langsung tidak menyebabkan oklusi. Sama seperti mouse komputer.
Status objek Sentuhan menggunakan model dua status: permukaan sentuhan perangkat layar diaktifkan (on) atau tidak diaktifkan (off). Tidak ada status hover yang dapat memicu umpan balik visual tambahan. Mouse, pena/stylus, dan keyboard semuanya mengekspos model tiga status: atas (mati), bawah (hidup), dan arahkan kursor (fokus).
Hover memungkinkan pengguna menjelajahi dan mempelajari tipsalat yang terkait dengan elemen UI. Mengarahkan kursor dan efek fokus dapat menyampaikan objek mana yang interaktif dan juga membantu penargetan.		 Sama seperti mouse komputer.
Interaksi yang kaya Mendukung fungsionalitas multi-sentuh: beberapa titik input (ujung jari) pada permukaan sentuh. Mendukung satu titik input. Sama seperti sentuhan.
Mendukung manipulasi objek secara langsung melalui gerakan seperti mengetuk, menyeret, menggeser, mencubit, dan memutar. Tidak ada dukungan untuk manipulasi langsung karena mouse, pena/stylus, dan keyboard adalah perangkat input tidak langsung. Sama seperti mouse komputer.

Nota

Masukan tidak langsung telah memiliki keunggulan hasil penyempurnaan selama lebih dari 25 tahun. Fitur seperti tooltip yang muncul dengan hover telah dirancang untuk menyelesaikan eksplorasi UI khusus untuk input dari touchpad, mouse, pena/stylus, dan keyboard. Fitur UI seperti ini telah dirancang ulang untuk pengalaman kaya yang disediakan oleh input sentuhan, tanpa mengorbankan pengalaman pengguna untuk perangkat lain ini.

Menggunakan umpan balik sentuh

Umpan balik visual yang sesuai selama interaksi dengan aplikasi Anda membantu pengguna mengenali, mempelajari, dan beradaptasi dengan bagaimana interaksi mereka ditafsirkan oleh aplikasi dan platform Windows. Umpan balik visual dapat menunjukkan interaksi yang berhasil, status sistem relai, meningkatkan rasa kontrol, mengurangi kesalahan, membantu pengguna memahami sistem dan perangkat input, dan mendorong interaksi.

Umpan balik visual sangat penting ketika pengguna mengandalkan input sentuh untuk aktivitas yang memerlukan akurasi dan presisi berdasarkan lokasi. Tampilkan umpan balik setiap kali dan di mana pun input sentuh terdeteksi, untuk membantu pengguna memahami aturan penargetan kustom apa pun yang ditentukan oleh aplikasi Anda dan kontrolnya.

Targeting

Penargetan dioptimalkan melalui:

  • Menyentuh ukuran target

    Pedoman ukuran yang jelas memastikan bahwa aplikasi menyediakan UI nyaman yang berisi objek dan kontrol yang mudah dan aman untuk ditargetkan.

  • Geometri kontak

    Seluruh area kontak jari menentukan objek target yang paling mungkin.

  • Scrubbing

    Item dalam grup mudah ditargetkan ulang dengan menyeret jari di antaranya (misalnya, tombol radio). Item saat ini diaktifkan ketika sentuhan dilepaskan.

  • Mengguncang

    Item yang dikemas dengan padat (misalnya, hyperlink) mudah ditargetkan kembali dengan menekan jari ke bawah dan, tanpa menggeser, menggoyangkannya bolak-balik di atas item tersebut. Karena oklusi, elemen saat ini diidentifikasi melalui tooltip atau bilah status dan diaktifkan ketika sentuhan dilepaskan.

Akurasi

Desain untuk interaksi longgar dengan menggunakan:

  • Snap-point yang dapat memudahkan untuk berhenti di lokasi yang diinginkan saat pengguna berinteraksi dengan konten.
  • Rel penunjuk arah yang dapat membantu dengan pengguliran vertikal atau horizontal, bahkan ketika tangan bergerak dalam sedikit lengkungan. Untuk informasi selengkapnya, lihatlah Panduan untuk Panning.

Halangan

Oklusi jari dan tangan dihindari melalui:

  • Ukuran dan posisi UI

    Buat elemen UI cukup besar sehingga tidak dapat sepenuhnya ditutupi oleh area kontak ujung jari.

    Tempatkan menu dan pop-up di atas area kontak jika memungkinkan.

  • Petunjuk Alat

    Tampilkan tooltip saat pengguna tetap menyentuh objek dengan jari. Ini berguna untuk menjelaskan fungsionalitas objek. Pengguna dapat menjauhkan ujung jari dari objek untuk menghindari pemanggilan tooltip.

    Untuk objek kecil, offset tooltip agar tidak tertutup oleh area kontak ujung jemari. Ini berguna untuk penargetan.

  • Pegangan untuk presisi

    Jika presisi diperlukan (misalnya, pemilihan teks), berikan pegangan seleksi yang digeser untuk meningkatkan akurasi. Untuk informasi selengkapnya, lihat Guidelines untuk memilih teks dan gambar (aplikasi Windows Runtime).

Waktu

Hindari perubahan mode yang dibatasi waktu demi manipulasi langsung. Manipulasi langsung mensimulasikan penanganan fisik objek secara langsung dan real-time. Objek merespons saat jari dipindahkan.

Sebaliknya, interaksi berwaktu terjadi setelah interaksi sentuh. Interaksi berwaktu biasanya bergantung pada ambang batas yang tidak terlihat seperti waktu, jarak, atau kecepatan untuk menentukan perintah apa yang akan dilakukan. Interaksi yang diprogram tidak memiliki umpan balik visual sampai sistem melakukan tindakan.

Manipulasi langsung memberikan sejumlah manfaat dari interaksi yang ditentukan waktu:

  • Umpan balik visual instan selama interaksi membuat pengguna merasa lebih terlibat, percaya diri, dan memegang kendali.
  • Manipulasi langsung membuatnya lebih aman untuk menjelajahi sistem karena mereka dapat dibalik—pengguna dapat dengan mudah mundur melalui tindakan mereka dengan cara yang logis dan intuitif.
  • Interaksi yang secara langsung memengaruhi objek dan meniru interaksi dunia nyata lebih intuitif, mudah ditemukan, dan mudah diingat. Mereka tidak mengandalkan interaksi yang tidak jelas atau abstrak.
  • Interaksi berwaktu bisa sulit dilakukan, karena pengguna harus mencapai ambang batas arbitrer dan tidak tampak.

Selain itu, berikut ini sangat disarankan:

  • Manipulasi tidak boleh dibedakan dengan jumlah jari yang digunakan.
  • Interaksi harus mendukung manipulasi majemuk. Misalnya, cubit untuk memperbesar sambil menyeret jari untuk menggeser.
  • Interaksi tidak boleh dibedakan berdasarkan waktu. Interaksi yang sama harus memiliki hasil yang sama terlepas dari waktu yang diperlukan untuk melakukannya. Aktivasi berbasis waktu memperkenalkan penundaan wajib bagi pengguna dan mengurangi sifat manipulasi langsung yang imersif dan persepsi responsivitas sistem.

    Nota

    Pengecualian untuk ini adalah tempat Anda menggunakan interaksi berwaktu tertentu untuk membantu dalam pembelajaran dan eksplorasi (misalnya, tekan dan tahan).

  • Deskripsi dan isjin visual yang sesuai memiliki efek besar pada penggunaan interaksi tingkat lanjut.

Tampilan aplikasi

Sesuaikan pengalaman interaksi pengguna melalui pengaturan pan/scroll dan zoom tampilan aplikasi Anda. Tampilan aplikasi menentukan cara pengguna mengakses dan memanipulasi aplikasi Anda dan kontennya. Tampilan juga menyediakan perilaku seperti inertia, pantulan batas konten, dan titik rekam jepret.

Pengaturan geser dan gulir kontrol ScrollViewer menentukan cara pengguna menavigasi dalam satu tampilan, saat konten tampilan tidak cocok dalam viewport. Tampilan tunggal, misalnya, dapat berupa halaman majalah atau buku, struktur folder komputer, pustaka dokumen, atau album foto.

Pengaturan zoom berlaku untuk zoom optik (didukung oleh kontrol ScrollViewer) dan kontrol Zoom Semantik. Semantic Zoom adalah teknik yang dioptimalkan untuk menyajikan dan menavigasi kumpulan besar data atau konten terkait dalam satu tampilan. Ini bekerja dengan menggunakan dua mode klasifikasi yang berbeda, atau tingkat perbesar tampilan. Analoginya seperti menggeser dan menggulir dalam satu tampilan. Panning dan scrolling dapat digunakan bersama dengan Semantic Zoom.

Gunakan tampilan dan peristiwa aplikasi untuk memodifikasi perilaku pan/scroll dan zoom. Ini dapat memberikan pengalaman interaksi yang lebih lancar daripada yang dimungkinkan melalui penanganan peristiwa pointer dan gerakan.

Untuk informasi selengkapnya tentang tampilan aplikasi, lihat Kontrol, tata letak, dan teks.

Interaksi sentuh kustom

Jika Anda menerapkan dukungan interaksi Anda sendiri, perlu diingat bahwa pengguna mengharapkan pengalaman intuitif yang melibatkan interaksi langsung dengan elemen UI di aplikasi Anda. Kami menyarankan agar Anda memodelkan interaksi kustom Anda di pustaka kontrol platform untuk menjaga hal-hal tetap konsisten dan dapat ditemukan. Kontrol dalam pustaka ini memberikan pengalaman interaksi pengguna penuh, termasuk interaksi standar, efek fisika animasi, umpan balik visual, dan aksesibilitas. Buat interaksi kustom hanya jika ada persyaratan yang jelas dan terdefinisi dengan baik dan interaksi dasar tidak mendukung skenario Anda.

Penting

Windows 11 dan yang lebih baru

Beberapa interaksi sentuhan tiga dan empat jari tidak akan lagi berfungsi di aplikasi Windows secara default.

Secara default, interaksi sentuh tiga dan empat jari sekarang digunakan oleh sistem untuk operasi seperti beralih atau meminimalkan jendela dan mengubah desktop virtual. Karena interaksi ini sekarang ditangani di tingkat sistem, fungsionalitas aplikasi Anda dapat terpengaruh oleh perubahan ini.

Untuk mendukung interaksi tiga atau empat jari dalam aplikasi, pengaturan pengguna baru telah diperkenalkan yang menentukan apakah sistem menangani interaksi ini atau tidak:

perangkat Bluetooth & > Touch > "Gerakan sentuhan tiga dan empat jari"

Ketika diatur ke "Aktif" (default), sistem akan menangani interaksi tiga dan empat jari (aplikasi tidak akan dapat mendukungnya).

Saat diatur ke "Nonaktif", interaksi tiga dan empat jari dapat didukung oleh aplikasi (tidak akan ditangani oleh sistem).

Jika aplikasi Anda harus mendukung interaksi ini, kami sarankan Anda memberi tahu pengguna tentang pengaturan ini dan menyediakan tautan yang meluncurkan Pengaturan Windows ke halaman yang relevan (ms-settings:devices-touch). Untuk detail selengkapnya, lihat Meluncurkan Pengaturan Windows.

Untuk memberikan dukungan sentuhan yang disesuaikan, Anda dapat menangani berbagai peristiwa UIElement. Peristiwa ini dikelompokkan ke dalam tiga tingkat abstraksi.

  • Peristiwa gerakan statis dipicu setelah interaksi selesai. Peristiwa gerakan termasuk Tapped, DoubleTapped, RightTapped, dan Holding.

    Anda dapat menonaktifkan peristiwa gerakan pada elemen tertentu dengan mengatur IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabled, dan IsHoldingEnabled ke false.

  • Peristiwa pointer seperti PointerPressed dan PointerMoved memberikan detail tingkat rendah untuk setiap kontak sentuhan, termasuk gerakan pointer dan kemampuan untuk membedakan peristiwa pers dan rilis.

    Pointer adalah jenis input generik dengan mekanisme peristiwa terpadu. Ini mengungkapkan informasi dasar, seperti posisi layar, pada sumber input aktif, yang dapat berupa layar sentuh, touchpad, mouse, atau stylus.

  • Peristiwa gerakan manipulasi, seperti ManipulationStarted, menunjukkan interaksi yang sedang berlangsung. Mereka mulai menembak ketika pengguna menyentuh elemen dan melanjutkan sampai pengguna mengangkat jari mereka, atau manipulasi dibatalkan.

    Peristiwa manipulasi termasuk interaksi multi-sentuh seperti zooming, panning, atau rotating, dan interaksi yang menggunakan data inertia dan kecepatan seperti menyeret. Informasi yang diberikan oleh peristiwa manipulasi tidak mengidentifikasi bentuk interaksi yang dilakukan, melainkan mencakup data seperti posisi, delta terjemahan, dan kecepatan. Anda dapat menggunakan data sentuh ini untuk menentukan jenis interaksi yang harus dilakukan.

Berikut adalah serangkaian gerakan sentuh dasar yang didukung oleh UWP.

Nama Tipe Description
Ketuk Gerakan statis Satu jari menyentuh layar dan mengangkat ke atas.
Tekan dan tahan Gerakan statis Satu jari menyentuh layar dan tetap di tempat.
Slide Gerakan manipulasi Satu atau beberapa jari menyentuh layar dan bergerak ke arah yang sama.
Swipe Gerakan manipulasi Satu atau beberapa jari menyentuh layar dan bergerak jarak pendek ke arah yang sama.
Belok Gerakan manipulasi Dua jari atau lebih menyentuh layar dan bergerak searah jaring jam atau berlawanan arah jaring jam.
Mencubit Gerakan manipulasi Dua jari atau lebih menyentuh layar dan bergerak lebih dekat bersamaan.
Stretch Gerakan manipulasi Dua atau lebih jari menyentuh layar dan bergerak menjauh.

Peristiwa isyarat

Untuk detail tentang kontrol individual, lihat Daftar kontrol.

Peristiwa pointer

Event pointer dipicu oleh berbagai sumber input aktif, termasuk sentuhan, touchpad, pena, dan mouse (menggantikan peristiwa mouse tradisional).

Peristiwa penunjuk didasarkan pada satu titik input (jari, ujung pena, kursor mouse) dan tidak mendukung interaksi berbasis kecepatan.

Berikut adalah daftar peristiwa penunjuk dan argumen peristiwa terkait.

Acara atau kelas Description
PointerPressed Terjadi ketika satu jari menyentuh layar.
PengontrolDilepas Terjadi ketika kontak sentuh yang sama diangkat.
PointerMoved Terjadi ketika penunjuk di-drag melintasi layar.
PenunjukMasuk Terjadi ketika penunjuk memasuki area deteksi elemen.
PointerExited Terjadi ketika penunjuk meninggalkan zona uji tabrak elemen.
PointerCanceled Terjadi ketika kontak sentuhan hilang secara tidak normal.
PointerCaptureLost Terjadi ketika penangkapan pointer diambil alih oleh elemen lain.
PointerWheelChanged Terjadi ketika nilai delta roda mouse berubah dan ketika touchpad dicubit.
PointerRoutedEventArgs Menyediakan data untuk semua peristiwa pointer.

Contoh berikut menunjukkan cara menggunakan PointerPressed, PointerReleased, dan PointerExited event untuk menangani interaksi ketukan pada objek Rectangle.

Pertama, Persegi panjang bernama touchRectangle dibuat dalam Extensible Application Markup Language (XAML).

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
           Height="100" Width="200" Fill="Blue" />
</Grid>

Selanjutnya, pendengar untuk PointerPressed, PointerReleased, dan PointerExited ditentukan.

MainPage::MainPage()
{
    InitializeComponent();

    // Pointer event listeners.
    touchRectangle->PointerPressed += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerPressed);
    touchRectangle->PointerReleased += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerReleased);
    touchRectangle->PointerExited += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerExited);
}

public MainPage()
{
    this.InitializeComponent();

    // Pointer event listeners.
    touchRectangle.PointerPressed += touchRectangle_PointerPressed;
    touchRectangle.PointerReleased += touchRectangle_PointerReleased;
    touchRectangle.PointerExited += touchRectangle_PointerExited;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Pointer event listeners.
    AddHandler touchRectangle.PointerPressed, AddressOf touchRectangle_PointerPressed
    AddHandler touchRectangle.PointerReleased, AddressOf Me.touchRectangle_PointerReleased
    AddHandler touchRectangle.PointerExited, AddressOf touchRectangle_PointerExited

End Sub

Terakhir, penanganan acara PointerPressed meningkatkan Tinggi dan Lebar dari Persegi Panjang, sementara penanganan acara PointerReleased dan PointerExited mengatur Tinggi dan Lebar kembali ke nilai awal mereka.

// Handler for pointer exited event.
void MainPage::touchRectangle_PointerExited(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer released event.
void MainPage::touchRectangle_PointerReleased(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer pressed event.
void MainPage::touchRectangle_PointerPressed(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Change the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 250;
        rect->Height = 150;
    }
}

// Handler for pointer exited event.
private void touchRectangle_PointerExited(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}
// Handler for pointer released event.
private void touchRectangle_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

// Handler for pointer pressed event.
private void touchRectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Change the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 250;
        rect.Height = 150;
    }
}

' Handler for pointer exited event.
Private Sub touchRectangle_PointerExited(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Pointer moved outside Rectangle hit test area.
    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer released event.
Private Sub touchRectangle_PointerReleased(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer pressed event.
Private Sub touchRectangle_PointerPressed(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Change the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 250
        rect.Height = 150
    End If
End Sub

Peristiwa manipulasi

Gunakan peristiwa manipulasi di aplikasi jika Anda perlu mendukung beberapa interaksi jari atau interaksi yang memerlukan data kecepatan.

Anda dapat menggunakan peristiwa manipulasi untuk mendeteksi interaksi seperti seret, perbesar, dan tahan.

Nota

Touchpad tidak memicu peristiwa Manipulasi. Sebagai gantinya, peristiwa pointer akan dinaikkan untuk input touchpad.

Berikut adalah daftar peristiwa manipulasi dan argumen peristiwa terkait.

Acara atau kelas Description
Peristiwa Manipulasi Dimulai Terjadi ketika prosesor manipulasi pertama kali dibuat.
Peristiwa ManipulasiDimulai Terjadi ketika perangkat input memulai manipulasi pada UIElement.
Peristiwa Delta Manipulasi Terjadi ketika perangkat input berubah posisi selama manipulasi.
Peristiwa ManipulationInertiaStarting Terjadi ketika perangkat input kehilangan kontak dengan objek UIElement selama manipulasi dan inertia dimulai.
Event ManipulationCompleted Terjadi ketika manipulasi dan inertia pada UIElement selesai.
ManipulationStartingRoutedEventArgs Menyediakan data untuk kejadian ManipulationStarting.
ManipulationStartedRoutedEventArgs Menyediakan data untuk ManipulationStarted event.
ManipulationDeltaRoutedEventArgs Menyediakan data untuk kejadian ManipulationDelta.
ManipulationInertiaStartingRoutedEventArgs Menyediakan data untuk acara ManipulationInertiaStarting.
ManipulasiVelocities Menjelaskan kecepatan di mana manipulasi terjadi.
ManipulationCompletedRoutedEventArgs Menyediakan data untuk peristiwa ManipulationCompleted.

Gerakan terdiri dari serangkaian peristiwa manipulasi. Setiap gerakan dimulai dengan event ManipulationStarted, seperti saat pengguna menyentuh layar.

Selanjutnya, satu atau beberapa peristiwa ManipulationDelta dipecat. Misalnya, jika Anda menyentuh layar lalu menyeret jari Anda di layar. Terakhir, peristiwa ManipulationCompleted dimunculkan ketika interaksi selesai.

Nota

Jika Anda tidak memiliki monitor layar sentuh, Anda dapat menguji kode peristiwa manipulasi Anda di simulator menggunakan antarmuka mouse dan roda mouse.

Contoh berikut menunjukkan cara menggunakan event ManipulationDelta untuk menangani interaksi slide pada Persegi Panjang dan memindahkannya di seluruh layar.

Pertama, Persegi panjang bernama touchRectangle dibuat di XAML dengan Tinggi dan Lebar 200.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
               Width="200" Height="200" Fill="Blue" 
               ManipulationMode="All"/>
</Grid>

Selanjutnya, sebuah TranslateTransform global bernama dragTranslation dibuat untuk mentranslasi persegi panjang. Pendengar peristiwa ManipulationDelta ditentukan pada Rectangle, dan dragTranslation ditambahkan ke RenderTransform dari Rectangle.

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
Windows::UI::Xaml::Media::TranslateTransform^ dragTranslation;

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
private TranslateTransform dragTranslation;

' Global translation transform used for changing the position of 
' the Rectangle based on input data from the touch contact.
Private dragTranslation As TranslateTransform

MainPage::MainPage()
{
    InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle->ManipulationDelta += 
        ref new ManipulationDeltaEventHandler(
            this, 
            &MainPage::touchRectangle_ManipulationDelta);
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = ref new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle->RenderTransform = dragTranslation;
}

public MainPage()
{
    this.InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle.ManipulationDelta += touchRectangle_ManipulationDelta;
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = this.dragTranslation;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Listener for the ManipulationDelta event.
    AddHandler touchRectangle.ManipulationDelta,
        AddressOf testRectangle_ManipulationDelta
    ' New translation transform populated in 
    ' the ManipulationDelta handler.
    dragTranslation = New TranslateTransform()
    ' Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = dragTranslation

End Sub

Terakhir, di penangan kejadian ManipulationDelta, posisi Rectangle diperbaharui dengan memakai TranslateTransform pada properti Delta.

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void MainPage::touchRectangle_ManipulationDelta(Object^ sender,
    ManipulationDeltaRoutedEventArgs^ e)
{
    // Move the rectangle.
    dragTranslation->X += e->Delta.Translation.X;
    dragTranslation->Y += e->Delta.Translation.Y;
    
}

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void touchRectangle_ManipulationDelta(object sender,
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

' Handler for the ManipulationDelta event.
' ManipulationDelta data Is loaded into the
' translation transform And applied to the Rectangle.
Private Sub testRectangle_ManipulationDelta(
    sender As Object,
    e As ManipulationDeltaRoutedEventArgs)

    ' Move the rectangle.
    dragTranslation.X = (dragTranslation.X + e.Delta.Translation.X)
    dragTranslation.Y = (dragTranslation.Y + e.Delta.Translation.Y)

End Sub

Peristiwa terputerus

Semua peristiwa pointer, peristiwa gerakan, dan peristiwa manipulasi yang disebutkan di sini diimplementasikan sebagai peristiwa yang dirutekan. Ini berarti bahwa peristiwa tersebut berpotensi ditangani oleh objek selain yang awalnya memunculkan peristiwa. Induk berturut-turut di pohon objek, seperti kontainer induk UIElement atau Halaman akar aplikasi Anda, dapat memilih untuk menangani peristiwa ini meskipun elemen aslinya tidak. Sebaliknya, objek apa pun yang menangani peristiwa dapat menandai peristiwa yang ditangani sehingga tidak lagi mencapai elemen induk apa pun. Untuk informasi selengkapnya tentang konsep peristiwa yang dirutekan dan pengaruhnya terhadap cara Anda menulis handler untuk peristiwa yang dirutekan, lihat Gambaran umum Peristiwa dan peristiwa yang dirutekan.

Penting

Jika Anda perlu menangani peristiwa penunjuk untuk UIElement dalam tampilan yang dapat digulir (seperti ScrollViewer atau ListView), Anda harus secara eksplisit menonaktifkan dukungan untuk peristiwa manipulasi pada elemen dalam tampilan dengan memanggil UIElement.CancelDirectmanipulation(). Untuk mengaktifkan kembali peristiwa manipulasi dalam tampilan, panggil UIElement.TryStartDirectManipulation().

Hal yang boleh dan tidak boleh dilakukan

  • Desain aplikasi dengan interaksi sentuh sebagai metode input utama yang diharapkan.
  • Berikan umpan balik visual untuk interaksi semua jenis (sentuhan, pena, stylus, mouse, dll.)
  • Optimalkan penargetan dengan menyesuaikan ukuran target sentuh, geometri kontak, scrubbing, dan goyang.
  • Optimalkan akurasi melalui penggunaan titik jepret dan rel terarah.
  • Berikan tooltip dan penunjuk untuk membantu meningkatkan akurasi sentuhan untuk elemen UI yang dikemas dengan erat.
  • Jangan gunakan interaksi berbatas waktu sebisa mungkin (contoh penggunaan yang sesuai: sentuh dan tahan).
  • Jangan gunakan jumlah jari yang digunakan untuk membedakan manipulasi jika memungkinkan.

Samples

Sampel Arsip

  • Last updated on