Tombol radio

Tombol radio, juga disebut tombol opsi, memungkinkan pengguna memilih satu opsi dari koleksi dua atau beberapa opsi yang saling eksklusif, tetapi terkait. Tombol radio selalu digunakan dalam grup, dan setiap opsi diwakili oleh satu tombol radio dalam grup.

Dalam status default, tidak ada tombol radio dalam grup RadioButtons yang dipilih. Artinya, semua tombol radio dibersihkan. Namun, setelah pengguna memilih tombol radio, pengguna tidak dapat membatalkan pilihan tombol untuk memulihkan grup ke status kosong awal.

Perilaku tunggal grup RadioButtons membedakannya dari kotak centang, yang mendukung multi-pilihan dan penghapusan, atau penghapusan.

Apakah ini kontrol yang tepat?

Gunakan tombol radio untuk memungkinkan pengguna memilih dari dua atau beberapa opsi yang saling eksklusif.

Gunakan tombol radio saat pengguna perlu melihat semua opsi sebelum mereka membuat pilihan. Tombol radio menekankan semua opsi secara merata, yang berarti bahwa beberapa opsi mungkin menarik lebih banyak perhatian daripada yang diperlukan atau diinginkan.

Kecuali semua opsi layak mendapatkan perhatian yang sama, pertimbangkan untuk menggunakan kontrol lain. Misalnya, untuk merekomendasikan satu opsi terbaik bagi sebagian besar pengguna dan dalam sebagian besar situasi, gunakan kotak kombo untuk menampilkan opsi terbaik tersebut sebagai opsi default.

Jika hanya ada dua opsi yang mungkin yang dapat dinyatakan dengan jelas sebagai satu pilihan biner, seperti aktif/mati atau ya/tidak, gabungkan ke dalam satu kotak centang atau alihkan kontrol pengalihan . Misalnya, gunakan kotak centang tunggal untuk "Saya setuju" alih-alih dua tombol radio untuk "Saya setuju" dan "Saya tidak setuju."

Jangan gunakan dua tombol radio untuk satu pilihan biner:

Gunakan kotak centang sebagai gantinya:

Saat pengguna dapat memilih beberapa opsi, gunakan kotak centang.

Ketika opsi pengguna berada dalam rentang nilai (misalnya, 10, 20, 30, ... 100), gunakan kontrol penggerak.

Jika ada lebih dari delapan opsi, gunakan kotak kombo.

Jika opsi yang tersedia didasarkan pada konteks aplikasi saat ini, atau opsi tersebut dapat bervariasi secara dinamis, gunakan kontrol daftar.

Rekomendasi

• Pastikan bahwa tujuan dan status saat ini dari sekumpulan tombol radio eksplisit.
• Batasi label teks tombol radio ke satu baris.
• Jika label teks dinamis, pertimbangkan bagaimana tombol akan secara otomatis mengubah ukuran dan apa yang akan terjadi pada visual apa pun di sekitarnya.
• Gunakan font default kecuali pedoman merek Anda memberi tahu Anda sebaliknya.
• Jangan menempatkan dua grup RadioButtons berdampingan. Ketika dua grup RadioButtons berada tepat di samping satu sama lain, mungkin sulit bagi pengguna untuk menentukan tombol mana yang termasuk dalam grup mana.

Gambaran umum RadioButtons

RadioButtons vs RadioButton

Ada dua cara untuk membuat grup tombol radio: RadioButtons dan RadioButton.

• Kami merekomendasikan kontrol RadioButtons. Kontrol ini menyederhanakan tata letak, menangani navigasi dan aksesibilitas keyboard, dan mendukung pengikatan ke sumber data.
• Anda dapat menggunakan grup kontrol RadioButton individual.

Akses keyboard dan perilaku navigasi telah dioptimalkan dalam kontrol RadioButtons . Peningkatan ini membantu aksesibilitas dan pengguna daya keyboard berpindah melalui daftar opsi dengan lebih cepat dan mudah.

Selain peningkatan ini, tata letak visual default tombol radio individual dalam grup RadioButtons telah dioptimalkan melalui pengaturan orientasi, penspasian, dan margin otomatis. Pengoptimalan ini menghilangkan persyaratan untuk menentukan properti ini, seperti yang mungkin harus Anda lakukan ketika Anda menggunakan kontrol pengelompokan yang lebih primitif, seperti StackPanel atau Grid.

