The RadioButton control

El control RadioButton permite dar al usuario una lista de posibles opciones, con solo una de estas seleccionada al mismo tiempo. Se puede obtener el mismo efecto, usando menos espacio, con el control ComboBox, pero un conjunto de RadioButtons le da al usuario una mejor vista de las opciones que tiene.

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

Lo que se hace es agregar un Label con una pregunta y después tres RadioButtons, cada uno de ellos con una posible respuesta. Definimos una opción por defecto usando la propiedad IsChecked en el último RadioButton, esta opción cambiará cuando el usuario lo desee con un simple click sobre uno de los otros RadioButtons. Además, esta es la propiedad que podríamos usar en el código para verificar si un RadioButton fue seleccionado o no.

Grupos de RadioButton

Si intentas correr el ejemplo de abajo, observaras que solo uno de los RadioButon puede ser seleccionado a la vez. ¿Pero que pasa si quieres un grupo de radio buttons y puedan tener cada uno de los grupos una selección individual? Esto es lo que hace la propiedad GroupName que te permite especificar que radio button pertenecen a un grupo. Aquí un ejemplo:

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

Con la propiedad GroupName establecida en cada uno de los radio buttons, ahora se puede hacer una selección para cada uno de los dos grupos. Sin esto, solo sería posible una selección para los seis radio buttons.

Contenido personalizado

RadioButton hereda de la clase ContentControl, lo que significa que puede tomar contenido personalizado y mostrarlo junto a él. Si solo especifica un fragmento de texto, como lo hice en el ejemplo anterior, WPF lo colocará dentro de un control TextBlock y lo mostrará, pero esto es solo un atajo para facilitarnos las cosas. Puedes usar cualquier tipo de control dentro de él, como veremos en el siguiente ejemplo:

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

En cuanto a las marcas, este ejemplo se vuelve un poco pesado, pero el concepto es bastante simple. Para cada RadioButton, tenemos un WrapPanel con una imagen y una pieza de texto dentro de ella. Ya que ahora tomamos el control del texto usando un control TextBlock, esto también nos permite formatear el texto de la manera que queramos. Para este ejemplo, he cambiado el color del texto para que coincida con la elección. Se utiliza un control de imagen (lea más sobre ellos más adelante) para mostrar una imagen para cada opción.

Observe cómo puede hacer clic en cualquier lugar de RadioButton, incluso en la imagen o el texto, para alternar entre ellos, porque lo hemos especificado como contenido de RadioButton. Si lo hubiera colocado como un panel separado, al lado del RadioButton, el usuario tendría que hacer clic directamente en el círculo redondo de RadioButton para activarlo, lo cual es menos práctico.