Kotak centang

Artikel
07/13/2023

Kotak centang digunakan untuk memilih atau membatalkan pilihan item tindakan. Ini dapat digunakan untuk satu item atau untuk daftar beberapa item yang dapat dipilih pengguna. Kontrol memiliki tiga status pilihan: tidak dipilih, dipilih, dan tidak ditentukan. Gunakan status tidak ditentukan saat kumpulan sub-pilihan memiliki status yang tidak dipilih dan dipilih.

Contoh status kotak centang

Apakah ini kontrol yang tepat?

Gunakan kotak centang tunggal untuk pilihan biner ya/tidak, seperti dengan skenario login "Ingat saya?" atau dengan ketentuan perjanjian layanan.

Kotak centang tunggal yang digunakan untuk pilihan individual

Untuk pilihan biner, perbedaan utama antara kotak centang dan sakelar pengalih adalah kotak centang untuk status dan sakelar pengalih adalah untuk tindakan. Anda dapat menunda penerapan interaksi kotak centang (sebagai bagian dari pengiriman formulir, misalnya), sementara Anda harus segera menerapkan interaksi sakelar pengalihan. Selain itu, hanya kotak centang yang memungkinkan multi-pilihan.

Gunakan beberapa kotak centang untuk skenario multi-pilih di mana pengguna memilih satu atau beberapa item dari sekelompok pilihan yang tidak saling eksklusif.

Buat grup kotak centang saat pengguna dapat memilih kombinasi opsi apa pun.

Memilih beberapa opsi dengan kotak centang

Saat opsi dapat dikelompokkan, Anda bisa menggunakan kotak centang yang tidak ditentukan untuk mewakili seluruh grup. Gunakan status kotak centang yang tidak ditentukan saat pengguna memilih beberapa, tetapi tidak semua, sub-item dalam grup.

Kotak centang yang digunakan untuk memperlihatkan pilihan campuran

Kontrol kotak centang dan tombol radio memungkinkan pengguna memilih dari daftar opsi. Kotak centang memungkinkan pengguna memilih kombinasi opsi. Sebaliknya, tombol radio memungkinkan pengguna membuat satu pilihan dari opsi yang saling eksklusif. Ketika ada lebih dari satu opsi tetapi hanya satu yang dapat dipilih, gunakan tombol radio sebagai gantinya.

Rekomendasi

Verifikasi bahwa tujuan dan status kotak centang saat ini kosong.
Batasi konten teks kotak centang hingga tidak lebih dari dua baris.
Beri kata label kotak centang sebagai pernyataan bahwa tanda centang menjadi benar dan tidak adanya tanda centang membuat false.
Gunakan font default kecuali pedoman merek Anda memberi tahu Anda untuk menggunakan yang lain.
Jika konten teks dinamis, pertimbangkan bagaimana kontrol akan mengubah ukuran dan apa yang akan terjadi pada visual di sekitarnya.
Jika ada dua atau lebih opsi yang saling eksklusif untuk dipilih, pertimbangkan untuk menggunakan tombol radio.
Jangan letakkan dua grup kotak centang di samping satu sama lain. Gunakan label grup untuk memisahkan grup.
Jangan gunakan kotak centang sebagai kontrol aktif/nonaktif atau untuk melakukan perintah; sebagai gantinya, gunakan sakelar pengalih.
Jangan gunakan kotak centang untuk menampilkan kontrol lain, seperti kotak dialog.
Gunakan status yang tidak ditentukan untuk menunjukkan bahwa opsi diatur untuk beberapa, tetapi tidak semua, sub-pilihan.
Saat menggunakan status tidak ditentukan, gunakan kotak centang subordinat untuk memperlihatkan opsi mana yang dipilih dan mana yang tidak. Rancang UI sehingga pengguna bisa melihat sub-pilihan.
Jangan gunakan status yang tidak ditentukan untuk mewakili status ketiga. Status yang tidak ditentukan digunakan untuk menunjukkan bahwa opsi diatur untuk beberapa, tetapi tidak semua, sub-pilihan. Jadi, jangan izinkan pengguna untuk mengatur status yang tidak ditentukan secara langsung. Untuk contoh apa yang tidak boleh dilakukan, kotak centang ini menggunakan status yang tidak ditentukan untuk menunjukkan kepedasan sedang:

Sebagai gantinya, gunakan grup tombol radio yang memiliki tiga opsi.

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 Kotak Centang, Peristiwa yang dicentang, properti IsChecked, properti Konten
Buka aplikasi Galeri WinUI 2 dan lihat kotak centang dalam tindakan. 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.

Buat kotak centang

API Penting: Kelas CheckBox, Peristiwa yang dicentang, properti IsChecked, properti Konten

Buka aplikasi Galeri WinUI 3 dan lihat kotak centang dalam tindakan.

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

Buat kotak centang sederhana

Untuk menetapkan label ke kotak centang, atur properti Konten . Label ditampilkan di samping kotak centang.

XAML ini membuat kotak centang tunggal yang digunakan untuk menyetujui ketentuan layanan sebelum formulir dapat dikirimkan.

<CheckBox x:Name="termsOfServiceCheckBox"
          Content="I agree to the terms of service."/>