Menavigasi grup RadioButtons

Kontrol RadioButtons memiliki perilaku navigasi khusus yang membantu pengguna keyboard menavigasi daftar dengan lebih cepat dan lebih mudah.

Fokus keyboard

Kontrol RadioButtons mendukung dua status:

• Tidak ada tombol radio yang dipilih
• Satu tombol radio dipilih

Bagian berikutnya menjelaskan perilaku fokus kontrol di setiap status.

Tidak ada tombol radio yang dipilih

Ketika tidak ada tombol radio yang dipilih, tombol radio pertama dalam daftar mendapatkan fokus.

Satu tombol radio dipilih

Ketika pengguna masuk ke daftar di mana tombol radio sudah dipilih, tombol radio yang dipilih akan mendapatkan fokus.

Navigasi papan ketik

Untuk informasi selengkapnya tentang perilaku navigasi keyboard umum, lihat Interaksi keyboard - Navigasi.

Saat item dalam RadioButtons grup sudah memiliki fokus, pengguna dapat menggunakan tombol panah untuk "navigasi dalam" di antara item dalam grup. Tombol panah Atas dan Bawah berpindah ke item logis "berikutnya" atau "sebelumnya", seperti yang didefinisikan dalam markup XAML Anda. Tombol panah Kiri dan Kanan bergerak secara spasial.

Navigasi dalam tata letak kolom tunggal atau baris tunggal

Dalam tata letak kolom tunggal atau baris tunggal, navigasi keyboard menghasilkan perilaku berikut:

Navigasi dalam tata letak multi-kolom dan multi-baris

Dalam tata letak kisi multi-kolom, multi-baris, navigasi keyboard menghasilkan perilaku ini:

Tombol panah Kiri/Kanan

Tombol panah Atas/Bawah

Untuk informasi selengkapnya, lihat Interaksi keyboard.

Pembungkusan

Grup RadioButtons tidak membungkus fokus dari baris atau kolom pertama ke yang terakhir, atau dari baris atau kolom terakhir ke yang pertama. Ini karena, ketika pengguna menggunakan pembaca layar, rasa batas dan indikasi yang jelas tentang awal dan akhir hilang, yang menyulitkan pengguna dengan gangguan visual untuk menavigasi daftar.

Kontrol RadioButtons juga tidak mendukung enumerasi, karena kontrol dimaksudkan untuk berisi jumlah item yang wajar (lihat Apakah ini kontrol yang tepat?).

Pemilihan mengikuti fokus

Saat Anda menggunakan keyboard untuk menavigasi antar item dalam RadioButtons grup, karena fokus berpindah dari satu item ke item berikutnya, item yang baru difokuskan dipilih dan item yang sebelumnya difokuskan dihapus.

Anda dapat memindahkan fokus tanpa mengubah pilihan dengan menggunakan tombol Ctrl+panah untuk menavigasi. Setelah fokus dipindahkan, Anda dapat menggunakan Bilah Spasi untuk memilih item yang saat ini memiliki fokus.

Menavigasi dengan game pad dan remote control

Jika Anda menggunakan pad permainan atau remote control untuk berpindah antar tombol radio, perilaku "seleksi mengikuti fokus" dinonaktifkan, dan pengguna harus menekan tombol "A" untuk memilih tombol radio yang saat ini memiliki fokus.

Perilaku aksesibilitas

Tabel berikut ini menjelaskan cara Narator menangani RadioButtons grup dan apa yang diumumkan. Perilaku ini tergantung pada bagaimana pengguna telah mengatur preferensi detail Narator.

UWP dan WinUI 2

Kontrol RadioButtons untuk aplikasi UWP disertakan sebagai bagian dari WinUI 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat WinUI 2. API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls dan Microsoft.UI.Xaml.Controls .

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.

Ada dua cara untuk membuat grup tombol radio.

• Dimulai dengan WinUI 2.3, kami merekomendasikan kontrol RadioButtons. Kontrol ini menyederhanakan tata letak, menangani navigasi dan aksesibilitas keyboard, dan mendukung pengikatan ke sumber data.
• Anda dapat menggunakan grup kontrol RadioButton individual. Jika aplikasi Anda tidak menggunakan WinUI 2.3 atau yang lebih baru, ini adalah satu-satunya opsi.

Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya dan templat terbaru untuk semua kontrol.

