Boutons bascule

Le bouton bascule représente un commutateur physique qui permet à l’utilisateur d’activer ou de désactiver des options. Utilisez les contrôles de bouton bascule pour présenter aux utilisateurs deux options qui s’excluent mutuellement (comme activé/désactivé), de sorte que la sélection d’une option produise immédiatement un résultat.

Pour créer un contrôle de bouton bascule, utilisez la classe ToggleSwitch.

Est-ce le contrôle approprié ?

Utilisez un commutateur bascule pour les opérations binaires qui prennent effet juste après que l’utilisateur retourne le commutateur bascule.

Imaginez le bouton bascule comme le bouton marche/arrêt d’un appareil : vous l’actionnez quand vous souhaitez activer ou désactiver l’action de l’appareil.

Pour rendre le bouton bascule facile à comprendre, utilisez des étiquettes contenant un ou deux mots, de préférence des noms, qui décrivent la fonctionnalité contrôlée. Par exemple, « WiFi » ou « Lumières cuisine ».

Choix entre le commutateur bascule et la case à cocher

Pour certaines actions, un commutateur bascule ou une case à cocher peut fonctionner. Pour déterminer quel contrôle fonctionne mieux, suivez ces conseils :

• Utilisez un commutateur bascule pour les paramètres binaires lorsque les modifications deviennent effectives immédiatement après que l’utilisateur les modifie.

  

  Dans cet exemple, il est clair que le bouton bascule indique que les lumières de cuisine sont définies sur « Activé ». Mais avec la case à cocher, l’utilisateur doit réfléchir à la question de savoir si les lumières sont activées maintenant ou si elles doivent cocher la case pour activer les lumières.

• Utilisez les cases à cocher pour les éléments facultatifs (« bonus »).

• Utilisez une case à cocher lorsque l’utilisateur doit effectuer des étapes supplémentaires pour que les modifications soient effectives. Par exemple, si l’utilisateur doit cliquer sur un bouton « Envoyer » ou « suivant » pour appliquer les modifications, utilisez une case à cocher.

• Utilisez les cases à cocher si l’utilisateur peut sélectionner plusieurs éléments liés à un paramètre ou une fonctionnalité unique.

Recommandations

• Utilisez les étiquettes On et Off par défaut lorsque vous le pouvez ; remplacez-les uniquement lorsque cela est nécessaire pour rendre le bouton bascule compréhensible. Si vous les remplacez, utilisez le mot qui décrit le plus précisément le bouton bascule. En règle générale, si les mots « On » et « Off » ne décrivent pas l’action liée à un bouton bascule, essayez éventuellement un autre contrôle.
• Évitez de remplacer les étiquettes On et Off, sauf si vous devez ; respectez les étiquettes par défaut, sauf si la situation appelle des étiquettes personnalisées.

UWP et WinUI 2

Les API de ce contrôle existent dans l’espace de noms Windows.UI.Xaml.Controls.

Nous vous recommandons d’utiliser la dernière version de WinUI 2 pour obtenir les styles et fonctionnalités les plus récents pour tous les contrôles.

Créer un commutateur bascule

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.

Voici comment créer un commutateur bascule simple. Ce XAML génère le bouton bascule montré précédemment.

<ToggleSwitch x:Name="lightToggle" Header="Kitchen Lights"/>

Voici comment créer le même commutateur bascule dans le code.

ToggleSwitch lightToggle = new ToggleSwitch();
lightToggle.Header = "Kitchen Lights";

// Add the toggle switch to a parent container in the visual tree.
stackPanel1.Children.Add(lightToggle);

Ison

Le commutateur peut être activé ou désactivé. Utilisez la propriété IsOn pour déterminer l’état du commutateur. Lorsque le commutateur est utilisé pour contrôler l’état d’une autre propriété binaire, vous pouvez utiliser une liaison comme indiqué ici.

<StackPanel Orientation="Horizontal">
    <ToggleSwitch x:Name="ToggleSwitch1" IsOn="True"/>
    <ProgressRing IsActive="{x:Bind ToggleSwitch1.IsOn, Mode=OneWay}" 
                  Width="130"/>
</StackPanel>

Activée

Dans d’autres cas, vous pouvez gérer l’événement bascule pour répondre aux modifications apportées à l’état.

Cet exemple montre comment ajouter un gestionnaire d’événements toggled en XAML et en code. L’événement bascule est géré pour activer ou désactiver un anneau de progression et modifier sa visibilité.

<ToggleSwitch x:Name="toggleSwitch1" IsOn="True"
              Toggled="ToggleSwitch_Toggled"/>

Voici comment créer le même commutateur bascule dans le code.

// Create a new toggle switch and add a Toggled event handler.
ToggleSwitch toggleSwitch1 = new ToggleSwitch();
toggleSwitch1.Toggled += ToggleSwitch_Toggled;

// Add the toggle switch to a parent container in the visual tree.
stackPanel1.Children.Add(toggleSwitch1);

Voici le gestionnaire de l’événement Toggled.

private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
{
    ToggleSwitch toggleSwitch = sender as ToggleSwitch;
    if (toggleSwitch != null)
    {
        if (toggleSwitch.IsOn == true)
        {
            progress1.IsActive = true;
            progress1.Visibility = Visibility.Visible;
        }
        else
        {
            progress1.IsActive = false;
            progress1.Visibility = Visibility.Collapsed;
        }
    }
}

Étiquettes activées/désactivées

Par défaut, le commutateur bascule inclut des étiquettes littérales activées et désactivées, qui sont localisées automatiquement. Vous pouvez remplacer ces étiquettes en définissant les propriétés OnContent et OffContent .

Cet exemple remplace les étiquettes On/Off par Afficher/Masquer les étiquettes.

<ToggleSwitch x:Name="imageToggle" Header="Show images"
              OffContent="Show" OnContent="Hide"
              Toggled="ToggleSwitch_Toggled"/>

Vous pouvez également utiliser du contenu plus complexe en définissant les propriétés OnContentTemplate et OffContentTemplate .

Obtenir l’exemple de code

• Exemple de la galerie WinUI : consultez tous les contrôles XAML dans un format interactif.

Articles connexes

• Classe ToggleSwitch
• Boutons de radio
• Boutons bascule
• Cases à cocher