Cases à cocher
Une case à cocher permet de sélectionner ou de désélectionner des éléments d’action. Elle peut être utilisée pour un élément unique ou pour une liste de plusieurs éléments parmi lesquels l’utilisateur peut en choisir quelques-uns. Le contrôle possède trois états de sélection : l’état désélectionné, l’état sélectionné et l’état indéterminé. Sélectionnez l’état indéterminé lorsqu’une collection de sous-choix possède des états désélectionné et sélectionné.
Est-ce le contrôle approprié ?
Utilisez une seule zone de case activée pour un choix binaire oui/non, par exemple avec un scénario de connexion « Se souvenir de moi ? » ou avec un contrat de conditions d’utilisation.
Dans le cas d’un choix binaire, la seule différence entre une case à cocher et un bouton bascule est que le premier désigne un état, tandis que le deuxième indique une action. Vous pouvez retarder la validation d’une opération de case à cocher (par exemple, dans le cadre de l’envoi d’un formulaire) alors que l’utilisation d’un bouton bascule nécessite une action immédiate de votre part. Seules les cases à cocher autorisent une sélection multiple.
Utilisez plusieurs cases à cocher pour les scénarios à sélection multiple dans lesquels un utilisateur choisit un ou plusieurs éléments à partir d’un groupe d’options qui ne s’excluent pas mutuellement.
Créez un groupe de cases à cocher quand les utilisateurs peuvent choisir une combinaison quelconque d’options.
Lorsque les options peuvent être regroupées, vous pouvez utiliser une case à cocher indéterminée pour représenter le groupe entier. Utilisez l’état indéterminé de la case à cocher quand un utilisateur sélectionne une partie, et non l’ensemble, des éléments dans le groupe.
Les deux contrôles case à cocher et case d’option permettent à l’utilisateur d’effectuer un choix dans une liste d’options. Les cases à cocher permettent à l’utilisateur de sélectionner une combinaison quelconque d’options. En revanche, les cases d’option permettent à l’utilisateur d’effectuer un choix unique à partir d’options qui s’excluent mutuellement. Lorsque plusieurs options sont disponibles mais qu’une seule peut être choisie, utilisez une case d’option à la place.
Recommandations
Assurez-vous que le but et l’état actuel de la case à cocher sont clairs.
Limitez le texte de la case à cocher à deux lignes.
Formulez le libellé de la case à cocher comme une instruction indiquant que la présence d’une coche correspond à une activation, et qu’à l’inverse, l’absence d’une coche correspond à une désactivation.
Utilisez la police par défaut à moins que vos instructions de personnalisation imposent d’en utiliser une autre.
Si le contenu du texte est dynamique, songez au redimensionnement du contrôle et à ses conséquences sur les effets visuels environnants.
Si vous avez le choix entre plusieurs options mutuellement exclusives, pensez à utiliser des cases d’option.
Ne placez pas deux groupes de cases à cocher en regard l’un de l’autre. Utilisez des étiquettes de groupe pour les distinguer.
N’utilisez pas de zone de case activée comme contrôle activé/désactivé ou pour exécuter une commande ; utilisez plutôt un commutateur bascule.
N’utilisez pas de case à cocher pour afficher d’autres contrôles, tels qu’une boîte de dialogue.
Utilisez l’état indéterminé pour signaler qu’une option est définie pour une poignée de sous-choix, mais pas pour tous.
Si vous avez recours à l’état indéterminé, utilisez des cases à cocher subordonnées pour indiquer les options sélectionnées et celles qui ne le sont pas. Concevez l’interface utilisateur afin que l’utilisateur puisse voir les sous-choix.
N’utilisez pas l’état indéterminé pour désigner un troisième état. L’état indéterminé sert à indiquer qu’une option est définie pour une poignée de sous-choix et non la totalité. N’autorisez donc pas les utilisateurs à définir directement un état indéterminé. Parfait exemple à ne pas suivre, la case à cocher qui suit utilise l’état indéterminé pour indiquer un goût moyennement épicé :
Utilisez plutôt un groupe de cases d’option qui a trois options.
UWP et WinUI 2
Important
Les informations et les exemples de cet article sont optimisés pour les applications qui utilisent le SDK d'application Windows et WinUI 3, mais qui s’appliquent généralement aux applications UWP qui utilisent WinUI 2. Consultez la référence API de la plateforme Windows universelle pour obtenir des informations et des exemples spécifiques à la plateforme.
Cette section contient les informations dont vous avez besoin pour utiliser le contrôle dans une application de la plateforme Windows universelle ou de WinUI 2.
Les API de ce contrôle existent dans l’espace de noms Windows.UI.Xaml.Controls .
- API UWP :classe CheckBox, événement Checked, propriété IsChecked, propriété Content
- Ouvrez l’application WinUI 2 Gallery et voyez checkBox en action. L’application WinUI 2 Gallery comprend des exemples interactifs de la plupart des contrôles et fonctionnalités WinUI 2. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.
Nous vous recommandons d’utiliser la dernière version de WinUI 2 pour obtenir les styles et modèles les plus récents pour tous les contrôles. WinUI 2.2 ou version ultérieure inclut un nouveau modèle pour ce contrôle qui utilise des coins arrondis. Pour plus d’informations, consultez Rayons des angles.
Créer une case à cocher
- API importantes : classe CheckBox, événement Checked, propriété IsChecked, propriété Content
L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.
Créer une zone de case activée simple
Pour attribuer une étiquette à la case à cocher, définissez la propriété Content. L’étiquette s’affiche en regard de la case à cocher.
Ce code XAML crée une case à cocher unique qui sert à accepter les conditions d’utilisation avant l’envoi d’un formulaire.
<CheckBox x:Name="termsOfServiceCheckBox"
Content="I agree to the terms of service."/>
Voici la même case à cocher sous forme de code.
CheckBox termsOfServiceCheckBox = new CheckBox();
termsOfServiceCheckBox.Content = "I agree to the terms of service.";
Lier à IsChecked
Utilisez la propriété IsChecked pour déterminer si la case à cocher est activée ou désactivée. Vous pouvez lier la valeur de la propriété IsChecked à une autre valeur binaire. Toutefois, IsChecked étant une valeur booléenne Nullable, vous devez utiliser un cast ou un convertisseur de valeur pour la lier à une propriété booléenne. Cela dépend du type de liaison réel que vous utilisez ; vous trouverez des exemples ci-dessous pour chaque type possible.
Dans cet exemple, la propriété IsChecked de la case à cocher pour accepter les conditions d’utilisation est liée à la propriété IsEnabled du bouton Envoyer. Le bouton Envoyer est activé uniquement si l’utilisateur accepte les conditions d’utilisation.
Utilisation de x:Bind
Notes
Nous n’affichons ici que le code approprié. Pour plus d’informations sur la liaison de données, consultez Vue d’ensemble de la liaison de données. Les informations {x:Bind} spécifiques (telles que la conversion) sont détaillées dans l’extension de balisage {x:Bind}.
<StackPanel Grid.Column="2" Margin="40">
<CheckBox x:Name="termsOfServiceCheckBox" Content="I agree to the terms of service."/>
<Button Content="Submit"
IsEnabled="{x:Bind (x:Boolean)termsOfServiceCheckBox.IsChecked, Mode=OneWay}"/>
</StackPanel>
Si la case à cocher peut également être dans l’état indéterminé, nous utilisons la propriété FallbackValue de la liaison pour spécifier la valeur booléenne représentant cet état. Dans ce cas, nous ne souhaitons pas que le bouton Envoyer soit également activé :
<Button Content="Submit"
IsEnabled="{x:Bind (x:Boolean)termsOfServiceCheckBox.IsChecked, Mode=OneWay, FallbackValue=False}"/>
Utilisation de x:Bind ou Binding
Notes
Nous affichons uniquement le code approprié ici à l’aide de {x:Bind}. Dans l’exemple {Binding}, nous remplacerions {x:Bind} par {Binding}. Pour plus d’informations sur la liaison de données, les convertisseurs de valeurs et les différences entre les extensions de balisage {x:Bind} et {Binding}, consultez Vue d’ensemble de la liaison de données.
...
<Page.Resources>
<local:NullableBooleanToBooleanConverter x:Key="NullableBooleanToBooleanConverter"/>
</Page.Resources>
...
<StackPanel Grid.Column="2" Margin="40">
<CheckBox x:Name="termsOfServiceCheckBox" Content="I agree to the terms of service."/>
<Button Content="Submit"
IsEnabled="{x:Bind termsOfServiceCheckBox.IsChecked,
Converter={StaticResource NullableBooleanToBooleanConverter}, Mode=OneWay}"/>
</StackPanel>
public class NullableBooleanToBooleanConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value is bool?)
{
return (bool)value;
}
return false;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
if (value is bool)
return (bool)value;
return false;
}
}
Gérer les événements Click et Checked
Pour effectuer une action lorsque l’état de la case à cocher change, vous pouvez gérer soit l’événement Click, soit les événements Checked et Unchecked.
Les événements Click se produisent chaque fois que l’état d’activation change. Si vous gérez l’événement Click, utilisez la propriété IsChecked pour déterminer l’état de la case à cocher.
Les événements Checked et Unchecked se produisent de manière indépendante. Si vous gérez ces événements, vous devez gérer les deux pour répondre aux changements d’état de la case à cocher.
Les exemples suivants vous présentent la gestion de l’événement Click et des événements Checked et Unchecked.
Plusieurs cases à cocher peuvent partager le même gestionnaire d’événements. Cet exemple crée quatre cases à cocher pour la sélection des ingrédients de garniture d’une pizza. Les quatre cases à cocher partagent le même gestionnaire d’événements Click pour mettre à jour la liste des ingrédients sélectionnés.
<StackPanel Margin="40">
<TextBlock Text="Pizza Toppings"/>
<CheckBox Content="Pepperoni" x:Name="pepperoniCheckbox"
Click="toppingsCheckbox_Click"/>
<CheckBox Content="Beef" x:Name="beefCheckbox"
Click="toppingsCheckbox_Click"/>
<CheckBox Content="Mushrooms" x:Name="mushroomsCheckbox"
Click="toppingsCheckbox_Click"/>
<CheckBox Content="Onions" x:Name="onionsCheckbox"
Click="toppingsCheckbox_Click"/>
<!-- Display the selected toppings. -->
<TextBlock Text="Toppings selected:"/>
<TextBlock x:Name="toppingsList"/>
</StackPanel>
Voici le gestionnaire d’événements pour l’événement Click. Chaque fois qu’une case à cocher est cochée, elle examine les cases à cocher pour voir celles qui sont cochées et met à jour la liste des garnitures sélectionnées.
private void toppingsCheckbox_Click(object sender, RoutedEventArgs e)
{
string selectedToppingsText = string.Empty;
CheckBox[] checkboxes = new CheckBox[] { pepperoniCheckbox, beefCheckbox,
mushroomsCheckbox, onionsCheckbox };
foreach (CheckBox c in checkboxes)
{
if (c.IsChecked == true)
{
if (selectedToppingsText.Length > 1)
{
selectedToppingsText += ", ";
}
selectedToppingsText += c.Content;
}
}
toppingsList.Text = selectedToppingsText;
}
Utiliser l’état indéterminé
Le contrôle CheckBox hérite de ToggleButton et peut avoir trois états :
| État | Propriété | Value |
|---|---|---|
| checked | IsChecked | true |
| unchecked | IsChecked | false |
| indeterminate | IsChecked | null |
Pour que la case à cocher indique l’état indéterminé, vous devez définir la propriété IsThreeState sur true.
Lorsque les options peuvent être regroupées, vous pouvez utiliser une case à cocher indéterminée pour représenter le groupe entier. Utilisez l’état indéterminé de la case à cocher quand un utilisateur sélectionne une partie, et non l’ensemble, des éléments dans le groupe.
Dans l’exemple suivant, la propriété IsThreeState de la case à cocher « Select all » est définie sur true. La case à cocher « Select all » est sélectionnée si tous les éléments enfants sont sélectionnés ; si tous les éléments enfants sont désélectionnés, la case à cocher l’est également. Sinon, la case à cocher reste indéterminée.
<StackPanel>
<CheckBox x:Name="OptionsAllCheckBox" Content="Select all" IsThreeState="True"
Checked="SelectAll_Checked" Unchecked="SelectAll_Unchecked"
Indeterminate="SelectAll_Indeterminate"/>
<CheckBox x:Name="Option1CheckBox" Content="Option 1" Margin="24,0,0,0"
Checked="Option_Checked" Unchecked="Option_Unchecked" />
<CheckBox x:Name="Option2CheckBox" Content="Option 2" Margin="24,0,0,0"
Checked="Option_Checked" Unchecked="Option_Unchecked" IsChecked="True"/>
<CheckBox x:Name="Option3CheckBox" Content="Option 3" Margin="24,0,0,0"
Checked="Option_Checked" Unchecked="Option_Unchecked" />
</StackPanel>
private void Option_Checked(object sender, RoutedEventArgs e)
{
SetCheckedState();
}
private void Option_Unchecked(object sender, RoutedEventArgs e)
{
SetCheckedState();
}
private void SelectAll_Checked(object sender, RoutedEventArgs e)
{
Option1CheckBox.IsChecked = Option2CheckBox.IsChecked = Option3CheckBox.IsChecked = true;
}
private void SelectAll_Unchecked(object sender, RoutedEventArgs e)
{
Option1CheckBox.IsChecked = Option2CheckBox.IsChecked = Option3CheckBox.IsChecked = false;
}
private void SelectAll_Indeterminate(object sender, RoutedEventArgs e)
{
// If the SelectAll box is checked (all options are selected),
// clicking the box will change it to its indeterminate state.
// Instead, we want to uncheck all the boxes,
// so we do this programatically. The indeterminate state should
// only be set programatically, not by the user.
if (Option1CheckBox.IsChecked == true &&
Option2CheckBox.IsChecked == true &&
Option3CheckBox.IsChecked == true)
{
// This will cause SelectAll_Unchecked to be executed, so
// we don't need to uncheck the other boxes here.
OptionsAllCheckBox.IsChecked = false;
}
}
private void SetCheckedState()
{
// Controls are null the first time this is called, so we just
// need to perform a null check on any one of the controls.
if (Option1CheckBox != null)
{
if (Option1CheckBox.IsChecked == true &&
Option2CheckBox.IsChecked == true &&
Option3CheckBox.IsChecked == true)
{
OptionsAllCheckBox.IsChecked = true;
}
else if (Option1CheckBox.IsChecked == false &&
Option2CheckBox.IsChecked == false &&
Option3CheckBox.IsChecked == false)
{
OptionsAllCheckBox.IsChecked = false;
}
else
{
// Set third state (indeterminate) by setting IsChecked to null.
OptionsAllCheckBox.IsChecked = null;
}
}
}
Obtenir l’exemple de code
- Exemple de galerie WinUI : affichez tous les contrôles XAML dans un format interactif.
Articles connexes
Windows developer
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour