Memilih teks dan gambar

Artikel ini menjelaskan pemilihan dan manipulasi teks, gambar, dan kontrol serta menyediakan panduan pengalaman pengguna yang harus dipertimbangkan saat menggunakan mekanisme ini di aplikasi Anda.

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

Hal yang boleh dan tidak boleh dilakukan

• Gunakan glyph font saat mengimplementasikan UI gripper Anda sendiri. Gripper adalah kombinasi dari dua font Segoe UI yang tersedia di seluruh sistem. Menggunakan sumber font menyederhanakan masalah rendering di dpi yang berbeda dan bekerja dengan baik dengan berbagai tingkatan penskalaan UI. Saat mengimplementasikan alat penggenggam Anda sendiri, mereka harus memiliki ciri-ciri UI berikut:

  • Bentuk melingkar
  • Terlihat di latar belakang mana pun
  • Ukuran yang konsisten

• Berikan margin di sekitar konten yang dapat dipilih untuk mengakomodasi UI gripper. Jika aplikasi Anda memungkinkan pemilihan teks di kawasan yang tidak dapat digeser/menggulir, berikan margin pengendali 1/2 di sisi kiri dan kanan area teks dan satu tinggi pengendali di sisi atas dan bawah area teks (seperti yang ditunjukkan pada gambar berikut). Ini memastikan bahwa seluruh UI gripper diekspos ke pengguna dan meminimalkan interaksi yang tidak diinginkan dengan UI berbasis tepi lainnya.

  

• Sembunyikan UI grippers selama interaksi. Menghilangkan oklusi oleh penjepit selama interaksi. Ini berguna ketika "gripper" tidak sepenuhnya dikaburkan oleh jari atau ada beberapa "gripper" untuk pemilihan teks. Ini menghilangkan artefak visual saat menampilkan jendela anak.

• Jangan izinkan pemilihan elemen UI seperti kontrol, label, gambar, konten kepemilikan, dan sebagainya. Biasanya, aplikasi Windows mengizinkan pilihan hanya dalam kontrol tertentu. Kontrol seperti tombol, label, dan logo tidak dapat dipilih. Menilai apakah pilihan adalah masalah untuk aplikasi Anda dan, jika demikian, identifikasi area UI tempat pilihan harus dilarang.

Panduan penggunaan tambahan

Pemilihan teks dan manipulasi sangat rentan terhadap tantangan pengalaman pengguna yang diperkenalkan oleh interaksi sentuh. Masukan mouse, pena/stylus, dan keyboard sangat terperinci: klik mouse atau kontak pena/stylus biasanya dipetakan ke satu piksel, atau tombol ditekan atau tidak ditekan. Input sentuhan tidak terperinci; karena sulit untuk memetakan seluruh permukaan ujung jari ke lokasi x-y tertentu di layar untuk menempatkan kursor teks secara akurat.

Pertimbangan dan rekomendasi

Gunakan kontrol bawaan yang diekspos melalui kerangka kerja bahasa di Windows untuk membangun aplikasi yang memberikan pengalaman interaksi pengguna platform lengkap, termasuk perilaku pemilihan dan manipulasi. Anda akan menemukan fungsionalitas interaksi kontrol bawaan yang cukup untuk sebagian besar aplikasi Windows.

Saat menggunakan kontrol teks Windows standar, perilaku pemilihan dan visual yang dijelaskan dalam topik ini tidak dapat dikustomisasi.

Pilihan teks

Jika aplikasi Anda memerlukan UI kustom yang mendukung pilihan teks, kami sarankan Anda mengikuti perilaku pemilihan Windows yang dijelaskan di sini.

Konten yang dapat diedit dan tidak dapat diedit

Dengan sentuhan, interaksi pilihan dilakukan terutama melalui gerakan seperti ketukan untuk mengatur kursor penyisipan atau memilih kata, dan slide untuk mengubah pilihan. Seperti halnya interaksi sentuh Windows lainnya, interaksi berwaktur terbatas pada gerakan tekan dan tahan untuk menampilkan antarmuka pengguna informasi. Untuk informasi selengkapnya, lihat Panduan untuk umpan balik visual.

Windows mengenali dua kemungkinan status untuk interaksi pilihan, dapat diedit dan tidak dapat diedit, dan menyesuaikan UI pilihan, umpan balik, dan fungsionalitas yang sesuai.

Konten yang dapat diedit

Mengetuk di bagian kiri kata menempatkan kursor tepat di kiri kata, sementara mengetuk di bagian kanan menempatkan kursor tepat di kanan kata.

Gambar berikut menunjukkan cara menempatkan kursor penyisipan awal dengan gripper dengan mengetuk di dekat awal atau akhir kata.

Gambar berikut menunjukkan cara menyesuaikan pilihan dengan menyeret gripper.

Gambar berikut menunjukkan cara memanggil menu konteks dengan mengetuk dalam pilihan atau pada gripper (tekan dan tahan juga dapat digunakan).

Nota Interaksi ini agak bervariasi dalam kasus kata yang salah eja. Mengetuk kata yang ditandai sebagai salah eja akan menyoroti seluruh kata dan memanggil menu konteks ejaan yang disarankan.

 

Konten yang tidak dapat diedit

Gambar berikut menunjukkan cara memilih kata dengan mengetuk dalam kata (tidak ada spasi yang disertakan dalam pilihan awal).

Ikuti prosedur yang sama seperti untuk teks yang dapat diedit untuk menyesuaikan pilihan dan menampilkan menu konteks.

Manipulasi objek

Jika memungkinkan, gunakan sumber daya gripper yang sama (atau serupa) sebagai pilihan teks saat menerapkan manipulasi objek kustom di aplikasi Windows. Ini membantu memberikan pengalaman interaksi yang konsisten di seluruh platform.

Misalnya, gripper juga dapat digunakan dalam aplikasi pemrosesan gambar yang mendukung pengubahan ukuran dan pemangkasan atau aplikasi pemutar media yang menyediakan bilah kemajuan yang dapat disesuaikan, seperti yang ditunjukkan pada gambar berikut.

Pemutar media dengan bilah kemajuan yang dapat disesuaikan.

Editor gambar dengan alat pemangkas.

Artikel terkait

Untuk pengembang

• Interaksi pengguna kustom

Samples

• Sampel input dasar
• Sampel input latensi rendah
• Sampel mode interaksi pengguna
• Contoh visual fokus

Contoh arsip

• Input: Sampel peristiwa input pengguna XAML

• Input: Sampel kemampuan perangkat

• Input: Sampel pengujian titik sentuh

• Sampel pengguliran, pengalihan, dan perbesar tampilan XAML

• Input: Sampel tinta sederhana

• Input: Contoh manipulasi dan gerakan

• Sampel sentuh input DirectX