Kontrol teks

  • Artikel

Kontrol teks terdiri dari kotak input teks, kotak kata sandi, kotak saran otomatis, dan blok teks. Kerangka kerja XAML menyediakan beberapa kontrol untuk merender, memasukkan, dan mengedit teks, dan sekumpulan properti untuk memformat teks.

API Penting: Kelas TextBlock, kelas RichTextBlock, kelas TextBox, kelas RichEditBox, kelas AutoSuggestBox, kelas PasswordBox

Apakah ini kontrol yang tepat?

Kontrol teks yang Anda gunakan bergantung pada skenario Anda. Gunakan info ini untuk memilih kontrol teks yang tepat untuk digunakan di aplikasi Anda.

Merender teks baca-saja

Gunakan TextBlock untuk menampilkan sebagian besar teks baca-saja di aplikasi Anda. Anda bisa menggunakannya untuk menampilkan teks baris tunggal atau multibaris, hyperlink sebaris, dan teks dengan pemformatan seperti tebal, miring, atau digaris bawahi.

TextBlock biasanya lebih mudah digunakan dan memberikan performa penyajian teks yang lebih baik daripada RichTextBlock, jadi lebih disukai untuk sebagian besar teks UI aplikasi. Anda dapat dengan mudah mengakses dan menggunakan teks dari TextBlock di aplikasi Anda dengan mendapatkan nilai properti Teks .

Ini juga menyediakan banyak opsi pemformatan yang sama untuk menyesuaikan cara teks Anda dirender. Meskipun Anda dapat meletakkan hentian baris dalam teks, TextBlock dirancang untuk menampilkan satu paragraf dan tidak mendukung indentasi teks.

Gunakan RichTextBlock saat Anda memerlukan dukungan untuk beberapa paragraf, teks multikolom, atau tata letak teks kompleks lainnya, atau elemen UI sebaris seperti gambar. RichTextBlock menyediakan beberapa fitur untuk tata letak teks tingkat lanjut.

Properti konten RichTextBlock adalah properti Blokir , yang mendukung teks berbasis paragraf melalui elemen Paragraf . Ini tidak memiliki properti Teks yang dapat Anda gunakan untuk dengan mudah mengakses konten teks kontrol di aplikasi Anda.

Masukan teks

Gunakan kontrol TextBox untuk memungkinkan pengguna memasukkan dan mengedit teks yang tidak diformat, seperti dalam formulir. Anda bisa menggunakan properti Teks untuk mendapatkan dan mengatur teks di TextBox.

Anda dapat membuat TextBox baca-saja, tetapi ini harus menjadi status sementara bersyar. Jika teks tidak pernah dapat diedit, pertimbangkan untuk menggunakan TextBlock sebagai gantinya.

Gunakan kontrol PasswordBox untuk mengumpulkan kata sandi atau data privat lainnya, seperti nomor Jaminan Sosial. Kotak kata sandi adalah kotak input teks yang menyembunyikan karakter yang diketik di dalamnya demi privasi. Kotak kata sandi terlihat seperti kotak input teks, kecuali kotak tersebut merender poin sebagai pengganti teks yang telah dimasukkan. Karakter poin dapat disesuaikan.

Gunakan kontrol AutoSuggestBox untuk memperlihatkan kepada pengguna daftar saran untuk dipilih saat mereka mengetik. Kotak saran otomatis adalah kotak entri teks yang memicu daftar saran pencarian dasar. Istilah yang disarankan dapat diambil dari kombinasi istilah pencarian populer dan istilah historis yang dimasukkan pengguna.

Anda juga harus menggunakan kontrol AutoSuggestBox untuk mengimplementasikan kotak pencarian.

Gunakan RichEditBox untuk menampilkan dan mengedit file teks. Anda tidak menggunakan RichEditBox untuk mendapatkan input pengguna ke aplikasi Anda seperti cara Anda menggunakan kotak input teks standar lainnya. Sebaliknya, Anda menggunakannya untuk bekerja dengan file teks yang terpisah dari aplikasi Anda. Anda biasanya menyimpan teks yang dimasukkan ke dalam RichEditBox ke file .rtf.

Apakah input teks adalah opsi terbaik?

