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.
Catatan
Item yang menerima fokus tab dari navigasi tab awal tidak dipilih.
Daftar tanpa fokus tab, tanpa pilihan
Daftar dengan fokus tab awal, tanpa pilihan
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 dengan fokus tab awal
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:
Kolom tunggal
Tombol Panah atas dan Panah bawah berpindah antar item.
Panah Kiri dan Tombol panah kanan tidak melakukan apa pun.
Baris tunggal
Tombol panah Kiri dan Atas berpindah ke item sebelumnya, dan tombol panah Kanan dan Bawah berpindah ke item berikutnya.
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 Kiri dan Kanan memindahkan fokus secara horizontal antar item dalam baris.
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
Tombol panah Atas dan Bawah memindahkan fokus secara vertikal di antara item 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 RadioButtons grup, karena fokus berpindah dari satu item ke item berikutnya, item yang baru difokuskan dipilih dan item yang sebelumnya difokuskan dihapus.
Sebelum navigasi keyboard
Fokus dan pilihan sebelum navigasi keyboard.
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.
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.
| Tindakan | Pengumuman narator |
|---|---|
| Fokus berpindah ke item terpilih | "name, RadioButton, selected, x of N" |
| Fokus berpindah ke item yang tidak dipilih (Jika menavigasi dengan tombol Ctrl-arrow atau gamepad Xbox, yang menunjukkan pilihan tidak mengikuti fokus.) |
"name, RadioButton, non-selected, x of N" |
Catatan
Nama yang diumumkan Narator untuk setiap item adalah nilai properti terlampir AutomationProperties.Name jika tersedia untuk item; jika tidak, itu adalah nilai yang dikembalikan oleh metode ToString item.
x adalah jumlah item saat ini. N adalah jumlah total item dalam grup.
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.
Kontrol RadioButtons untuk aplikasi UWP disertakan sebagai bagian dari Pustaka UI Windows 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat Pustaka UI Windows. API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls dan Microsoft.UI.Xaml.Controls .
- API UWP: Kelas RadioButton, properti IsChecked, Peristiwa diperiksa
- WinUI 2 Apis: Kelas RadioButtons, properti SelectedItem, properti SelectedIndex, SelectionChanged event
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
- API Penting: kelas RadioButtons, properti SelectedItem, properti SelectedIndex, SelectionChanged event, radioButton class, IsChecked property, Checked event
- Buka aplikasi Galeri WinUI 2 dan lihat RadioButton 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.
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;
}
}
}
Tip
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 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.
| RadioButton | RadioButtons |
|---|---|
| Dicentang, Tidak Dicentang, Klik | SelectionChanged |
| Dicentang | SelectedItem, SelectedIndex |
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>
Tip
Untuk mengatur item dalam satu baris horizontal, atur MaxColumns sama dengan jumlah item dalam grup.
Membuat grup RadioButton Anda sendiri
Penting
Sebaiknya gunakan RadioButtons kontrol untuk mengelompokkan RadioButton elemen.
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 RadioButtonsMargin 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.
Catatan
Jika Anda menggunakan kontrol WinUI RadioButtons, penspasian, margin, dan orientasi sudah dioptimalkan.
Mendapatkan kode sampel
- Galeri WinUI: Sampel ini menunjukkan semua kontrol XAML dalam format interaktif.
Topik terkait
Windows developer
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk