Partager via

Zone Mot de passe

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 de remplacement.

État du focus de la zone de mot de passe lors de la saisie 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é ?

Utilisez un contrôle PasswordBox pour collecter un mot de passe ou d’autres données privées, telles qu’un numéro de sécurité sociale.

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

Recommendations

  • 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 pour permettre aux utilisateurs de vérifier les mots de passe qu’ils ont tapés. Avoir un autre élément de contrôle juste à côté pourrait amener les utilisateurs à révéler accidentellement leurs mots de passe lorsqu’ils essaient d’interagir avec cet autre élément. Pour éviter cela, ajoutez un espace entre la zone de saisie du mot de passe 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.

Examples

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'indication pour que l’utilisateur comprenne à quoi il sert.

Zone de mot de passe à l’état inactif avec du texte d’indice

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 lors de la saisie 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é

Créer une zone de mot de passe

Ouvrez l’application galerie WinUI 3 et consultez PasswordBox en action

L’application WinUI 3 Gallery inclut des exemples interactifs de la plupart des contrôles, des caractéristiques et des fonctionnalités de WinUI 3. Obtenir l’application à partir du Microsoft Store ou obtenir 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 de remplacement

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 à l’état de repos avec texte indicatif

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 le PasswordBox perd le focus et reprend ensuite le focus, le bouton de révélation ne s'affiche pas de nouveau, sauf si le mot de passe est effacé et que la saisie de caractères recommence.

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 désactiver si le mot de passe est masqué, 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 aider les utilisateurs à entrer des données à l’aide du clavier tactile ou du panneau d’entrée réversible (SIP), vous pouvez définir l’étendue d’entrée du contrôle de texte pour qu’elle corresponde au type de données que l’utilisateur doit entrer. PasswordBox prend uniquement en charge les valeurs d’étendue d’entrée Password et NumericPin . Toute autre valeur 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.

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 sont généralement applicables aux applications UWP qui utilisent WinUI 2. Consultez la référence de l’API UWP pour obtenir des informations et des exemples spécifiques à la plateforme.

Cette section contient des informations dont vous avez besoin pour utiliser le contrôle dans une application UWP ou 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. WinUI 2.2 ou version ultérieure inclut un nouveau modèle pour ce contrôle qui utilise des angles arrondis. Pour plus d’informations, voir Rayon d’angle.

Contrôles de texte

  • Last updated on