Interrupteur

Parcourir l'exemple

L’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) contrôle Switch est un bouton bascule horizontal permettant à l’utilisateur de changer entre l’état activé et l’état désactivé, représentés par une valeur boolean.

La capture d’écran suivante montre un contrôle Switch dans ses états activés et désactivés :

Le contrôle Switch définit les propriétés suivantes :

• IsToggled est une valeur boolean qui indique si la Switch est activée. La valeur par défaut de cette propriété est false.
• OnColor est un Color qui affecte la façon dont le Switch est rendu dans l'état activé.
• ThumbColor est la Color du pouce de commutateur.

Ces propriétés sont sauvegardées par BindableProperty objets, ce qui signifie qu’elles peuvent être styletées et être la cible de liaisons de données.

Le contrôle Switch définit un événement Toggled déclenché lorsque la propriété IsToggled change, soit via la manipulation de l’utilisateur, soit lorsqu’une application définit la propriété IsToggled. L’objet ToggledEventArgs qui accompagne l’événement Toggled a une propriété unique nommée Value, de type bool. Lorsque l’événement est déclenché, la valeur de la propriété Value reflète la nouvelle valeur de la propriété IsToggled.

Créer un commutateur

On peut instancier un Switch en XAML. Sa propriété IsToggled peut être définie pour activer/désactiver la Switch. Par défaut, la propriété IsToggled est false. L’exemple suivant montre comment instancier un Switch en XAML avec le jeu de propriétés facultatif IsToggled :

<Switch IsToggled="true"/>

Un Switch peut également être créé dans le code :

Switch switchControl = new Switch { IsToggled = true };

Changer l'apparence

Outre les propriétés qui Switch héritent de la classe View, Switch définit également les propriétés OnColor et ThumbColor. La propriété OnColor peut être configurée pour spécifier la couleur Switch lorsqu'elle est activée, et la propriété ThumbColor peut être ajustée pour définir la caractéristique Color du contacteur du commutateur. L’exemple suivant montre comment instancier un Switch en XAML avec ces propriétés définies :

<Switch OnColor="Orange"
        ThumbColor="Green" />

Les propriétés peuvent également être définies lors de la création d’un Switch dans le code :

Switch switch = new Switch { OnColor = Colors.Orange, ThumbColor = Colors.Green };

La capture d’écran suivante montre le Switch dans ses états activés et désactivés, avec les propriétés OnColor et ThumbColor définies :

Répondre à une modification d’état du Switch

Lorsque la propriété IsToggled change, par le biais de la manipulation de l’utilisateur ou lorsqu’une application définit la propriété IsToggled, l’événement Toggled se déclenche. Un gestionnaire d’événements pour cet événement peut être inscrit pour répondre à la modification :

<Switch Toggled="OnToggled" />

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

void OnToggled(object sender, ToggledEventArgs e)
{
    // Perform an action after examining e.Value
}

L’argument sender dans le gestionnaire d’événements est le Switch responsable du déclenchement de cet événement. Vous pouvez utiliser la propriété sender pour accéder à l’objet Switch, ou pour faire la distinction entre plusieurs objets Switch partageant le même gestionnaire d’événements Toggled.

Le gestionnaire d’événements Toggled peut également être affecté dans le code :

Switch switchControl = new Switch {...};
switchControl.Toggled += (sender, e) =>
{
    // Perform an action after examining e.Value
};

Lier un commutateur par liaison de données

Le gestionnaire d’événements Toggled peut être éliminé à l’aide de la liaison de données et des déclencheurs pour réagir aux changements d'état du Switch.

<Switch x:Name="styleSwitch" />
<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 x:DataType='Switch', Source={x:Reference styleSwitch}, Path=IsToggled}"
                     Value="true">
            <Setter Property="FontAttributes"
                    Value="Italic, Bold" />
            <Setter Property="FontSize"
                    Value="18" />
        </DataTrigger>
    </Label.Triggers>
</Label>

Dans cet exemple, l'Label utilise une expression de liaison dans un DataTrigger pour surveiller la propriété IsToggled du Switch nommé styleSwitch. Lorsque cette propriété devient true, les propriétés FontAttributes et FontSize de la Label sont modifiées. Lorsque la propriété IsToggled retourne à false, les propriétés FontAttributes et FontSize du Label sont réinitialisées à leur état initial.

Pour plus d’informations sur les déclencheurs, consultez Triggers.

Changer d’état visuel

Switch a On et Off états visuels qui peuvent être utilisés pour initier une modification visuelle lorsque la propriété IsToggled change.

L’exemple XAML suivant montre comment définir des états visuels pour les états On et Off :

<Switch IsToggled="True">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroupList>
             <VisualStateGroup x:Name="CommonStates">
                 <VisualState x:Name="On">
                     <VisualState.Setters>
                         <Setter Property="ThumbColor"
                             Value="MediumSpringGreen" />
                     </VisualState.Setters>
                 </VisualState>
                 <VisualState x:Name="Off">
                     <VisualState.Setters>
                         <Setter Property="ThumbColor"
                             Value="Red" />
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
        </VisualStateGroupList>
    </VisualStateManager.VisualStateGroups>
</Switch>

Dans cet exemple, l'OnVisualState spécifie que lorsque la propriété IsToggled est true, la propriété ThumbColor est définie sur vert printemps moyen. La OffVisualState spécifie que lorsque la propriété IsToggled est false, la propriété ThumbColor est définie sur rouge. Par conséquent, l'effet global est que lorsque le Switch est en position désactivée, son pouce est rouge, et il est vert printemps moyen lorsque le Switch est en position activée.

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

Désactiver un commutateur

Une application peut entrer dans un état dans lequel le basculement du Switch n’est pas une opération valide. Dans ce cas, le Switch peut être désactivé en définissant sa propriété IsEnabled sur false. Cela empêche les utilisateurs de manipuler le Switch.