Boutons bascule

  • Article

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 bascule, utilisez la classe ToggleSwitch.

Est-ce le contrôle approprié ?

Utilisez un bouton bascule pour les opérations binaires qui prennent effet dès que l’utilisateur change l’état du bouton.

Bouton bascule, activé

Désactiver le bouton 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 bouton bascule et la case à cocher

Le bouton bascule et la case à cocher peuvent tous deux convenir à certaines actions. Pour déterminer le contrôle le mieux approprié, suivez ces conseils :

  • Utilisez un bouton bascule pour les paramètres binaires impliquant des modifications qui deviennent immédiatement effectives une fois que l’utilisateur les a apportées.

    Bouton bascule ou case à cocher

    Dans cet exemple, il est clair avec le bouton bascule que les lumières de cuisine sont définies sur « Activé ». Mais avec la case à cocher, l’utilisateur doit déterminer si les lumières sont allumées maintenant ou s’il doit case activée la boîte pour allumer les lumières.

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

  • Utilisez une case à cocher lorsque l’utilisateur doit réaliser des étapes supplémentaires afin de rendre effectives les modifications. À titre d’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 y êtes tenu ; utilisez les étiquettes par défaut, à moins que la situation n’appelle des étiquettes personnalisées.

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 .

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.

Créer un bouton bascule

Ouvrez l’application Galerie WinUI 3 et voyez toggleSwitch en action.

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 bouton 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 bouton bascule à l’aide de 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 illustré ici.

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

Toggled

Dans les autres cas, vous pouvez gérer l’événement Toggled afin de répondre aux modifications de l’état.

Cet exemple indique comment ajouter un gestionnaire d’événements Toggled en XAML et à l’aide de code. L’événement Toggled est géré de façon à activer ou désactiver un anneau de progression et à en modifier la visibilité.

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

Voici comment créer le même bouton bascule à l’aide de 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 On/Off

Par défaut, le bouton bascule inclut des étiquettes On et Off littérales, 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 des étiquettes Show/Hide.

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

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

Obtenir l’exemple de code