Ada banyak cara untuk mendapatkan input pengguna di aplikasi Anda. Pertanyaan-pertanyaan ini akan membantu menjawab apakah salah satu kotak input teks standar atau kontrol lain paling cocok untuk mendapatkan input pengguna.

  • Apakah praktis untuk menghitung semua nilai yang valid secara efisien? Jika demikian, pertimbangkan untuk menggunakan salah satu kontrol pilihan, seperti kotak centang, daftar turun bawah, kotak daftar, tombol radio, penggeser, sakelar pengalih, pemilih tanggal, atau pemilih waktu.
  • Apakah ada sekumpulan nilai valid yang cukup kecil? Jika demikian, pertimbangkan daftar drop-down atau kotak daftar, terutama jika panjang nilainya lebih dari beberapa karakter.
  • Apakah data yang valid benar-benar tidak dibatasi? Atau apakah data yang valid hanya dibatasi oleh format (panjang atau jenis karakter yang dibatasi)? Jika demikian, gunakan kontrol input teks. Anda dapat membatasi jumlah karakter yang dapat dimasukkan, dan Anda dapat memvalidasi format dalam kode aplikasi Anda.
  • Apakah nilai mewakili jenis data yang memiliki kontrol umum khusus? Jika demikian, gunakan kontrol yang sesuai alih-alih kontrol input teks. Misalnya, gunakan DatePicker alih-alih kontrol input teks untuk menerima entri tanggal.
  • Jika data benar-benar numerik:
    • Apakah nilai dimasukkan perkiraan dan/atau relatif terhadap kuantitas lain di halaman yang sama? Jika demikian, gunakan pengganda.
    • Apakah pengguna akan mendapat manfaat dari umpan balik instan tentang efek perubahan pengaturan? Jika demikian, gunakan slider, mungkin dengan kontrol yang menyertainya.
    • Apakah nilai yang dimasukkan kemungkinan akan disesuaikan setelah hasilnya diamati, seperti dengan volume atau kecerahan layar? Jika demikian, gunakan pengganda.

Contoh

Galeri WinUI 2
Galeri WinUI

Jika Anda memiliki aplikasi WinUI 2 Gallery yang terinstal , klik di sini untuk membuka aplikasi dan melihat kontrol teks beraksi.

Kotak teks

Kotak teks

Kotak saran otomatis

Contoh kontrol saran otomatis yang diperluas

Kotak kata sandi

Teks pengetikan status fokus kotak kata sandi

Membuat kontrol teks

Lihat artikel ini untuk info dan contoh khusus untuk setiap kontrol teks.

Panduan font dan gaya

Lihat artikel ini untuk panduan font:

Input pena

Berlaku untuk: Kotak Teks, RichEditBox, AutoSuggestBox

Dimulai dengan Windows 10, versi 1803, kotak input teks XAML menampilkan dukungan yang disematkan untuk input pena menggunakan Windows Ink. Saat pengguna mengetuk kotak input teks menggunakan pena Windows, kotak teks berubah untuk memungkinkan pengguna menulis langsung ke dalamnya dengan pena, daripada membuka panel input terpisah.

Kotak teks diperluas saat diketuk dengan pena

Untuk informasi selengkapnya, lihat Input teks dengan tampilan tulisan tangan.

Pilih keyboard yang tepat untuk kontrol teks Anda

Berlaku untuk: Kotak Teks, Kotak Kata Sandi RichEditBox

Untuk membantu pengguna memasukkan data menggunakan keyboard sentuh, atau Panel Input Lunak (SIP), Anda dapat mengatur cakupan input kontrol teks agar sesuai dengan jenis data yang diharapkan dimasukkan pengguna.

Tips Info ini hanya berlaku untuk SIP. Ini tidak berlaku untuk keyboard perangkat keras atau Keyboard Di Layar yang tersedia di opsi Kemudahan Akses Windows.

Keyboard sentuh dapat digunakan untuk entri teks saat aplikasi Anda berjalan di perangkat dengan layar sentuh. Keyboard sentuh dipanggil saat pengguna mengetuk bidang input yang dapat diedit, seperti TextBox atau RichEditBox. Anda dapat membuatnya jauh lebih cepat dan lebih mudah bagi pengguna untuk memasukkan data di aplikasi Anda dengan mengatur cakupan input kontrol teks agar sesuai dengan jenis data yang Anda harapkan untuk dimasukkan pengguna. Cakupan input memberikan petunjuk kepada sistem tentang jenis input teks yang diharapkan oleh kontrol sehingga sistem dapat menyediakan tata letak keyboard sentuh khusus untuk jenis input.

Misalnya, jika kotak teks hanya digunakan untuk memasukkan PIN 4 digit, atur properti InputScope ke Angka. Ini memberi tahu sistem untuk menampilkan tata letak keypad angka, yang memudahkan pengguna untuk memasukkan PIN.

Penting
Cakupan input tidak menyebabkan validasi input dilakukan, dan tidak mencegah pengguna memberikan input apa pun melalui keyboard perangkat keras atau perangkat input lainnya. Anda masih bertanggung jawab untuk memvalidasi input dalam kode Anda sesuai kebutuhan.

Untuk informasi selengkapnya, lihat Menggunakan cakupan input untuk mengubah keyboard sentuh.

Font warna

Berlaku untuk: TextBlock, RichTextBlock, TextBox, RichEditBox

Windows memiliki kemampuan font untuk menyertakan beberapa lapisan berwarna untuk setiap glyph. Misalnya, font Emoji Segoe UI mendefinisikan versi warna Emoticon dan karakter Emoji lainnya.

Kontrol teks standar dan kaya mendukung font warna tampilan. Secara default, properti IsColorFontEnabled adalah true dan font dengan lapisan tambahan ini dirender dalam warna. Font warna default pada sistem adalah Segoe UI Emoji dan kontrol akan jatuh kembali ke font ini untuk menampilkan glyph berwarna.

<TextBlock FontSize="30">Hello ☺⛄☂♨⛅</TextBlock>

Teks yang dirender terlihat seperti ini:

Blok teks dengan font warna

Untuk informasi selengkapnya, lihat properti IsColorFontEnabled .

Panduan pemisah baris dan paragraf

Berlaku untuk: TextBlock, RichTextBlock, TextBox multibaris, RichEditBox

Gunakan karakter pemisah baris (0x2028) dan karakter pemisah paragraf (0x2029) untuk membagi teks biasa. Baris baru dimulai setelah setiap pemisah baris. Paragraf baru dimulai setelah setiap pemisah paragraf.

Tidak perlu memulai baris atau paragraf pertama dalam file dengan karakter ini atau untuk mengakhiri baris atau paragraf terakhir dengannya; melakukannya menunjukkan bahwa ada baris atau paragraf kosong di lokasi tersebut.

Aplikasi Anda dapat menggunakan pemisah baris untuk menunjukkan akhir baris tanpa syarat. Namun, pemisah garis tidak sesuai dengan pengembalian pengangkutan terpisah dan karakter linefeed, atau ke kombinasi karakter ini. Pemisah garis harus diproses secara terpisah dari karakter pengembalian pengangkutan dan linefeed.

Aplikasi Anda dapat menyisipkan pemisah paragraf di antara paragraf teks. Penggunaan pemisah ini memungkinkan pembuatan file teks biasa yang dapat diformat dengan lebar baris yang berbeda pada sistem operasi yang berbeda. Sistem target dapat mengabaikan pemisah baris apa pun dan memutus paragraf hanya pada pemisah paragraf.

Panduan untuk pemeriksaan ejaan

Berlaku untuk: Kotak Teks, RichEditBox

Selama entri dan pengeditan teks, pemeriksaan ejaan memberi tahu pengguna bahwa kata salah eja dengan menyorotinya dengan berlekuk-lekuk merah dan menyediakan cara bagi pengguna untuk memperbaiki kesalahan ejaan.

Berikut adalah contoh pemeriksa ejaan bawaan:

pemeriksa ejaan bawaan

Gunakan pemeriksaan ejaan dengan kontrol input teks untuk dua tujuan ini:

  • Untuk memperbaiki kesalahan ejaan secara otomatis

    Mesin pemeriksaan ejaan secara otomatis mengoreksi kata yang salah eja ketika yakin tentang koreksi. Misalnya, mesin secara otomatis mengubah "the" menjadi "the."

  • Untuk memperlihatkan ejaan alternatif

    Saat mesin pemeriksaan ejaan tidak yakin tentang koreksi, mesin tersebut menambahkan garis merah di bawah kata yang salah eja dan menampilkan alternatif di menu konteks saat Anda mengetuk atau mengklik kanan kata.

  • Gunakan pemeriksaan ejaan untuk membantu pengguna saat memasukkan kata atau kalimat ke dalam kontrol input teks. Pemeriksaan ejaan berfungsi dengan input sentuhan, mouse, dan keyboard.

  • Jangan gunakan pemeriksaan ejaan saat sebuah kata tidak mungkin berada dalam kamus atau jika pengguna tidak akan menghargai pemeriksaan ejaan. Misalnya, jangan nyalakan jika kotak teks dimaksudkan untuk mengambil nomor telepon atau nama.

  • Jangan nonaktifkan pemeriksaan ejaan hanya karena mesin pemeriksaan ejaan saat ini tidak mendukung bahasa aplikasi Anda. Saat pemeriksa ejaan tidak mendukung bahasa, pemeriksa ejaan tidak melakukan apa pun, jadi tidak ada salahnya membiarkan opsi aktif. Selain itu, beberapa pengguna mungkin menggunakan Editor Metode Input (IME) untuk memasukkan bahasa lain ke dalam aplikasi Anda, dan bahasa tersebut mungkin didukung. Misalnya, saat membangun aplikasi bahasa Jepang, meskipun mesin pemeriksaan ejaan mungkin saat ini tidak mengenali bahasa tersebut, jangan nonaktifkan pemeriksaan ejaan. Pengguna dapat beralih ke IME bahasa Inggris dan mengetik bahasa Inggris ke dalam aplikasi; jika pemeriksaan ejaan diaktifkan, bahasa Inggris akan diperiksa ejaannya.

Untuk kontrol TextBox dan RichEditBox, pemeriksaan ejaan diaktifkan secara default. Anda dapat menonaktifkannya dengan mengatur properti IsSpellCheckEnabled ke false.

Untuk desainer

Untuk pengembang (XAML)