The RadioButton control

A 'RadioButton' ( kiválasztó gomb ) segítségével a felhasználó több lehetséges opció közül választhat, de egy időben csak egyet. Gyakorlatilag ugyanezt megvalósíthatod 'ComboBox' ( legördülő kiválasztó menü ) segítségével, és persze kevesebb hely felhasználásával. Viszont a 'RadioButton' egy jobb átláthatóságot biztosít a felhasználó számára a választható opciókról.

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

Annyit kell tennünk, hogy hozzáadunk egy "Label"-t, ami a kérdést tartalmazza, valamint a "RadioButton"-okat, amik pedig a lehetséges válaszokat. Az "IsChecked" tulajdonsággal meghatározunk egy alapértelmezett választ az utolsó gombnál, amit a felhasználó egy másik opcióra kattintva egyszerűen megváltoztathat. Egyúttal ez az a tulajdonság, amivel a kódodban ellenőrizheted, hogy egy rádiogomb ki van-e választva vagy sem.

'RadioButton' csoportok

Ha futtatod a mintapéldát - felül - akkor láthatod, hogy egyszerre csak egy opció lehet kiválasztva egy időben. De mi történik akkor, ha több csoportba szeretnénk rendezni a gombjainkat és mindegyik csoportban külön kezelni őket? Ekkor jön képbe a GroupName tulajdonság, amivel ezt könnyedén megtehetjük. Íme egy példa:

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

Amennyiben a 'GroupName' tulajdonság helyesen be van állítva a gombokon akkor az azonos csoport-névvel rendelkezők 'összerendeződnek' és mindkét csoportunkban külön - külön ki lehet választani opciókat. Enélkül a összes gomb egy csoportként viselkedne és csak egyetlen opciót tudnánk kiválasztani.

Egyedi tartalom

A 'RadioButton' a 'ContentControl' osztályból származik, ami azt jelenti, hogy egyedi tartalmakat is képes megjeleníteni. Amennyiben megadunk egy sima szöveget, amint a fenti példában is csináltuk, akkor a WPF azt 'beburkolja' egy 'TextBlock' vezérlőbe és megjeleníti. Ez persze csak egy egyszerűsítés a dolgok megkönnyítése érdekében. Ugyanis bármilyen típusú vezérlőt használhatunk, mint a következő példánkban:

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

Ránézésre a példa egy kicsit bonyolult, de valójában a koncepció nagyon is egyszerű. Minden 'RadioButton'-hoz rendeltünk egy 'WrapPanel'-t ami egy képet és szöveget tartalmaz ( burkol be ). Mivel a szöveget egy 'TextBlock' vezérlővel jelenítjük meg, most már kedvünk szerint formázhatjuk azt. Ebben a példában megváltoztattuk a szöveg színét, ami segíti a kiválasztást vizuálisan. Valamint egy 'Image' ( kép ) vezérlővel minden opcióhoz hozzárendeltünk egy képet is.

Figyeld meg, hogy a 'RadioButon'-on bárhová lehet bökni, az működni fog ( nem csak a kiválasztó körre, de a szövegre is ), hiszen azt mind a gomb részeként adtuk meg. Abban az esetben ha a szöveget egy különálló panelben adtuk volna meg, csak a kiválasztó körre bökve működne a kiválasztó gombunk ami nem kifejezetten praktikus ( bár néha hasznos lehet ).