Untuk menggunakan kode dalam artikel ini dengan WinUI 2, gunakan alias di XAML (kami menggunakan muxc) untuk mewakili API Pustaka Windows UI yang disertakan dalam proyek Anda. Lihat Mulai menggunakan WinUI 2 untuk informasi selengkapnya.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:RadioButtons />

Membuat grup RadioButtons WinUI

RadioButtons Kontrol menggunakan con mode tenda l yang mirip dengan ItemsControl. Ini berarti Anda dapat:

• Isi dengan menambahkan item langsung ke koleksi Item atau dengan mengikat data ke properti ItemsSource-nya.
• Gunakan properti SelectedIndex atau SelectedItem untuk mendapatkan dan mengatur opsi mana yang dipilih.
• Tangani peristiwa SelectionChanged untuk mengambil tindakan saat opsi dipilih.

Di sini, Anda mendeklarasikan kontrol sederhana RadioButtons dengan tiga opsi. Properti Header diatur untuk memberi grup label, dan SelectedIndex properti diatur untuk menyediakan opsi default.

<RadioButtons Header="Background color"
              SelectedIndex="0"
              SelectionChanged="BackgroundColor_SelectionChanged">
    <x:String>Red</x:String>
    <x:String>Green</x:String>
    <x:String>Blue</x:String>
</RadioButtons>

Hasilnya terlihat seperti ini:

Untuk mengambil tindakan saat pengguna memilih opsi, tangani peristiwa SelectionChanged . Di sini, Anda mengubah warna latar belakang elemen Batas bernama "ExampleBorder" (<Border x:Name="ExampleBorder" Width="100" Height="100"/>).

private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (ExampleBorder != null && sender is RadioButtons rb)
    {
        string colorName = rb.SelectedItem as string;
        switch (colorName)
        {
            case "Red":
                ExampleBorder.Background = new SolidColorBrush(Colors.Red);
                break;
            case "Green":
                ExampleBorder.Background = new SolidColorBrush(Colors.Green);
                break;
            case "Blue":
                ExampleBorder.Background = new SolidColorBrush(Colors.Blue);
                break;
        }
    }
}

Status pilihan

Tombol radio memiliki dua status: dipilih atau dibersihkan. Saat opsi dipilih dalam RadioButtons grup, Anda bisa mendapatkan nilainya dari properti SelectedItem , dan lokasinya dalam koleksi dari properti SelectedIndex . Tombol radio dapat dibersihkan jika pengguna memilih tombol radio lain dalam grup yang sama, tetapi tidak dapat dibersihkan jika pengguna memilihnya lagi. Namun, Anda dapat menghapus grup tombol radio secara terprogram dengan mengaturnya SelectedItem = null, atau SelectedIndex = -1. (Pengaturan SelectedIndex ke nilai apa pun di luar rentang Items koleksi tidak menghasilkan pilihan.)

Konten RadioButtons

Dalam contoh sebelumnya, Anda mengisi RadioButtons kontrol dengan string sederhana. Kontrol menyediakan tombol radio, dan menggunakan string sebagai label untuk masing-masing.

Namun, Anda dapat mengisi RadioButtons kontrol dengan objek apa pun. Biasanya, Anda ingin objek memberikan representasi string yang dapat digunakan sebagai label teks. Dalam beberapa kasus, gambar mungkin sesuai sebagai pengganti teks.

Di sini, elemen SymbolIcon digunakan untuk mengisi kontrol.

<RadioButtons Header="Select an icon option:">
    <SymbolIcon Symbol="Back"/>
    <SymbolIcon Symbol="Attach"/>
    <SymbolIcon Symbol="HangUp"/>
    <SymbolIcon Symbol="FullScreen"/>
</RadioButtons>

Anda juga dapat menggunakan kontrol RadioButton individual untuk mengisi RadioButtons item. Ini adalah kasus khusus yang kita bahas nanti. Lihat Kontrol RadioButton dalam grup RadioButtons.

