Ovládací prvok RadioButton

Ovládací prvok RadioButton vám umožňuje poskytnúť používateľovi zoznam možných možností, pričom iba jedna z nich môže byť vybraná. Rovnaký efekt môžete dosiahnuť pomocou ovládacieho prvku ComboBox s použitím menej miesta, ale sada kontroliek RadioButton dáva užívateľovi lepší prehľad o možnostiach, ktoré sú na výber.

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

Pridali sme Label s otázkou a tri prepínacie tlačidlá, z ktorých každé má možnú odpoveď. Predvolenú voľbu definujeme pomocou vlastnosti IsChecked na poslednom RadioButtone, ktorý môže používateľ jednoducho zmeniť kliknutím na jedno z ďalších prepínačov. Toto je vlastnosť, ktorú by ste mali používať v kóde, aby ste skontrolovali, či je RadioButton označený, alebo nie je.

Skupiny RadioButton

Ak sa pokúsite spustiť vyššie uvedený príklad, uvidíte, že tak ako je určené, môže byť súčasne označený len jeden RadioButton. Ale čo, ak chcete niekoľko skupín prepínačov, každú s vlastným, individuálnym výberom? Nato je vlastnosť GroupName, ktorá vám umožňuje určiť, ktoré prvky RadioButton patria k sebe. Tu je príklad:

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

S nastavením vlastnosti GroupName na každý radio button, môže teraz urobiť výber pre každú z dvoch skupín. Bez toho by bol možný len jeden výber pre všetkých šesť prepínačov.

Vlastný obsah

RadioButton dedí z triedy ContentControl, čo znamená, že môže obsahovať vlastný obsah a zobrazovať ho. Ak zadáte text, ako som to urobil v príklade vyššie, WPF ho umiestni do ovládacieho prvku TextBlock a zobrazí ho, ale je to len skratka, ktorá vám uľahčí prácu. Môžete použiť akýkoľvek typ kontrolky vo vnútri, ako uvidíme v nasledujúcom príklade:

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

Značky pre tento príklad sú trochu ťažšie, ale koncept je dosť jednoduchý. Pre každý RadioButton máme WrapPanel s obrázkom a textom vo vnútri. Keďže teraz vkladáme text do ovládacieho prvku TextBlock, toto nám umožňuje formátovať text akýmkoľvek spôsobom. V tomto príklade som zmenil farbu textu podľa výberu. Kontrolka Image (viac o tom neskôr) sa používa na zobrazenie obrázka pre každú voľbu.

Všimnite si, ako môžete kliknúť kdekoľvek na RadioButton, či už na obrázok, alebo text, aby ste ho označili, pretože sme to špecifikovali ako obsah RádioButtonu. Ak by ste ho umiestnili ako samostatný panel, používateľ by musel kliknúť priamo na kruh RadioButtonu, aby ho aktivoval, čo je menej praktické.