TOC

This article is currently in the process of being translated into Hungarian (~99% done).

Alap vezérlők:

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>

Annyi a dolgunk, hogy felteszünk egy 'Label'-t ( címkét ) ami a kérdést tartalmazza és 'RadioButton'-okat amik a lehetséges válaszokat. Az utolsó gombnál beállítottuk, hogy legyen alapértelmezett az 'IsChecked' tulajdonsággal, amit a felhasználó természetesen bármikor felülbírálhat ha kiválaszt egy másik opciót. Ez az a tulajdonság amivel a mögöttes forráskódból ( Code-behind ) meg tudod állapítani, hogy az adott gomb 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 ).

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!