Bagikan melalui

Tombol pilihan 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 pemilihan ganda dan penghapusan.

Contoh grup RadioButtons, dengan satu tombol radio dipilih

Apakah ini kontrol yang tepat?

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

grup RadioButtons, dengan satu tombol radio dipilih

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.

Kotak kombo, menampilkan opsi default

Jika hanya ada dua opsi yang mungkin yang dapat diekspresikan dengan jelas sebagai satu pilihan biner, seperti aktif/mati atau ya/tidak, gabungkan ke dalam kotak centang tunggal atau alihkan kontrol. 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:

Dua tombol radio yang menyajikan pilihan biner

Gunakan kotak centang sebagai gantinya:

Kotak centang adalah alternatif yang baik untuk menyajikan pilihan biner

Saat pengguna dapat memilih beberapa opsi, gunakan kotak centang .

mendukung multiseleksi kotak centang

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

Kontrol slider, menampilkan satu nilai dalam rentang nilai

Jika ada lebih dari delapan opsi, gunakan kotak kombo .

Kotak daftar, menampilkan beberapa opsi

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

Recommendations

  • 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

Tombol Radio vs Tombol Radio

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 dari kontrol individual RadioButton.

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.

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.

Nota

Item yang menerima fokus tab dari navigasi tab awal tidak dipilih.

daftar tanpa fokus tab, tidak ada pilihan

Daftar tanpa fokus tab dan tidak ada item yang dipilih

Daftar dengan fokus ke tab awal, tanpa pilihan

daftar dengan fokus tab awal dan tidak ada item yang dipilih

Satu tombol radio dipilih

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

Daftar tanpa fokus tab

Daftar tanpa fokus tab dan item yang dipilih

Daftar dengan fokus tab awal

Daftar dengan fokus tab awal dan item yang dipilih

Navigasi papan ketik

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

Saat item dalam grup RadioButtons 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.

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

kolom tunggal

Contoh navigasi papan ketik dalam grup tombol radio dengan satu kolom

Tombol Panah atas dan Panah bawah berpindah antar item.
Panah kiri dan Tombol panah kanan tidak melakukan apa pun.

baris tunggal

Contoh navigasi keyboard dalam grup RadioButtons baris tunggal

Tombol panah Kiri dan Atas berpindah ke item sebelumnya, dan tombol panah Kanan dan Bawah berpindah ke item berikutnya.

Dalam tata letak kisi yang memiliki banyak kolom dan baris, navigasi papan ketik menghasilkan perilaku berikut:

tombol panah Kiri/Kanan

Contoh navigasi keyboard horizontal dalam grup Tombol Radio berkolom dan baris

Tombol panah Kiri dan Kanan memindahkan fokus secara horizontal antar item dalam baris.

Contoh navigasi keyboard horizontal dengan fokus pada item terakhir dalam kolom

Saat fokus pada item terakhir dalam kolom dan tombol panah Kanan atau Kiri ditekan, fokus berpindah ke item terakhir di kolom berikutnya atau sebelumnya (jika ada).

tombol panah Atas/Bawah

Contoh dari navigasi keyboard vertikal dalam grup tombol radio multi-kolom/baris

Tombol panah Atas dan Bawah memindahkan fokus secara vertikal di antara item dalam kolom.

Contoh navigasi keyboard vertikal dengan fokus pada item terakhir dalam kolom

Saat fokus pada item terakhir dalam kolom dan tombol Panah bawah ditekan, fokus berpindah ke item pertama di kolom berikutnya (jika ada). Saat fokus pada item pertama dalam kolom dan tombol Panah atas ditekan, fokus berpindah ke item terakhir di kolom sebelumnya (jika ada)

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 grup RadioButtons, karena fokus berpindah dari satu item ke item berikutnya, item yang baru difokuskan dipilih dan item yang sebelumnya difokuskan dihapus.

Sebelum navigasi keyboard

Contoh fokus dan pilihan sebelum navigasi keyboard

Fokus dan pilihan sebelum navigasi keyboard.

Setelah navigasi keyboard

Contoh fokus dan pilihan setelah navigasi keyboard

Fokus dan pilihan setelah navigasi keyboard, di mana tombol Panah bawah memindahkan fokus ke tombol radio 3, memilihnya, dan menghapus tombol radio 2.

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.

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.

Karakteristik aksesibilitas

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

Tindakan Pengumuman penyampai
Fokus berpindah ke item terpilih "nama, RadioButton, dipilih, x dari N"
Fokus berpindah ke item yang tidak dipilih
(Jika menavigasi dengan tombol Ctrl-arrow atau gamepad Xbox,
yang menunjukkan pilihan tidak mengikuti fokus.)		 "nama, RadioButton, tidak dipilih, x dari N"

Nota

Nama yang diumumkan oleh Narator untuk setiap item adalah nilai dari properti terlampir AutomationProperties.Name jika tersedia; jika tidak, nilai tersebut adalah hasil yang dikembalikan oleh metode ToString item.

