Partager via

Zone de mot de passe

  • Article

Une zone de mot de passe est une zone de saisie de texte qui masque les caractères tapés dans celui-ci à des fins de confidentialité. Une zone de mot de passe ressemble à une zone de texte, sauf qu’elle affiche les caractères d’espace réservé à la place du texte entré. Vous pouvez configurer le caractère d’espace réservé.

État du focus de la zone de mot de passe tapant du texte

Par défaut, la zone de mot de passe permet à l’utilisateur d’afficher son mot de passe en maintenant enfoncé un bouton révéler. Vous pouvez désactiver le bouton révéler ou fournir un autre mécanisme pour afficher le mot de passe, tel qu’une case à cocher.

Est-ce le contrôle approprié ?

Si vous voulez recueillir un mot de passe ou d’autres données confidentielles, comme un numéro de sécurité sociale, utilisez un contrôle PasswordBox.

Pour plus d’informations sur le choix du contrôle de texte approprié, consultez l’article Contrôles de texte.

Recommandations

  • Utilisez une étiquette ou un texte d’espace réservé si l’objectif de la zone de mot de passe n’est pas clair. Une étiquette reste toujours visible, qu’il y ait ou non une valeur dans la zone de saisie de texte. Le texte d’espace réservé s’affiche initialement dans la zone de saisie de texte, mais disparaît après qu’une valeur a été entrée.
  • Donnez à la zone de mot de passe une largeur appropriée pour la plage de valeurs qui peuvent être entrées. La longueur des mots varie selon la langue. Par conséquent, tenez compte de la localisation si vous destinez votre application au marché international.
  • Ne placez pas un autre contrôle en regard d’une zone d’entrée de mot de passe. La zone de mot de passe comporte un bouton d’affichage de mot de passe pour permettre aux utilisateurs de vérifier les mots de passe qu’ils ont tapés et d’avoir un autre contrôle en regard de celui-ci peut rendre les utilisateurs révéler accidentellement leurs mots de passe lorsqu’ils essaient d’interagir avec l’autre contrôle. Pour éviter cela, placez un espacement entre le mot de passe dans la zone de mise en place et l’autre contrôle, ou placez l’autre contrôle sur la ligne suivante.
  • Envisagez de présenter deux zones de mot de passe pour la création de compte : une pour le nouveau mot de passe et une seconde pour confirmer le nouveau mot de passe.
  • Affichez uniquement une seule zone de mot de passe pour les connexions.
  • Lorsqu’une zone de mot de passe est utilisée pour entrer un code confidentiel, envisagez de fournir une réponse instantanée dès que le dernier nombre est entré au lieu d’utiliser un bouton de confirmation.

Exemples

La zone de mot de passe comporte plusieurs états, y compris ceux notables.

Une zone de mot de passe au repos peut afficher le texte d’indicateur afin que l’utilisateur sache son objectif :

Zone de mot de passe dans l’état rest avec du texte d’indicateur

Lorsque l’utilisateur tape dans une zone de mot de passe, le comportement par défaut consiste à afficher les puces qui masquent le texte entré :

État du focus de la zone de mot de passe tapant du texte

Le fait d’appuyer sur le bouton « révéler » à droite donne un aperçu du texte du mot de passe entré :

Texte de zone de mot de passe révélé

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 fonctionnalités les plus récents pour tous les contrôles. WinUI version 2.2 ou ultérieure inclut pour ce contrôle un nouveau modèle qui utilise des angles arrondis. Pour plus d’informations, consultez Rayons des angles.

Créer une zone de mot de passe

Ouvrez l’application galerie WinUI 3 et consultez PasswordBox 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.

Utilisez la propriété Password pour obtenir ou définir le contenu de PasswordBox. Vous pouvez le faire dans le gestionnaire de l’événement PasswordChanged pour effectuer la validation pendant que l’utilisateur entre le mot de passe. Vous pouvez également utiliser un autre événement, comme un clic sur le bouton, pour effectuer la validation une fois que l’utilisateur a terminé l’entrée de texte.

Voici le code XAML d’un contrôle de zone de mot de passe qui illustre l’apparence par défaut de PasswordBox. Lorsque l’utilisateur entre un mot de passe, vous vérifiez s’il s’agit de la valeur littérale « Mot de passe ». Si c’est le cas, vous affichez un message à l’utilisateur.

<StackPanel>  
  <PasswordBox x:Name="passwordBox" Width="200" MaxLength="16"
             PasswordChanged="passwordBox_PasswordChanged"/>

  <TextBlock x:Name="statusText" Margin="10" HorizontalAlignment="Center" />
</StackPanel>   

private void passwordBox_PasswordChanged(object sender, RoutedEventArgs e)
{
    if (passwordBox.Password == "Password")
    {
        statusText.Text = "'Password' is not allowed as a password.";
    }
    else
    {
        statusText.Text = string.Empty;
    }
}

