El control RadioButton

El control RadioButton permet donar a l'usuari una llista de possibles opcions, amb només una d'aquestes seleccionada al mateix temps. Es pot obtenir el mateix efecte, usant menys espai, amb el control ComboBox, però un conjunt de RadioButtons li dóna a l'usuari una millor vista de les opcions que té.

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

El que es fa és agregar un Label amb una pregunta i després tres RadioButtons, cadascun d'ells amb una possible resposta. Definim una opció per defecte usant la propietat IsChecked en l'últim RadioButton, aquesta opció canviarà quan l'usuari ho desitgi amb un simple clic sobre un dels altres RadioButtons. A més, aquesta és la propietat que podríem usar en el codi per a verificar si un RadioButton està seleccionat o no.

Grups de RadioButton

Si intentes executar l'exemple de baix, observessis que només un dels RadioButon pot ser seleccionat alhora. Però que passa si vols un grup de Radio Buttons i puguin tenir cadascun dels grups una selecció individual? Això és el que fa la propietat GroupName que et permet especificar quins Radio Buttons pertanyen a un grup. Aquí hi ha un exemple:

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

Amb la propietat GroupName establerta en cadascun dels radio buttons, ara es pot fer una selecció per a cadascun dels dos grups. Sense això, només seria possible una selecció per als sis Radio Buttons.

Contingut personalitzat

RadioButton hereta de la classe ContentControl, la qual cosa significa que pot prendre contingut personalitzat i mostrar-ho al costat d'ell. Si només especifica un fragment de text, com el vaig fer en l'exemple anterior, WPF el col·locarà dins d'un control TextBlock i el mostrarà, però això és només una drecera per a facilitar-nos les coses. Pots usar qualsevol tipus de control dins d'ell, com veurem en el següent exemple:

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

Quant a les marques, aquest exemple es torna una mica pesat, però el concepte és bastant simple. Per a cada RadioButton, tenim un WrapPanel amb una imatge i una peça de text dins d'ella. Ja que ara prenem el control del text usant un control TextBlock, això també ens permet formatar el text de la manera que vulguem. Per a aquest exemple, he canviat el color del text perquè coincideixi amb l'elecció. S'utilitza un control d'imatge (llegeixi més sobre ells més endavant) per a mostrar una imatge per a cada opció.

Observi com pot fer clic en qualsevol lloc de RadioButton, fins i tot en la imatge o el text, per a alternar entre ells, perquè l'hem especificat com a contingut de RadioButton. Si ho hagués col·locat com un panell separat, al costat del RadioButton, l'usuari hauria de fer clic directament en el cercle rodó de RadioButton per a activar-lo, la qual cosa és menys pràctic.