x adalah jumlah item saat ini. N adalah jumlah total item dalam grup.

Membuat Grup Tombol Radio WinUI

Buka aplikasi Galeri WinUI 3 dan lihat RadioButton 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

Kontrol RadioButtons menggunakan model konten yang mirip dengan ItemsControl. Ini berarti Bahwa Anda dapat:

  • Isi dengan menambahkan item langsung ke kumpulan Item atau dengan mengikat data ke properti ItemsSource.
  • 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 RadioButtons sederhana dengan tiga opsi. Properti Header diatur untuk memberi grup label, dan 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:

Sekelompok tiga tombol radio

Untuk mengambil tindakan saat pengguna memilih opsi, tangani peristiwa SelectionChanged. Di sini, Anda mengubah warna latar belakang elemen Garis 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;
        }
    }
}

Petunjuk / Saran

Anda juga bisa mendapatkan item yang dipilih dari properti SelectionChangedEventArgs.AddedItems. Hanya akan ada satu item yang dipilih, pada indeks 0, sehingga Anda bisa mendapatkan item yang dipilih seperti ini: string colorName = e.AddedItems[0] as string;.

Status pilihan

Tombol radio memiliki dua status: dipilih atau dibersihkan. Saat opsi dipilih dalam grup RadioButtons, 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. (Mengatur SelectedIndex ke nilai apa pun di luar rentang koleksi Items tidak menghasilkan pilihan.)

Konten RadioButtons

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

Namun, Anda dapat mengisi kontrol RadioButtons 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>

tombol radio grup dengan ikon simbol

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

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

Pengikatan data

Kontrol mendukung pengikatan data ke properti ItemsSource. 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 penanganan aktivitas SelectionChanged.

<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;
    }
}

Pengontrol RadioButton dalam grup RadioButtons

Anda dapat menggunakan kontrol RadioButton individual untuk mengisi item . Anda mungkin melakukan ini untuk mendapatkan akses ke properti tertentu, seperti AutomationProperties.Name; atau Anda mungkin memiliki kode RadioButton yang 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 kontrol RadioButton dalam grup RadioButtons, kontrol RadioButtons tahu cara menyajikan RadioButton, sehingga Anda tidak akan berakhir dengan dua lingkaran pilihan.

Namun, ada beberapa perilaku yang harus Anda waspadai. Sebaiknya Anda menangani keadaan dan peristiwa pada kontrol individual atau di RadioButtons, dan bukan keduanya, untuk menghindari konflik.

Tabel ini memperlihatkan peristiwa dan properti terkait pada kedua kontrol.

RadioButton Tombol Radio
Dicentang, Tidak Dicentang, Klik PemilihanBerubah
Dicentang SelectedItem, SelectedIndex

Jika Anda menangani peristiwa pada individu RadioButton, seperti Checked atau Unchecked, dan juga menangani peristiwa RadioButtons.SelectionChanged, kedua peristiwa akan diaktifkan. Peristiwa RadioButton terjadi terlebih dahulu, lalu peristiwa RadioButtons.SelectionChanged 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 dibentuk oleh kontrol RadioButtons.

Menentukan beberapa kolom

Secara default, kontrol RadioButtons 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 diatur dalam urutan berdasarkan kolom, di mana item diisi dari atas ke bawah, lalu dari 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>

tombol radio terdiri dari dua grup dengan tiga kolom

Petunjuk / Saran

Untuk mengatur item dalam satu baris horizontal, atur MaxColumns sama dengan jumlah item dalam grup.

Membuat grup RadioButton Anda sendiri

Penting

Sebaiknya gunakan kontrol RadioButtons untuk mengelompokkan elemen RadioButton.

Tombol radio bekerja dalam grup. Anda dapat mengelompokkan kontrol individual RadioButton 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 kontrol RadioButton ini terlihat seperti ini:

tombol Radio dalam dua grup

Keadaan tombol radio

Tombol radio memiliki dua status: dipilih atau dibersihkan. Ketika tombol radio dipilih, properti IsChecked (Dicentang) adalah true. Ketika tombol radio dikosongkan, properti 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 properti IsChecked ke false.

Visual yang perlu dipertimbangkan

Penspasian default kontrol RadioButton individual berbeda dari penspasian yang disediakan oleh grup RadioButtons. Untuk menerapkan penspasian RadioButtons ke kontrol RadioButton individual, gunakan nilai Margin sebesar 0,0,7,3, seperti yang 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.

Gambar memperlihatkan sekumpulan tombol radio, disusun secara vertikal

Gambar memperlihatkan panduan penspasian untuk tombol radio

Nota

Jika Anda menggunakan kontrol WinUI RadioButtons, spasi, margin, dan orientasi sudah dioptimalkan.

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan Windows App SDK 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.

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 .

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 dari kontrol individual RadioButton. 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 />
  • Last updated on