Le contrôle CheckBox

Le contrôle CheckBox permet à l'utilisateur final d'activer ou de désactiver une option, reflétant généralement une valeur booléenne dans le Code-behind. Passons directement à un exemple, au cas où vous n'êtes pas sûr de l'apparence d'une CheckBox :

<Window x:Class="WpfTutorialSamples.Basic_controls.CheckBoxSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CheckBoxSample" Height="140" Width="250">
    <StackPanel Margin="10">
		<Label FontWeight="Bold">Application Options</Label>
		<CheckBox>Enable feature ABC</CheckBox>
		<CheckBox IsChecked="True">Enable feature XYZ</CheckBox>
		<CheckBox>Enable feature WWW</CheckBox>
	</StackPanel>
</Window>

Comme vous pouvez le constater, la CheckBox est très facile à utiliser. Sur la deuxième CheckBox, j'utilise la propriété IsChecked pour que celle-ci soit cochée par défaut, mais à part cela, aucune propriété n'est nécessaire pour l'utiliser. La propriété IsChecked peut aussi être utilisée à partir de Code-behind si vous voulez vérifier qu'une CheckBox est cochée ou non.

Contenu personnalisé

Le contrôle CheckBox hérite de la classe ContentControl, ce qui signifie qu'il peut prendre du contenu personnalisé et l'afficher à côté. Si vous spécifiez un texte, comme je l'ai fait dans l'exemple ci-dessus, WPF le placera dans un contrôle TextBlock et l'affichera, mais ce n'est qu'un raccourci pour vous faciliter la tâche. Vous pouvez utiliser n'importe quel type de contrôle à l'intérieur, comme nous le verrons dans l'exemple suivant :

<Window x:Class="WpfTutorialSamples.Basic_controls.CheckBoxSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CheckBoxSample" Height="140" Width="250">
    <StackPanel Margin="10">
		<Label FontWeight="Bold">Application Options</Label>
		<CheckBox>
			<TextBlock>
				Enable feature <Run Foreground="Green" FontWeight="Bold">ABC</Run>
			</TextBlock>
		</CheckBox>
		<CheckBox IsChecked="True">
			<WrapPanel>
				<TextBlock>
					Enable feature <Run FontWeight="Bold">XYZ</Run>
				</TextBlock>
				<Image Source="/WpfTutorialSamples;component/Images/question.png" Width="16" Height="16" Margin="5,0" />
			</WrapPanel>
		</CheckBox>
		<CheckBox>
			<TextBlock>
				Enable feature <Run Foreground="Blue" TextDecorations="Underline" FontWeight="Bold">WWW</Run>
			</TextBlock>
		</CheckBox>
	</StackPanel>
</Window>

Comme vous pouvez le voir à partir du balisage de l'échantillon, vous pouvez faire à peu près tout ce que vous voulez avec le contenu. Sur les trois cases à cocher, je fais quelque chose de différent avec le texte, et sur la case du milieu, j'ajoute même un contrôle d'image. En spécifiant un contrôle comme contenu, au lieu d'un simple texte, nous obtenons un meilleur contrôle de l'apparence, et ce qui est cool, c'est que quelle que soit la partie du contenu sur laquelle vous cliquez, il activera la CheckBox ou non.

La propriété IsThreeState

Comme mentionné, le CheckBox correspond généralement à une valeur booléenne, ce qui signifie qu'il n'a que deux états : true ou false (on ou off). Cependant, puisqu'un type de données booléen peut être nulle, ce qui permet une troisième option (true, false ou null), le contrôle CheckBox peut aussi supporter ce cas. En réglant la propriété IsThreeState sur true, la case à cocher obtiendra un troisième état appelé "l'état indéterminé".

Un usage courant pour cela est d'avoir une case à cocher "Tout activer", qui peut contrôler un ensemble de cases à cocher enfant, ainsi que montrer leur état collectif. Notre exemple montre comment vous pouvez créer une liste de fonctions qui peuvent être activées et désactivées, avec une case à cocher commune "Tout activer" située en haut :

<Window x:Class="WpfTutorialSamples.Basic_controls.CheckBoxThreeStateSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CheckBoxThreeStateSample" Height="170" Width="300">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Application Options</Label>
		<StackPanel Margin="10,5">
			<CheckBox IsThreeState="True" Name="cbAllFeatures" Checked="cbAllFeatures_CheckedChanged" Unchecked="cbAllFeatures_CheckedChanged">Enable all</CheckBox>
			<StackPanel Margin="20,5">
				<CheckBox Name="cbFeatureAbc" Checked="cbFeature_CheckedChanged" Unchecked="cbFeature_CheckedChanged">Enable feature ABC</CheckBox>
				<CheckBox Name="cbFeatureXyz" IsChecked="True" Checked="cbFeature_CheckedChanged" Unchecked="cbFeature_CheckedChanged">Enable feature XYZ</CheckBox>
				<CheckBox Name="cbFeatureWww" Checked="cbFeature_CheckedChanged" Unchecked="cbFeature_CheckedChanged">Enable feature WWW</CheckBox>
			</StackPanel>
		</StackPanel>
	</StackPanel>
</Window>

using System;
using System.Windows;

namespace WpfTutorialSamples.Basic_controls
{
	public partial class CheckBoxThreeStateSample : Window
	{
		public CheckBoxThreeStateSample()
		{
			InitializeComponent();
		}


		private void cbAllFeatures_CheckedChanged(object sender, RoutedEventArgs e)
		{
			bool newVal = (cbAllFeatures.IsChecked == true);
			cbFeatureAbc.IsChecked = newVal;
			cbFeatureXyz.IsChecked = newVal;
			cbFeatureWww.IsChecked = newVal;
		}

		private void cbFeature_CheckedChanged(object sender, RoutedEventArgs e)
		{
			cbAllFeatures.IsChecked = null;
			if((cbFeatureAbc.IsChecked == true) && (cbFeatureXyz.IsChecked == true) && (cbFeatureWww.IsChecked == true))
				cbAllFeatures.IsChecked = true;
			if((cbFeatureAbc.IsChecked == false) && (cbFeatureXyz.IsChecked == false) && (cbFeatureWww.IsChecked == false))
				cbAllFeatures.IsChecked = false;
		}

	}
}

Cet exemple fonctionne sous deux angles différents : si vous cochez ou décochez la case à cocher "Tout activer", alors toutes les cases à cocher enfant, chacune représentant une fonction de l'application dans notre exemple, sont cochées ou décochées. Il fonctionne également dans l'autre sens, où le fait de cocher ou décocher une case à cocher enfant affecte l'état "Tout activer" : S'ils sont tous cochés ou non cochés, alors la case à cocher "Tout activer" prend le même état - sinon la valeur sera laissée avec un null, ce qui place la case à cocher dans l'état indéterminé.

Tout ce comportement peut être vu sur les captures d'écran ci-dessus, et est obtenu en souscrivant aux événements Checked et Unchecked des contrôles CheckBox. Dans un exemple réel, vous lierez probablement les valeurs à la place, mais cet exemple montre les bases de l'utilisation de la propriété IsThreeState pour créer un effet "Tout basculer".