Kotak kata sandi

Kotak kata sandi adalah kotak input teks yang menyembunyikan karakter yang ditikkan ke dalamnya untuk tujuan privasi. Kotak kata sandi terlihat seperti kotak teks, kecuali kotak teks merender karakter tempat penampung sebagai pengganti teks yang telah dimasukkan. Anda dapat mengonfigurasi karakter tempat penampung.

Secara default, kotak kata sandi menyediakan cara bagi pengguna untuk melihat kata sandi mereka dengan menahan tombol ungkapkan. Anda dapat menonaktifkan tombol ungkapkan, atau menyediakan mekanisme alternatif untuk mengungkapkan kata sandi, seperti kotak centang.

Apakah ini kontrol yang tepat?

Gunakan kontrol PasswordBox untuk mengumpulkan kata sandi atau data privat lainnya, seperti nomor Jaminan Sosial.

Untuk informasi selengkapnya tentang memilih kontrol teks yang tepat, lihat artikel Kontrol teks .

Rekomendasi

• Gunakan teks label atau tempat penampung jika tujuan kotak kata sandi tidak bersih. Label terlihat apakah kotak input teks memiliki nilai atau tidak. Teks tempat penampung ditampilkan di dalam kotak input teks dan menghilang setelah nilai dimasukkan.
• Beri kotak kata sandi lebar yang sesuai untuk rentang nilai yang dapat dimasukkan. Panjang kata bervariasi di antara bahasa, jadi mempertimbangkan pelokalan jika Anda ingin aplikasi Anda siap di dunia.
• Jangan letakkan kontrol lain tepat di samping kotak input kata sandi. Kotak kata sandi memiliki tombol ungkap kata sandi bagi pengguna untuk memverifikasi kata sandi yang telah mereka ketik, dan memiliki kontrol lain tepat di sebelahnya mungkin membuat pengguna secara tidak sengaja mengungkapkan kata sandi mereka ketika mereka mencoba berinteraksi dengan kontrol lain. Untuk mencegah hal ini terjadi, letakkan beberapa penspasian antara kata sandi di kotak letakkan dan kontrol lainnya, atau letakkan kontrol lainnya di baris berikutnya.
• Pertimbangkan untuk menyajikan dua kotak kata sandi untuk pembuatan akun: satu untuk kata sandi baru, dan satu detik untuk mengonfirmasi kata sandi baru.
• Hanya tampilkan satu kotak kata sandi untuk masuk.
• Saat kotak kata sandi digunakan untuk memasukkan PIN, pertimbangkan untuk memberikan respons instan segera setelah nomor terakhir dimasukkan alih-alih menggunakan tombol konfirmasi.

Contoh

Kotak kata sandi memiliki beberapa status, termasuk yang penting ini.

Kotak kata sandi tidak aktif dapat menampilkan teks petunjuk sehingga pengguna mengetahui tujuannya:

Saat pengguna mengetik dalam kotak kata sandi, perilaku defaultnya adalah menampilkan poin yang menyembunyikan teks yang dimasukkan:

Menekan tombol "ungkapkan" di sebelah kanan memberikan intip teks kata sandi yang dimasukkan:

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls .

• API UWP: kelas PasswordBox, properti Kata Sandi, properti PasswordChar, properti PasswordRevealMode, peristiwa PasswordChanged
• Buka aplikasi Galeri WinUI 2 dan lihat Kotak Sandi sedang 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.

Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya dan templat terbaru untuk semua kontrol. WinUI 2.2 atau yang lebih baru menyertakan templat baru untuk kontrol ini yang menggunakan sudut bulat. Untuk informasi selengkapnya, lihat radius sudut.

Membuat kotak kata sandi

• API Penting: kelas PasswordBox, properti Kata Sandi, properti PasswordChar, properti PasswordRevealMode, peristiwa PasswordChanged

Buka aplikasi Galeri WinUI 3 dan lihat Kotak Sandi sedang beraksi.

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Gunakan properti Kata Sandi untuk mendapatkan atau mengatur konten Kotak Kata Sandi. Anda dapat melakukan ini di handler untuk peristiwa PasswordChanged untuk melakukan validasi saat pengguna memasukkan kata sandi. Atau, Anda dapat menggunakan peristiwa lain, seperti tombol Klik, untuk melakukan validasi setelah pengguna menyelesaikan entri teks.

Berikut adalah XAML untuk kontrol kotak kata sandi yang menunjukkan tampilan default PasswordBox. Saat pengguna memasukkan kata sandi, Anda memeriksa untuk melihat apakah itu nilai harfiah, "Kata Sandi". Jika ya, Anda menampilkan pesan kepada pengguna.

<StackPanel>  
  <PasswordBox x:Name="passwordBox" Width="200" MaxLength="16"
             PasswordChanged="passwordBox_PasswordChanged"/>

  <TextBlock x:Name="statusText" Margin="10" HorizontalAlignment="Center" />
</StackPanel>   

