Kontrol penintaan

Ada dua kontrol berbeda yang memfasilitasi penintaan di aplikasi Windows: InkCanvas dan InkToolbar.

Kontrol InkCanvas merender input pena sebagai goresan tinta (menggunakan pengaturan default untuk warna dan ketebalan) atau stroke penghapusan. Kontrol ini adalah overlay transparan yang tidak menyertakan UI bawaan untuk mengubah properti goresan tinta default.

Catatan

InkCanvas dapat dikonfigurasi untuk mendukung fungsionalitas serupa untuk input mouse dan sentuhan.

Karena kontrol InkCanvas tidak menyertakan dukungan untuk mengubah pengaturan goresan tinta default, kontrol ini dapat dipasangkan dengan kontrol InkToolbar. InkToolbar berisi kumpulan tombol yang dapat disesuaikan dan dapat diperluas yang mengaktifkan fitur terkait tinta di InkCanvas terkait.

Secara default, InkToolbar menyertakan tombol untuk menggambar, menghapus, menyoroti, dan menampilkan penggaris. Tergantung pada fitur, pengaturan dan perintah lainnya, seperti warna tinta, ketebalan goresan, menghapus semua tinta, disediakan dalam flyout.

Catatan

InkToolbar mendukung input pena dan mouse dan dapat dikonfigurasi untuk mengenali input sentuhan.

Apakah ini kontrol yang tepat?

Gunakan InkCanvas saat Anda perlu mengaktifkan fitur penintaan dasar di aplikasi Anda tanpa memberikan pengaturan tinta apa pun kepada pengguna.

Secara default, goresan dirender sebagai tinta saat menggunakan ujung pena (pena ballpoint hitam dengan ketebalan 2 piksel) dan sebagai penghapus saat menggunakan tip penghapus. Jika tip penghapus tidak ada, InkCanvas dapat dikonfigurasi untuk memproses input dari tip pena sebagai stroke penghapusan.

Pasangkan InkCanvas dengan InkToolbar untuk menyediakan UI untuk mengaktifkan fitur tinta dan mengatur properti tinta dasar seperti ukuran goresan, warna, dan bentuk ujung pena.

Catatan

Untuk penyesuaian rendering goresan tinta yang lebih luas pada InkCanvas, gunakan objek InkPresenter yang mendasar.

Gambaran umum toolbar tinta

Tombol bawaan

InkToolbar menyertakan tombol bawaan berikut:

Pena

• Pena ballpoint - menarik goresan buram dan padat dengan ujung pena lingkaran. Ukuran goresan tergantung pada tekanan pena yang terdeteksi.
• Pensil - menggambar goresan bermata lembut, bertekskus, dan semi transparan (berguna untuk efek bayangan berlapis) dengan ujung pena lingkaran. Warna goresan (kegelapan) tergantung pada tekanan pena yang terdeteksi.
• Penyorot – menggambar goresan semi transparan dengan ujung pena persegi panjang.

Anda dapat menyesuaikan palet warna dan atribut ukuran (min, maks, default) di flyout untuk setiap pena.

Alat

• Penghapus – menghapus goresan tinta yang disentuh. Perhatikan bahwa seluruh goresan tinta dihapus, bukan hanya bagian di bawah goresan penghapus.

Beralih

• Penggaris – memperlihatkan atau menyembunyikan penggaris. Menggambar di dekat tepi penggaris menyebabkan goresan tinta diposisikan ke penggaris.
  

Meskipun ini adalah konfigurasi default, Anda memiliki kontrol penuh atas tombol bawaan mana yang disertakan dalam InkToolbar untuk aplikasi Anda.

Tombol kustom

InkToolbar terdiri dari dua grup jenis tombol yang berbeda:

1. Sekelompok tombol "alat" yang berisi tombol gambar, penghapusan, dan penyorotan bawaan. Pena dan alat kustom ditambahkan di sini.

Catatan

Pilihan fitur saling eksklusif.

2. Sekelompok tombol "beralih" yang berisi tombol penggaris bawaan. Tombol kustom ditambahkan di sini.

Catatan

Fitur tidak saling eksklusif dan dapat digunakan bersamaan dengan alat aktif lainnya.

Bergantung pada aplikasi dan fungsionalitas penintaan yang diperlukan, Anda dapat menambahkan salah satu tombol berikut (terikat ke fitur tinta kustom Anda) ke InkToolbar:

• Pena kustom – pena tempat palet warna tinta dan properti ujung pena, seperti bentuk, rotasi, dan ukuran, ditentukan oleh aplikasi host.
• Alat kustom – alat non-pena, yang ditentukan oleh aplikasi host.
• Tombol kustom – Mengatur status fitur yang ditentukan aplikasi ke aktif atau nonaktif. Saat diaktifkan, fitur ini berfungsi bersama dengan alat aktif.

Catatan

