The RadioButton control

Kontrol RadioButton digunakan untuk memberikan list beberapa pilihan yang bisa dipilih oleh user, dimana yang boleh dipilih hanya satu diwaktu yang bersamaan. Anda bisa juga menggunakan kontrol ComboBox, karena ComboBox juga memiliki fungsi yang sama. Namun dari segi tampilan, RadioButton memberikan tampilan yang lebih baik.

<Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RadioButtonSample" Height="150" Width="250">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Are you ready?</Label>
		<RadioButton>Yes</RadioButton>
		<RadioButton>No</RadioButton>
		<RadioButton IsChecked="True">Maybe</RadioButton>
	</StackPanel>
</Window>

Tambahkan kontrol label dengan sebuah pertanyaa, kemudian tambahkan 3 RadioButton. Kita akan menentukan pilihan standar dari RadioButton dengan menggunakan properti IsChecked pada RadioButton, User bisa merubah pilihan dengan sederhana, yaitu dengan klik salah satu RadioButton. Properti IsChecked juga digunakan dari Code-Behind untuk memeriksa apakah RadioButton dicentang atau tidak.

Pengelompokkan RadioButton

Apabila Anda sudah mencoba menjalankan contoh diatas, Anda akan melihat bahwa hanya satu RadioButton yang bisa dicentang diwaktu yang bersamaan. Namun jika anda ingin mengelompokkan beberapa RadioButton, dimana masing-masing kelompok dapat memilih salah satu? ini yang disebut sebagai properti GroupName , yang memperbolehkan anda untuk menentukan kelompok RadioButton yang ingin dicentang. Berikut contohnya :

<Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RadioButtonSample" Height="230" Width="250">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Are you ready?</Label>
		<RadioButton GroupName="ready">Yes</RadioButton>
		<RadioButton GroupName="ready">No</RadioButton>
		<RadioButton GroupName="ready" IsChecked="True">Maybe</RadioButton>

		<Label FontWeight="Bold">Male or female?</Label>
		<RadioButton GroupName="sex">Male</RadioButton>
		<RadioButton GroupName="sex">Female</RadioButton>
		<RadioButton GroupName="sex" IsChecked="True">Not sure</RadioButton>
	</StackPanel>
</Window>

Dengan menentukan properti GroupName disetiap RadioButton, seleksi bisa dibuat untuk setiap dua kelompok. Tanpa menentukan properti ini, hanya akan boleh memilih satu dari semua RadioButton yang bisa dipilih

Custom content

RadioButton merupakan turunan dari kelas ContentControl, yang berarti RadioButton bisa di kostumisasi dan ditampilkan disebelahnya. Jika anda menentukan teks, seperti contoh diatas, WPF akan meletakkannya didalam kontrol TextBlok dan menampilkannya, namun ini hanya sebuah shortcut untuk lebih mudahnya. Kamu bisa menggunakan jenis kontrol ini, seperti yang dilihat pada contoh berikut :

<Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonCustomContentSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RadioButtonCustomContentSample" Height="150" Width="250">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Are you ready?</Label>
		<RadioButton>
			<WrapPanel>
				<Image Source="/WpfTutorialSamples;component/Images/accept.png" Width="16" Height="16" Margin="0,0,5,0" />
				<TextBlock Text="Yes" Foreground="Green" />
			</WrapPanel>
		</RadioButton>
		<RadioButton Margin="0,5">
			<WrapPanel>
				<Image Source="/WpfTutorialSamples;component/Images/cancel.png" Width="16" Height="16" Margin="0,0,5,0" />
				<TextBlock Text="No" Foreground="Red" />
			</WrapPanel>
		</RadioButton>
		<RadioButton IsChecked="True">
			<WrapPanel>
				<Image Source="/WpfTutorialSamples;component/Images/question.png" Width="16" Height="16" Margin="0,0,5,0" />
				<TextBlock Text="Maybe" Foreground="Gray" />
			</WrapPanel>
		</RadioButton>
	</StackPanel>
</Window>

Markup-wise, contoh ini sedikit lebih sulit, namun konsepnya sederhana. Untuk setiap RadioButton, kita menggunakan WrapPanel dengan sebuah gambar dan teks didalamnya. Namun, saat ini kita menggunakan kontrol teks menggunakan TextBlock, untuk memperbolehkan kita memformat teks yang diinginkan. Untuk contoh ini, Saya telah merubah warna teks yang sesuai dengan pilihan. Kontrol gambar (baca lebih lengkap selanjutnya) digunakan untuk menampilkan gambar untuk setiap pilihan.

Perhatikan bagaimana anda bisa klik dimana saja pada RadioButton, bahkan pada gambar atau teks, karena kita telah menentukan bahwa gambar dan teks merupakan bagian konten dari RadioButton. Jika kamu meletakkan nya di panel yang berbeda, disebelah RadioButotn, User harus klik di lingkaran RadioButton untuk mengaktifkan RadioButtonnya.