Berikut adalah kotak centang yang sama yang dibuat dalam kode.

CheckBox termsOfServiceCheckBox = new CheckBox();
termsOfServiceCheckBox.Content = "I agree to the terms of service.";

Ikat ke IsChecked

Gunakan properti IsChecked untuk menentukan apakah kotak centang dicentang atau dikosongkan. Anda dapat mengikat nilai properti IsChecked ke nilai biner lain. Namun, karena IsChecked adalah nilai boolean nullable , Anda harus menggunakan cast atau pengonversi nilai untuk mengikatnya ke properti boolean. Ini tergantung pada jenis pengikatan aktual yang Anda gunakan dan Anda akan menemukan contoh di bawah ini untuk setiap jenis yang mungkin.

Dalam contoh ini, properti IsChecked dari kotak centang untuk menyetujui ketentuan layanan terikat ke properti IsEnabled dari tombol Kirim. Tombol Kirim diaktifkan hanya jika ketentuan layanan disetujui.

Menggunakan x:Bind

Catatan

Kami hanya menunjukkan kode yang relevan di sini. Untuk informasi selengkapnya tentang pengikatan data, lihat Gambaran umum pengikatan data. Info {x:Bind} tertentu (seperti transmisi) dirinci dalam ekstensi markup {x:Bind}.

<StackPanel Grid.Column="2" Margin="40">
    <CheckBox x:Name="termsOfServiceCheckBox" Content="I agree to the terms of service."/>
    <Button Content="Submit"
            IsEnabled="{x:Bind (x:Boolean)termsOfServiceCheckBox.IsChecked, Mode=OneWay}"/>
</StackPanel>

Jika kotak centang juga dapat berada dalam status tidak ditentukan, kami menggunakan properti FallbackValue pengikatan untuk menentukan nilai boolean yang mewakili status ini. Dalam hal ini, kami juga tidak ingin tombol Kirim diaktifkan:

<Button Content="Submit"
        IsEnabled="{x:Bind (x:Boolean)termsOfServiceCheckBox.IsChecked, Mode=OneWay, FallbackValue=False}"/>

Menggunakan x:Bind atau Binding

Catatan

Kami hanya menampilkan kode yang relevan di sini menggunakan {x:Bind}. Dalam contoh {Binding}, kami akan mengganti {x:Bind} dengan {Binding}. Untuk informasi selengkapnya tentang pengikatan data, pengonversi nilai, dan perbedaan antara ekstensi markup {x:Bind} dan {Binding}, lihat Gambaran umum pengikatan data.

...
<Page.Resources>
    <local:NullableBooleanToBooleanConverter x:Key="NullableBooleanToBooleanConverter"/>
</Page.Resources>

...

<StackPanel Grid.Column="2" Margin="40">
    <CheckBox x:Name="termsOfServiceCheckBox" Content="I agree to the terms of service."/>
    <Button Content="Submit"
            IsEnabled="{x:Bind termsOfServiceCheckBox.IsChecked,
                        Converter={StaticResource NullableBooleanToBooleanConverter}, Mode=OneWay}"/>
</StackPanel>

public class NullableBooleanToBooleanConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is bool?)
        {
            return (bool)value;
        }
        return false;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        if (value is bool)
            return (bool)value;
        return false;
    }
}

Menangani peristiwa Klik dan Diperiksa

Untuk melakukan tindakan saat status kotak centang berubah, Anda bisa menangani peristiwa Klik, atau peristiwa Dicentang dan Tidak Dicentang.

Peristiwa Klik terjadi setiap kali status yang dicentang berubah. Jika Anda menangani peristiwa Klik, gunakan properti IsChecked untuk menentukan status kotak centang.

Peristiwa Diperiksa dan Tidak Dicentang terjadi secara independen. Jika Anda menangani peristiwa ini, Anda harus menangani keduanya untuk merespons perubahan status dalam kotak centang.

Dalam contoh berikut, kami memperlihatkan penanganan peristiwa Klik, dan peristiwa Dicentang dan Tidak Dicentang.

Beberapa kotak centang dapat berbagi penanganan aktivitas yang sama. Contoh ini membuat empat kotak centang untuk memilih topping pizza. Empat kotak centang berbagi penanganan aktivitas Klik yang sama untuk memperbarui daftar topping yang dipilih.

<StackPanel Margin="40">
    <TextBlock Text="Pizza Toppings"/>
    <CheckBox Content="Pepperoni" x:Name="pepperoniCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Beef" x:Name="beefCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Mushrooms" x:Name="mushroomsCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Onions" x:Name="onionsCheckbox"
              Click="toppingsCheckbox_Click"/>

    <!-- Display the selected toppings. -->
    <TextBlock Text="Toppings selected:"/>
    <TextBlock x:Name="toppingsList"/>
</StackPanel>

Berikut adalah penanganan aktivitas untuk peristiwa Klik. Setiap kali kotak centang diklik, kotak centang memeriksa kotak centang untuk melihat kotak centang mana yang dicentang dan memperbarui daftar topping yang dipilih.