Manfaat untuk dapat menggunakan objek apa pun adalah Anda dapat mengikat RadioButtons kontrol ke jenis kustom dalam model data Anda. Bagian berikutnya menunjukkan ini.

Pengikatan data

Kontrol RadioButtons mendukung pengikatan data ke properti ItemsSource-nya. Contoh ini memperlihatkan bagaimana Anda dapat mengikat kontrol ke sumber data kustom. Tampilan dan fungsionalitas contoh ini sama dengan contoh warna latar belakang sebelumnya, tetapi di sini, kuas warna disimpan dalam model data alih-alih dibuat di SelectionChanged penanganan aktivitas.

<RadioButtons Header="Background color"
              SelectedIndex="0"
              SelectionChanged="BackgroundColor_SelectionChanged"
              ItemsSource="{x:Bind colorOptionItems}"/>

public sealed partial class MainPage : Page
{
    // Custom data item.
    public class ColorOptionDataModel
    {
        public string Label { get; set; }
        public SolidColorBrush ColorBrush { get; set; }

        public override string ToString()
        {
            return Label;
        }
    }

    List<ColorOptionDataModel> colorOptionItems;

    public MainPage1()
    {
        this.InitializeComponent();

        colorOptionItems = new List<ColorOptionDataModel>();
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Red", ColorBrush = new SolidColorBrush(Colors.Red) });
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Green", ColorBrush = new SolidColorBrush(Colors.Green) });
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Blue", ColorBrush = new SolidColorBrush(Colors.Blue) });
    }

    private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var option = e.AddedItems[0] as ColorOptionDataModel;
        ExampleBorder.Background = option?.ColorBrush;
    }
}

Kontrol RadioButton dalam grup RadioButtons

Anda dapat menggunakan kontrol RadioButton individual untuk mengisi RadioButtons item. Anda mungkin melakukan ini untuk mendapatkan akses ke properti tertentu, seperti AutomationProperties.Name; atau Anda mungkin memiliki kode yang RadioButton ada, tetapi ingin memanfaatkan tata letak dan navigasi RadioButtons.

<RadioButtons Header="Background color">
    <RadioButton Content="Red" Tag="red" AutomationProperties.Name="red"/>
    <RadioButton Content="Green" Tag="green" AutomationProperties.Name="green"/>
    <RadioButton Content="Blue" Tag="blue" AutomationProperties.Name="blue"/>
</RadioButtons>

Saat Anda menggunakan RadioButton kontrol dalam RadioButtons grup, RadioButtons kontrol mengetahui cara menyajikan RadioButton, sehingga Anda tidak akan berakhir dengan dua lingkaran pilihan.

Namun, ada beberapa perilaku yang harus Anda waspadai. Sebaiknya Anda menangani status dan peristiwa pada kontrol individu atau di RadioButtons, tetapi tidak keduanya, untuk menghindari konflik.

Tabel ini memperlihatkan peristiwa dan properti terkait pada kedua kontrol.

Jika Anda menangani peristiwa pada individu RadioButton, seperti Checked atau Unchecked, dan juga menangani RadioButtons.SelectionChanged peristiwa, kedua peristiwa akan diaktifkan. Peristiwa terjadi RadioButton terlebih dahulu, dan kemudian RadioButtons.SelectionChanged peristiwa terjadi, yang dapat mengakibatkan konflik.

Properti IsChecked, SelectedItem, dan SelectedIndex tetap disinkronkan. Perubahan pada satu properti memperbarui dua properti lainnya.

Properti RadioButton.GroupName diabaikan. Grup dibuat oleh RadioButtons kontrol.

Menentukan beberapa kolom

Secara default, RadioButtons kontrol mengatur tombol radionya secara vertikal dalam satu kolom. Anda dapat mengatur properti MaxColumns untuk membuat kontrol mengatur tombol radio di beberapa kolom. (Ketika Anda melakukan ini, item ditata dalam urutan utama kolom, di mana item mengisi dari atas ke bawah, lalu kiri ke kanan.)

<RadioButtons Header="RadioButtons in columns" MaxColumns="3">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
    <x:String>Item 6</x:String>
</RadioButtons>

Membuat grup RadioButton Anda sendiri

Tombol radio bekerja dalam grup. Anda dapat mengelompokkan kontrol RadioButton individual dengan salah satu dari dua cara:

• Masukkan ke dalam kontainer induk yang sama.
• Atur properti GroupName pada setiap tombol radio ke nilai yang sama.

Dalam contoh ini, grup tombol radio pertama dikelompokkan secara implisit dengan berada di panel tumpukan yang sama. Grup kedua dibagi antara dua panel tumpukan, jadi GroupName digunakan untuk mengelompokkannya secara eksplisit ke dalam satu grup.

<StackPanel>
    <StackPanel>
        <TextBlock Text="Background" Style="{ThemeResource BaseTextBlockStyle}"/>
        <!-- Group 1 - implicit grouping -->
        <StackPanel Orientation="Horizontal">
            <RadioButton Content="Green" Tag="green" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="Yellow" Tag="yellow" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="White" Tag="white" Checked="BGRadioButton_Checked"
                         IsChecked="True"/>
        </StackPanel>
    </StackPanel>

    <StackPanel>
        <TextBlock Text="BorderBrush" Style="{ThemeResource BaseTextBlockStyle}"/>
        <!-- Group 2 - grouped by GroupName -->
        <StackPanel Orientation="Horizontal">
            <StackPanel>
                <RadioButton Content="Green" Tag="green" GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked"/>
                <RadioButton Content="Yellow" Tag="yellow" GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked" IsChecked="True"/>
                <RadioButton Content="White" Tag="white"  GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked"/>
            </StackPanel>
        </StackPanel>
    </StackPanel>
    <Border x:Name="ExampleBorder"
            BorderBrush="#FFFFD700" Background="#FFFFFFFF"
            BorderThickness="10" Height="50" Margin="0,10"/>
</StackPanel>

private void BGRadioButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton rb = sender as RadioButton;

    if (rb != null && ExampleBorder != null)
    {
        string colorName = rb.Tag.ToString();
        switch (colorName)
        {
            case "yellow":
                ExampleBorder.Background = new SolidColorBrush(Colors.Yellow);
                break;
            case "green":
                ExampleBorder.Background = new SolidColorBrush(Colors.Green);
                break;
            case "white":
                ExampleBorder.Background = new SolidColorBrush(Colors.White);
                break;
        }
    }
}

private void BorderRadioButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton rb = sender as RadioButton;

    if (rb != null && ExampleBorder != null)
    {
        string colorName = rb.Tag.ToString();
        switch (colorName)
        {
            case "yellow":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.Gold);
                break;
            case "green":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.DarkGreen);
                break;
            case "white":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.White);
                break;
        }
    }
}

Kedua grup RadioButton kontrol ini terlihat seperti ini:

Status tombol radio

Tombol radio memiliki dua status: dipilih atau dibersihkan. Ketika tombol radio dipilih, properti IsChecked-nya adalah true. Ketika tombol radio dibersihkan, propertinya IsChecked adalah false. Tombol radio dapat dibersihkan jika pengguna memilih tombol radio lain dalam grup yang sama, tetapi tidak dapat dibersihkan jika pengguna memilihnya lagi. Namun, Anda dapat menghapus tombol radio secara terprogram dengan mengatur propertinya IsChecked ke false.

Visual yang perlu dipertimbangkan

Penspasian default kontrol individual RadioButton berbeda dari penspasian yang RadioButtons disediakan oleh grup. Untuk menerapkan penspasian ke kontrol individualRadioButton, gunakan nilai 0,0,7,3, seperti yang RadioButtons Margin ditunjukkan di sini.

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="RadioButton">
            <Setter Property="Margin" Value="0,0,7,3"/>
        </Style>
    </StackPanel.Resources>
    <TextBlock Text="Background"/>
    <RadioButton Content="Item 1"/>
    <RadioButton Content="Item 2"/>
    <RadioButton Content="Item 3"/>
</StackPanel>

Gambar berikut menunjukkan spasi tombol radio pilihan dalam grup.

Mendapatkan kode sampel

• Galeri WinUI: Sampel ini menunjukkan semua kontrol XAML dalam format interaktif.

Topik terkait

• Tombol
• Alihkan sakelar
• Kotak centang
• Daftar dan kotak kombo
• Slider
• Kelas RadioButtons
• Kelas RadioButton