Voici le résultat lorsque ce code s’exécute et que l’utilisateur entre « Mot de passe ».

Zone mot de passe avec un message de validation

Caractère de mot de passe

Vous pouvez modifier le caractère utilisé pour masquer le mot de passe en définissant la propriété PasswordChar . Ici, la puce par défaut est remplacée par un signe de livre.

<PasswordBox x:Name="passwordBox" Width="300" PasswordChar="#"/>

Le résultat ressemble à ceci.

Zone mot de passe avec un caractère personnalisé

En-têtes et texte d’espace réservé

Vous pouvez utiliser les propriétés Header et PlaceholderText pour fournir un contexte pour PasswordBox. Cela est particulièrement utile lorsque vous avez plusieurs zones, telles que sur un formulaire pour modifier un mot de passe.

<PasswordBox x:Name="passwordBox" Width="200" Header="Password" PlaceholderText="Enter your password"/>

Zone de mot de passe dans l’état rest avec du texte d’indicateur

Longueur maximale

Spécifiez le nombre maximal de caractères que l’utilisateur peut entrer en définissant la propriété MaxLength . Il n’existe aucune propriété pour spécifier une longueur minimale, mais vous pouvez vérifier la longueur du mot de passe et effectuer toute autre validation dans votre code d’application.

Mode d’affichage du mot de passe

PasswordBox dispose d’un bouton intégré que l’utilisateur peut appuyer pour afficher le texte du mot de passe. Voici le résultat de l’action de l’utilisateur. Lorsque l’utilisateur la libère, le mot de passe est automatiquement masqué.

Texte de zone de mot de passe révélé

Mode Aperçu

Par défaut, le bouton révéler du mot de passe (ou bouton « aperçu ») s’affiche. L’utilisateur doit appuyer en permanence sur le bouton pour afficher le mot de passe afin qu’un niveau élevé de sécurité soit maintenu.

La valeur de la propriété PasswordRevealMode n’est pas le seul facteur qui détermine si un bouton d’affichage de mot de passe est visible pour l’utilisateur. D’autres facteurs incluent si le contrôle est affiché au-dessus d’une largeur minimale, si passwordBox a le focus et si le champ d’entrée de texte contient au moins un caractère. Le bouton révéler du mot de passe s’affiche uniquement lorsque PasswordBox reçoit le focus pour la première fois et qu’un caractère est entré. Si passwordBox perd le focus, puis rétablit le focus, le bouton révéler n’est pas affiché à nouveau, sauf si le mot de passe est effacé et que l’entrée de caractère démarre.

Modes masqués et visibles

Les autres valeurs d’énumération PasswordRevealMode , masquées et visibles, masquent le bouton révéler du mot de passe et vous permettent de gérer par programmation si le mot de passe est masqué.

Pour toujours masquer le mot de passe, définissez PasswordRevealMode sur Masqué. Sauf si vous avez besoin que le mot de passe soit toujours masqué, vous pouvez fournir une interface utilisateur personnalisée pour permettre à l’utilisateur de basculer le PasswordRevealMode entre Masqué et Visible. Par exemple, vous pouvez utiliser une case à cocher pour choisir d’afficher ou de masquer le mot de passe, comme illustré dans l’exemple suivant. Vous pouvez également utiliser d’autres contrôles, tels que ToggleButton, pour permettre à l’utilisateur de changer de mode.

Cet exemple montre comment utiliser une CheckBox pour permettre à un utilisateur de changer le mode révéler d’un PasswordBox.

<StackPanel Width="200">
    <PasswordBox Name="passwordBox1"
                 PasswordRevealMode="Hidden"/>
    <CheckBox Name="revealModeCheckBox" Content="Show password"
              IsChecked="False"
              Checked="CheckBox_Changed" Unchecked="CheckBox_Changed"/>
</StackPanel>

private void CheckBox_Changed(object sender, RoutedEventArgs e)
{
    if (revealModeCheckBox.IsChecked == true)
    {
        passwordBox1.PasswordRevealMode = PasswordRevealMode.Visible;
    }
    else
    {
        passwordBox1.PasswordRevealMode = PasswordRevealMode.Hidden;
    }
}

Ce PasswordBox ressemble à ceci.

Zone mot de passe avec un bouton révéler personnalisé

Choisir le clavier adapté à votre contrôle de texte

Pour faciliter la saisie de données par les utilisateurs au moyen du clavier tactile, ou panneau de saisie, définissez l’étendue des entrées du contrôle de texte de sorte qu’elle corresponde au type de données attendu de la part de l’utilisateur. PasswordBox prend uniquement en charge les valeurs d’étendue d’entrée Password et NumericPin . Toute autre donnée est ignorée.

Pour plus d’informations sur l’utilisation des étendues d’entrée, consultez Utiliser l’étendue d’entrée pour modifier le clavier tactile.

Obtenir l’exemple de code

Contrôles de texte