private void toppingsCheckbox_Click(object sender, RoutedEventArgs e)
{
    string selectedToppingsText = string.Empty;
    CheckBox[] checkboxes = new CheckBox[] { pepperoniCheckbox, beefCheckbox,
                                             mushroomsCheckbox, onionsCheckbox };
    foreach (CheckBox c in checkboxes)
    {
        if (c.IsChecked == true)
        {
            if (selectedToppingsText.Length > 1)
            {
                selectedToppingsText += ", ";
            }
            selectedToppingsText += c.Content;
        }
    }
    toppingsList.Text = selectedToppingsText;
}

Gunakan status yang tidak ditentukan

Kontrol CheckBox mewarisi dari ToggleButton dan dapat memiliki tiga status:

Provinsi	Properti	Nilai
dicentang	Dicentang	benar
yang tidak dicentang	Dicentang	salah
tidak ditentukan	Dicentang	nihil

Agar kotak centang melaporkan status yang tidak ditentukan, Anda harus mengatur properti IsThreeState ke true.

Dalam contoh berikut, kotak centang "Pilih semua" memiliki properti IsThreeState yang diatur ke true. Kotak centang "Pilih semua" dicentang jika semua elemen anak dicentang, tidak dicentang jika semua elemen turunan tidak dicentang, dan tidak menentukan sebaliknya.

<StackPanel>
    <CheckBox x:Name="OptionsAllCheckBox" Content="Select all" IsThreeState="True"
              Checked="SelectAll_Checked" Unchecked="SelectAll_Unchecked"
              Indeterminate="SelectAll_Indeterminate"/>
    <CheckBox x:Name="Option1CheckBox" Content="Option 1" Margin="24,0,0,0"
              Checked="Option_Checked" Unchecked="Option_Unchecked" />
    <CheckBox x:Name="Option2CheckBox" Content="Option 2" Margin="24,0,0,0"
              Checked="Option_Checked" Unchecked="Option_Unchecked" IsChecked="True"/>
    <CheckBox x:Name="Option3CheckBox" Content="Option 3" Margin="24,0,0,0"
              Checked="Option_Checked" Unchecked="Option_Unchecked" />
</StackPanel>

private void Option_Checked(object sender, RoutedEventArgs e)
{
    SetCheckedState();
}

private void Option_Unchecked(object sender, RoutedEventArgs e)
{
    SetCheckedState();
}

private void SelectAll_Checked(object sender, RoutedEventArgs e)
{
    Option1CheckBox.IsChecked = Option2CheckBox.IsChecked = Option3CheckBox.IsChecked = true;
}

private void SelectAll_Unchecked(object sender, RoutedEventArgs e)
{
    Option1CheckBox.IsChecked = Option2CheckBox.IsChecked = Option3CheckBox.IsChecked = false;
}

private void SelectAll_Indeterminate(object sender, RoutedEventArgs e)
{
    // If the SelectAll box is checked (all options are selected),
    // clicking the box will change it to its indeterminate state.
    // Instead, we want to uncheck all the boxes,
    // so we do this programmatically. The indeterminate state should
    // only be set programmatically, not by the user.

    if (Option1CheckBox.IsChecked == true &&
        Option2CheckBox.IsChecked == true &&
        Option3CheckBox.IsChecked == true)
    {
        // This will cause SelectAll_Unchecked to be executed, so
        // we don't need to uncheck the other boxes here.
        OptionsAllCheckBox.IsChecked = false;
    }
}

private void SetCheckedState()
{
    // Controls are null the first time this is called, so we just
    // need to perform a null check on any one of the controls.
    if (Option1CheckBox != null)
    {
        if (Option1CheckBox.IsChecked == true &&
            Option2CheckBox.IsChecked == true &&
            Option3CheckBox.IsChecked == true)
        {
            OptionsAllCheckBox.IsChecked = true;
        }
        else if (Option1CheckBox.IsChecked == false &&
            Option2CheckBox.IsChecked == false &&
            Option3CheckBox.IsChecked == false)
        {
            OptionsAllCheckBox.IsChecked = false;
        }
        else
        {
            // Set third state (indeterminate) by setting IsChecked to null.
            OptionsAllCheckBox.IsChecked = null;
        }
    }
}

Mendapatkan kode sampel

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

Bagikan melalui

Kotak centang

Apakah ini kontrol yang tepat?

Rekomendasi

UWP dan WinUI 2

Buat kotak centang

Buat kotak centang sederhana

Ikat ke IsChecked

Menggunakan x:Bind

Menggunakan x:Bind atau Binding

Menangani peristiwa Klik dan Diperiksa

Gunakan status yang tidak ditentukan

Mendapatkan kode sampel

Sumber Daya Tambahan:

Bagikan melalui

Kotak centang

Apakah ini kontrol yang tepat?

Rekomendasi

UWP dan WinUI 2

Buat kotak centang

Buat kotak centang sederhana

Ikat ke IsChecked

Menggunakan x:Bind

Menggunakan x:Bind atau Binding

Menangani peristiwa Klik dan Diperiksa

Gunakan status yang tidak ditentukan

Mendapatkan kode sampel

Artikel terkait

Sumber Daya Tambahan: