Le contrôle RadioButton

Le contrôle RadioButton vous permet de présenter une liste de choix à l'utilisateur, dont un seul est sélectionné à la fois. Vous pouvez obtenir le même résultat, en utilisant moins d'espace, avec le contrôle ComboBox, mais un ensemble de contrôles RadioButton offre à l'utilisateur un meilleur aperçu des options disponibles.

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

Nous ajoutons ici un Label contenant une question, puis trois RadioButton, offrant chacun une réponse possible. Nous définissons un choix par défaut à l'aide de la propriété IsChecked du dernier RadioButton, que l'utilisateur peut modifier en cliquant simplement sur l'un des autres RadioButton. C'est cette même propriété que vous pouvez utiliser dans le Code-behind pour déterminer si un RadioButton est coché ou non.

Grouper les RadioButton

Si vous exécutez l'exemple ci-dessus, vous verrez que comme convenu, un seul des RadioButton ne peut-être sélectionné à la fois. Que ce passe-t-il si vous désirez proposer plusieurs groupes de RadioButton, chacun avec sa propre sélection ? C'est ici qu'intervient la propriété GroupName, qui vous permet d'assigner les RadioButton à un groupe. Voici 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>

Lorsque la propriété GroupName est définie pour chaque RadioButton, une sélection peut-être faite pour chacun des deux groupes. Dans le cas contraire, il ne serait possible de sélectionner qu'un seul des six RadioButton.

Contenu personnalisé

Le RadioButton hérite de la classe ContentControl, ce qui signifie qu'il peut afficher du contenu personnalisé. Si vous spécifiez une simple portion de texte, comme nous l'avons fait dans l'exemple ci-dessus, WPF va ajouter ce texte à un contrôle TextBlock et l'afficher, mais ceci n'est qu'un raccourci pour vous simplifier les choses. Vous pouvez utiliser n'importe quel type de contrôle comme contenu du RadioButton, comme nous allons le voir dans le prochain 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>

Du côté des balises, cet exemple devient un peu lourd, mais le concept est relativement simple. Pour chaque RadioButton, nous avons un WrapPanel contenant une image et une portion de texte.

Notez qu'il est possible de cliquer sur tout le RadioButton, aussi bien sur l'image que sur le texte, pour le cocher, car nous avons spécifié ces éléments comme étant le contenu du RadioButton.