private void passwordBox_PasswordChanged(object sender, RoutedEventArgs e)
{
    if (passwordBox.Password == "Password")
    {
        statusText.Text = "'Password' is not allowed as a password.";
    }
    else
    {
        statusText.Text = string.Empty;
    }
}

Berikut adalah hasilnya ketika kode ini berjalan dan pengguna memasukkan "Kata Sandi".

Karakter kata sandi

Anda dapat mengubah karakter yang digunakan untuk menutupi kata sandi dengan mengatur properti PasswordChar . Di sini, poin default diganti dengan tanda paku.

<PasswordBox x:Name="passwordBox" Width="300" PasswordChar="#"/>

Hasilnya terlihat seperti ini.

Teks header dan tempat penampung

Anda dapat menggunakan properti Header dan PlaceholderText untuk menyediakan konteks untuk Kotak Kata Sandi. Ini sangat berguna ketika Anda memiliki beberapa kotak, seperti pada formulir untuk mengubah kata sandi.

<PasswordBox x:Name="passwordBox" Width="200" Header="Password" PlaceholderText="Enter your password"/>

Panjang maksimum

Tentukan jumlah maksimum karakter yang dapat dimasukkan pengguna dengan mengatur properti MaxLength . Tidak ada properti untuk menentukan panjang minimum, tetapi Anda dapat memeriksa panjang kata sandi, dan melakukan validasi lainnya, dalam kode aplikasi Anda.

Mode ungkap kata sandi

Kotak Kata Sandi memiliki tombol bawaan yang dapat ditekan pengguna untuk menampilkan teks kata sandi. Berikut adalah hasil tindakan pengguna. Ketika pengguna merilisnya, kata sandi secara otomatis disembunyikan lagi.

Mode intip

Secara default, tombol ungkap kata sandi (atau tombol "intip" ) ditampilkan. Pengguna harus terus menekan tombol untuk melihat kata sandi, sehingga tingkat keamanan yang tinggi dipertahankan.

Nilai properti PasswordRevealMode bukan satu-satunya faktor yang menentukan apakah tombol ungkap kata sandi terlihat oleh pengguna. Faktor lain termasuk apakah kontrol ditampilkan di atas lebar minimum, apakah Kotak Kata Sandi memiliki fokus, dan apakah bidang entri teks berisi setidaknya satu karakter. Tombol ungkap kata sandi hanya ditampilkan ketika Kotak Kata Sandi menerima fokus untuk pertama kalinya dan karakter dimasukkan. Jika PasswordBox kehilangan fokus dan kemudian mendapatkan kembali fokus, tombol ungkapkan tidak ditampilkan lagi kecuali kata sandi dihapus dan entri karakter dimulai kembali.

Mode Tersembunyi dan Terlihat

Nilai enumerasi PasswordRevealMode lainnya, Tersembunyi dan Terlihat, menyembunyikan tombol ungkap kata sandi dan memungkinkan Anda mengelola secara terprogram apakah kata sandi dikaburkan.

Untuk selalu mengaburkan kata sandi, atur PasswordRevealMode ke Tersembunyi. Kecuali Anda memerlukan kata sandi untuk selalu dikaburkan, Anda dapat menyediakan UI kustom untuk memungkinkan pengguna mengalihkan PasswordRevealMode antara Tersembunyi dan Terlihat. Misalnya, Anda dapat menggunakan kotak centang untuk mengalihkan apakah kata sandi dikaburkan, seperti yang ditunjukkan dalam contoh berikut. Anda juga dapat menggunakan kontrol lain, seperti ToggleButton, untuk membiarkan pengguna beralih mode.

Contoh ini menunjukkan cara menggunakan Kotak Centang untuk memungkinkan pengguna mengalihkan mode pengungkapan Kotak Sandi.

<StackPanel Width="200">
    <PasswordBox Name="passwordBox1"
                 PasswordRevealMode="Hidden"/>
    <CheckBox Name="revealModeCheckBox" Content="Show password"
              IsChecked="False"
              Checked="CheckBox_Changed" Unchecked="CheckBox_Changed"/>
</StackPanel>

private void CheckBox_Changed(object sender, RoutedEventArgs e)
{
    if (revealModeCheckBox.IsChecked == true)
    {
        passwordBox1.PasswordRevealMode = PasswordRevealMode.Visible;
    }
    else
    {
        passwordBox1.PasswordRevealMode = PasswordRevealMode.Hidden;
    }
}

PasswordBox ini terlihat seperti ini.

Pilih keyboard yang tepat untuk kontrol teks Anda

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. PasswordBox hanya mendukung nilai cakupan input Kata Sandi dan NumericPin . Nilai lain diabaikan.

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

Mendapatkan kode sampel

• Sampel Galeri WinUI - Lihat semua kontrol XAML dalam format interaktif.

Artikel terkait

Kontrol teks

• Panduan untuk pemeriksaan ejaan
• Menambahkan pencarian
• Panduan untuk input teks
• Kelas TextBox
• kelas
• Properti String.Length