CheckBox

Parcourir l'exemple

.NET Multi-Platform App UI .NET MAUI CheckBox est un type de bouton pouvant être coché ou vide. Lorsqu’une case est cochée, elle est considérée comme activée. Lorsqu’une case est vide, elle est considérée comme désactivée.

CheckBox définit les propriétés suivantes :

• IsChecked, de type bool, qui définit si le bouton CheckBox est activé. Cette propriété a un mode de liaison par défaut de TwoWay.
• Color, de type Color, indique la couleur du CheckBox.

Ces propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être les cibles de liaisons de données et mises en forme.

CheckBox définit un événement CheckedChanged qui est déclenché lorsque la propriété IsChecked change à la suite d’une manipulation de l’utilisateur ou quand une application définit la propriété IsChecked. L’objet CheckedChangedEventArgs qui accompagne l’événement CheckedChanged a une propriété unique nommée Value, de type bool. Quand l’événement est déclenché, la valeur de la propriété Value est définie sur la nouvelle valeur de la propriété IsChecked.

Créer une CheckBox

L'exemple suivant montre comment instancier une CheckBox dans XAML :

<CheckBox />

Ce code XAML génère l’apparence que vous pouvez voir dans la capture d’écran suivante :

Par défaut, la CheckBox est vide. La CheckBox peut être activée par manipulation de l’utilisateur ou en définissant la pro IsChecked sur true :

<CheckBox IsChecked="true" />

Ce code XAML génère l’apparence que vous pouvez voir dans la capture d’écran suivante :

Vous pouvez également créer une CheckBox en code :

CheckBox checkBox = new CheckBox { IsChecked = true };

Répondre à une modification d’état de CheckBox

Quand la propriété IsChecked change, via la manipulation d’un utilisateur ou quand une application définit la propriété IsChecked, l’événement CheckedChanged se déclenche. Vous pouvez inscrire un gestionnaire d’événements pour cet événement afin de répondre au changement :

<CheckBox CheckedChanged="OnCheckBoxCheckedChanged" />

Le fichier code-behind contient le gestionnaire de l’événement CheckedChanged :

void OnCheckBoxCheckedChanged(object sender, CheckedChangedEventArgs e)
{
    // Perform required operation after examining e.Value
}

L’argument sender est le CheckBox responsable de cet événement. Vous pouvez l’utiliser pour accéder à l’objet CheckBox ou pour faire la distinction entre plusieurs objets CheckBox qui partagent le même gestionnaire d’événements CheckedChanged.

Vous pouvez également inscrire un gestionnaire d’événements pour l’événement CheckedChanged en code :

CheckBox checkBox = new CheckBox { ... };
checkBox.CheckedChanged += (sender, e) =>
{
    // Perform required operation after examining e.Value
};

Liaison de données d’une CheckBox

Le gestionnaire d’événements CheckedChanged peut être éliminé en utilisant une liaison de données et se déclenche pour répondre à une CheckBox activée ou vide :

<CheckBox x:Name="checkBox" />
<Label Text="Lorem ipsum dolor sit amet, elit rutrum, enim hendrerit augue vitae praesent sed non, lorem aenean quis praesent pede.">
    <Label.Triggers>
        <DataTrigger TargetType="Label"
                     Binding="{Binding Source={x:Reference checkBox}, Path=IsChecked}"
                     Value="true">
            <Setter Property="FontAttributes"
                    Value="Italic, Bold" />
            <Setter Property="FontSize"
                    Value="18" />
        </DataTrigger>
    </Label.Triggers>
</Label>

Dans cet exemple, l’élément Label utilise une expression de liaison dans un déclencheur de données pour monitorer la propriété IsChecked de la CheckBox. Lorsque cette propriété devient true, les propriétés FontAttributes et FontSize de l’élément Label changent. Lorsque la valeur de la propriété IsChecked revient à false, l’état initial des propriétésFontAttributes et FontSize de l’élément Label est rétabli.

La capture d’écran suivante montre la mise en forme de Label lorsque la CheckBox est activée :

Pour obtenir plus d'informations sur les déclencheurs, consultez Déclencheurs.

Désactiver une CheckBox

Parfois, une application entre dans un état dans lequel l’activation d’une CheckBox n’est pas une opération valide. Dans ce cas, vous pouvez désactiver le CheckBox en définissant sa propriété IsEnabled sur false.

Apparence de CheckBox

Outre les propriétés dont CheckBox hérite de la classe View, CheckBox définit également une propriété Color qui définit sa couleur sur une Color :

<CheckBox Color="Red" />

La capture d’écran suivante montre une série d’objets CheckBox activés dans laquelle chaque objet a sa propriété Color définie sur une Color différente :

États visuels de CheckBox

CheckBox a un élément IsCheckedVisualState qui peut être utilisé pour initier une modification visuelle à la CheckBox moment où elle est activée.

L’exemple XAML suivant montre comment définir un état visuel pour l’état IsChecked :

<CheckBox ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="Color"
                                Value="Red" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="IsChecked">
                    <VisualState.Setters>
                        <Setter Property="Color"
                                Value="Green" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </VisualStateManager.VisualStateGroups>
</CheckBox>

Dans cet exemple, l’élément IsChecked VisualState spécifie que lorsqu’une CheckBox est activée, sa propriété Color est définie sur la couleur verte. L’élément Normal VisualState spécifie que lorsque la CheckBox est dans un état normal, sa propriété Color est définie sur la couleur rouge. Par conséquent, l’effet global est que la CheckBox est de couleur rouge lorsqu’elle est vide et verte lorsqu’elle est activée.

Pour plus d’informations sur les états visuels, consultez États visuels.