Anda tidak dapat mengubah urutan tampilan tombol bawaan. Urutan tampilan default adalah: Pena Ballpoint, pensil, penyorot, penghapus, dan penggaris. Pena kustom ditambahkan ke pena default terakhir, tombol alat kustom ditambahkan antara tombol pena terakhir dan tombol penghapus dan tombol pengalih kustom ditambahkan setelah tombol penggaris. (Tombol kustom ditambahkan dalam urutan yang ditentukan.)

Meskipun InkToolbar dapat menjadi item tingkat atas, biasanya diekspos melalui tombol atau perintah "Penintaan". Sebaiknya gunakan EE56 glyph dari font Segoe MLD2 Assets sebagai ikon tingkat atas.

Interaksi InkToolbar

Semua tombol pena dan alat bawaan mencakup menu flyout di mana properti tinta dan bentuk dan ukuran ujung pena dapat diatur. "Glyph ekstensi" ditampilkan pada tombol untuk menunjukkan keberadaan flyout.

Flyout ditampilkan saat tombol alat aktif dipilih lagi. Ketika warna atau ukuran diubah, flyout secara otomatis ditutup dan penintaan dapat dilanjutkan. Pena dan alat kustom dapat menggunakan flyout default atau menentukan flyout kustom.

Penghapus juga memiliki flyout yang menyediakan perintah Hapus Semua Tinta .

Untuk informasi tentang kustomisasi dan ekstensibilitas, lihat sampel SimpleInk.

Rekomendasi

• InkCanvas, dan penintaan secara umum, paling baik dialami melalui pena aktif. Namun, sebaiknya dukung penintaan dengan input mouse dan sentuh (termasuk pena pasif) jika diperlukan oleh aplikasi Anda.
• Gunakan kontrol InkToolbar dengan InkCanvas untuk menyediakan fitur dan pengaturan penintaan dasar. InkCanvas dan InkToolbar dapat disesuaikan secara terprogram.
• InkToolbar, dan penintaan secara umum, paling baik dialami melalui pena aktif. Namun, penintaan dengan mouse dan sentuhan dapat didukung jika diperlukan oleh aplikasi Anda.
• Jika mendukung penintaan dengan input sentuh, sebaiknya gunakan ikon ED5F dari font Aset Segoe MLD2 untuk tombol alih, dengan tipsalat "Tulis sentuhan".
• Jika memberikan pilihan goresan, sebaiknya gunakan ikon EF20 dari font Segoe MLD2 Assets untuk tombol alat, dengan tipsalat "Alat pemilihan".
• Jika menggunakan lebih dari satu InkCanvas, sebaiknya gunakan satu InkToolbar untuk mengontrol penintaan di seluruh kanvas.
• Untuk performa terbaik, sebaiknya ubah flyout default daripada membuat yang kustom untuk alat default dan kustom.

Contoh

Microsoft Edge

Microsoft Edge menggunakan InkCanvas dan InkToolbar untuk Catatan Web.

Ruang Kerja Windows Ink

InkCanvas dan InkToolbar juga digunakan untuk Snip & Sketsa di Ruang Kerja Windows Ink.

Membuat InkCanvas dan InkToolbar

• API UWP: Kelas InkCanvas, kelas InkToolbar, kelas InkPresenter, Windows.UI.Input.Inking
• Buka aplikasi Galeri WinUI 2 dan lihat InkingControls beraksi. Aplikasi Galeri WinUI 2 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 2. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub.

Menambahkan InkCanvas ke aplikasi Anda hanya memerlukan satu baris markup:

<InkCanvas x:Name="myInkCanvas"/>

Catatan

Untuk penyesuaian InkCanvas terperinci menggunakan InkPresenter, lihat artikel "Interaksi pena dan Windows Ink di aplikasi Windows" .

Kontrol InkToolbar harus digunakan bersama dengan InkCanvas. Menggabungkan InkToolbar (dengan semua alat bawaan) ke dalam aplikasi Anda memerlukan satu baris markup tambahan:

<InkToolbar TargetInkCanvas="{x:Bind myInkCanvas}"/>

Ini menampilkan InkToolbar berikut:

Mendapatkan kode sampel

• Sampel SimpleInk - Menunjukkan 8 skenario seputar kemampuan kustomisasi dan ekstensibilitas kontrol InkCanvas dan InkToolbar. Setiap skenario memberikan panduan dasar tentang situasi penintaan umum dan implementasi kontrol.
• Sampel ComplexInk - Menunjukkan skenario penintaan yang lebih canggih.
• Sampel Galeri WinUI 2 - Lihat semua kontrol XAML dalam format interaktif.

Artikel terkait

• Interaksi pena dan Windows Ink di aplikasi Windows
• Mengenali goresan Tinta Windows sebagai teks dan bentuk
• Menyimpan dan mengambil data goresan Tinta Windows