Zone de mot de passePassword box

Une zone de mot de passe (PasswordBox) est une zone d’entrée de texte qui masque les caractères saisis, pour des raisons de confidentialité.A password box is a text input box that conceals the characters typed into it for the purpose of privacy. Une zone de mot de passe ressemble à une zone de texte, mais elle affiche des caractères espace réservé à la place du texte qui a été saisi.A password box looks like a text box, except that it renders placeholder characters in place of the text that has been entered. Vous pouvez configurer le caractère espace réservé.You can configure the placeholder character.

Par défaut, la zone de mot de passe permet à l’utilisateur d’afficher son mot de passe en appuyant sur un bouton d’affichage.By default, the password box provides a way for the user to view their password by holding down a reveal button. Vous pouvez désactiver ce bouton, ou proposer un autre mécanisme pour faire apparaître le mot de passe, par exemple une case à cocher.You can disable the reveal button, or provide an alternate mechanism to reveal the password, such as a check box.

Obtenir la bibliothèque d’interface utilisateur WindowsGet the Windows UI Library

Logo WinUI

La bibliothèque d’interface utilisateur Windows version 2.2 ou ultérieure inclut pour ce contrôle un nouveau modèle qui utilise des angles arrondis.Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. Pour plus d’informations, consultez Rayons des angles.For more info, see Corner radius. WinUI est un package NuGet qui contient de nouveaux contrôles et des fonctionnalités d’interface utilisateur pour les applications Windows.WinUI is a NuGet package that contains new controls and UI features for Windows apps. Pour plus d’informations, notamment des instructions d’installation, consultez la bibliothèque d’interface utilisateur Windows.For more info, including installation instructions, see Windows UI Library.

API de plateforme : classe PasswordBox, propriété Password, propriété PasswordChar, propriété PasswordRevealMode, événement PasswordChangedPlatform APIs: PasswordBox class, Password property, PasswordChar property, PasswordRevealMode property, PasswordChanged event

Est-ce le contrôle approprié ?Is this the right control?

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.Use a PasswordBox control to collect a password or other private data, such as a Social Security number.

Pour plus d’informations sur le choix du contrôle de texte approprié, consultez l’article Contrôles de texte.For more info about choosing the right text control, see the Text controls article.

ExemplesExamples

Galerie de contrôles XAMLXAML Controls Gallery
XAML controls gallery

Si vous disposez de l’application Galerie de contrôles XAML, cliquez ici pour ouvrir l’application et voir l’objet PasswordBox en contexte.If you have the XAML Controls Gallery app installed, click here to open the app and see the PasswordBox in action.

La zone de mot de passe a plusieurs états possibles, dont les suivants.The password box has several states, including these notable ones.

Une zone de mot de passe à l’état inactif peut afficher un texte d’information relatif à sa finalité :A password box at rest can show hint text so that the user knows its purpose:

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

Lorsque l’utilisateur effectue une saisie dans une zone de mot de passe, le comportement par défaut consiste à afficher des puces qui masquent le texte entré :When the user types in a password box, the default behavior is to show bullets that hide the text being entered:

État de focus de la zone de mot de passe pendant la saisie

Le bouton d’« affichage » sur la droite permet de jeter un coup d’œil au mot de passe en cours de saisie :Pressing the "reveal" button on the right gives a peek at the password text being entered:

Texte de zone de mot de passe affiché

Créer une zone de mot de passeCreate a password box

Utilisez la propriété Password pour obtenir ou définir le contenu de PasswordBox.Use the Password property to get or set the contents of the PasswordBox. Vous pouvez effectuer cette opération dans le gestionnaire pour que l’événement PasswordChanged procède à la validation lorsque l’utilisateur entre le mot de passe.You can do this in the handler for the PasswordChanged event to perform validation while the user enters the password. Vous pouvez aussi utiliser un autre événement, comme un bouton Click, pour effectuer la validation dès que l’utilisateur a fini de saisir du texte.Or, you can use another event, like a button Click, to perform validation after the user completes the text entry.

Vous trouverez ci-dessous le code XAML d’un contrôle de zone de mot de passe montrant l’apparence par défaut de PasswordBox.Here's the XAML for a password box control that demonstrates the default look of the PasswordBox. Lorsque l’utilisateur saisit un mot de passe, vous vérifiez s’il s’agit de la valeur littérale « Password ».When the user enters a password, you check to see if it's the literal value, "Password". Si tel est le cas, vous affichez un message à l’attention de l’utilisateur.If it is, you display a message to the user.

<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;
    }
}

Résultat obtenu lorsque ce code est exécuté et que l’utilisateur saisit « Password » :Here's the result when this code runs and the user enters "Password".

Zone de mot de passe avec un message de validation

Caractère de mot de passePassword character

Vous pouvez modifier le caractère utilisé pour masquer le mot de passe en définissant la propriété PasswordChar.You can change the character used to mask the password by setting the PasswordChar property. Ici, la puce par défaut est remplacée par un astérisque.Here, the default bullet is replaced with an asterisk.

<PasswordBox x:Name="passwordBox" Width="200" PasswordChar="*"/>

Le résultat se présente ainsi :The result looks like this.

Zone de mot de passe avec un caractère personnalisé

En-têtes et texte d’espace réservéHeaders and placeholder text

Vous pouvez utiliser les propriétés Header et PlaceholderText pour fournir du contexte à l’élément PasswordBox.You can use the Header and PlaceholderText properties to provide context for the PasswordBox. Cela est particulièrement utile lorsque vous avez plusieurs zones, comme dans un formulaire, pour modifier un mot de passe.This is especially useful when you have multiple boxes, such as on a form to change a password.

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

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

Longueur maximaleMaximum length

Spécifiez le nombre maximal de caractères que l’utilisateur peut saisir en définissant la propriété MaxLength.Specify the maximum number of characters that the user can enter by setting the MaxLength property. Il n’existe aucune propriété permettant de spécifier une longueur minimale. Toutefois vous pouvez vérifier la longueur de mot de passe et effectuer toute autre validation, dans le code de votre application.There is no property to specify a minimum length, but you can check the password length, and perform any other validation, in your app code.

Mode d’affichage du mot de passePassword reveal mode

PasswordBox dispose d’un bouton intégré sur lequel l’utilisateur peut appuyer pour afficher le texte du mot de passe.The PasswordBox has a built-in button that the user can press to display the password text. Voici le résultat de l’action de l’utilisateur.Here's the result of the user's action. Lorsque l’utilisateur relâche le bouton, le mot de passe est automatiquement masqué à nouveau.When the user releases it, the password is automatically hidden again.

Texte de zone de mot de passe affiché

Mode aperçuPeek mode

Par défaut, le bouton d’affichage du mot de passe (ou « bouton d’aperçu ») s’affiche.By default, the password reveal button (or "peek" button) is shown. L’utilisateur doit rester appuyé sur le bouton pour afficher le mot de passe, afin de maintenir un niveau élevé de sécurité.The user must continuously press the button to view the password, so that a high level of security is maintained.

La valeur de la propriété PasswordRevealMode n’est pas le seul facteur déterminant si un bouton d’affichage du mot de passe est visible à l’utilisateur.The value of the PasswordRevealMode property is not the only factor that determines whether a password reveal button is visible to the user. Parmi les autres facteurs, figurent ceux indiquant si le contrôle est affiché au-dessus d’une largeur minimale, si le focus porte sur PasswordBox et si le champ de texte contient au moins un caractère.Other factors include whether the control is displayed above a minimum width, whether the PasswordBox has focus, and whether the text entry field contains at least one character. Le bouton d’affichage du mot de passe apparaît uniquement lorsque le focus porte sur PasswordBox pour la première fois et si un caractère est saisi.The password reveal button is shown only when the PasswordBox receives focus for the first time and a character is entered. Si PasswordBox perd le focus, puis le reprend, le bouton d’affichage n’apparaît plus, sauf si le mot de passe est effacé et que la saisie de caractères recommence.If the PasswordBox loses focus and then regains focus, the reveal button is not shown again unless the password is cleared and character entry starts over.

Attention  Dans les versions antérieures à Windows 10, le bouton d’affichage du mot de passe ne s’affichait pas par défaut.Caution  Prior to Windows 10, the password reveal button was not shown by default. Si la sécurité de votre application nécessite que le mot de passe soit toujours masqué, définissez PasswordRevealMode sur Hidden.If the security of your app requires that the password is always obscured, be sure to set PasswordRevealMode to Hidden.

Modes Masqué et VisibleHidden and Visible modes

Les autres valeurs d’énumération PasswordRevealMode, Hidden et Visible, masquent le bouton d’affichage du mot de passe et vous permettent de gérer par programme si le mot de passe est masqué.The other PasswordRevealMode enumeration values, Hidden and Visible, hide the password reveal button and let you programmatically manage whether the password is obscured.

Pour toujours masquer le mot de passe, définissez PasswordRevealMode sur Hidden.To always obscure the password, set PasswordRevealMode to Hidden. 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 faire basculer PasswordRevealMode de la valeur Hidden à Visible.Unless you need the password to be always obscured, you can provide a custom UI to let the user toggle the PasswordRevealMode between Hidden and 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.For example, you can use a check box to toggle whether the password is obscured, as shown in the following example. Vous pouvez également utiliser d’autres contrôles, tels que ToggleButton, pour permettre à l’utilisateur de basculer entre les modes.You can also use other controls, like ToggleButton, to let the user switch modes.

Cet exemple montre comment utiliser un élément CheckBox pour permettre à un utilisateur de changer le mode d’affichage d’un élément PasswordBox.This example shows how to use a CheckBox to let a user switch the reveal mode of a 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;
    }
}

Cet élément PasswordBox se présente comme suit :This PasswordBox looks like this.

Zone de mot de passe avec un bouton d’affichage personnalisé

Choisir le clavier adapté à votre contrôle de texteChoose the right keyboard for your text control

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.To help users to enter data using the touch keyboard, or Soft Input Panel (SIP), you can set the input scope of the text control to match the kind of data the user is expected to enter. PasswordBox prend en charge uniquement les valeurs d’étendue des entrées Password et NumericPin.PasswordBox supports only the Password and NumericPin input scope values. Toute autre valeur est ignorée.Any other value is ignored.

Pour en savoir plus sur l’utilisation des étendues des entrées, voir Utiliser l’étendue des entrées pour modifier le clavier tactile.For more info about how to use input scopes, see Use input scope to change the touch keyboard.

RecommandationsRecommendations

  • Utilisez un texte d’étiquette ou d’espace réservé si l’objectif de la zone de mot de passe n’est pas clair.Use a label or placeholder text if the purpose of the password box isn't clear. Une étiquette reste toujours visible, qu’il y ait ou non une valeur dans la zone de saisie de texte.A label is visible whether or not the text input box has a value. 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.Placeholder text is displayed inside the text input box and disappears once a value has been entered.
  • Attribuez à la zone de mot de passe une largeur appropriée pour la plage de valeurs qui peuvent être entrées.Give the password box an appropriate width for the range of values that can be entered. La longueur des mots varie selon la langue. Par conséquent, tenez compte de la localisation si vous destinez votre application au marché international.Word length varies between languages, so take localization into account if you want your app to be world-ready.
  • Ne placez pas d’autre contrôle juste à côté d’une zone de saisie de mot de passe.Don't put another control right next to a password input box. La zone de mot de passe comporte un bouton d’affichage du mot de passe permettant aux utilisateurs de vérifier les mots de passe qu’ils ont saisis, et le fait de prévoir un autre contrôle juste à côté peut amener les utilisateurs à révéler accidentellement leurs mots de passe quand ils tentent d’interagir avec l’autre contrôle.The password box has a password reveal button for users to verify the passwords they have typed, and having another control right next to it might make users accidentally reveal their passwords when they try to interact with the other control. Pour empêcher que cela se produise, laissez suffisamment d’espace entre la zone de saisie du mot de passe et l’autre contrôle, ou placez celui-ci sur la ligne suivante.To prevent this from happening, put some spacing between the password in put box and the other control, or put the other control on the next line.
  • Songez à présenter deux zones de mot de passe pour la création de compte : l’un pour le nouveau mot de passe et l’autre pour confirmer ce mot de passe.Consider presenting two password boxes for account creation: one for the new password, and a second to confirm the new password.
  • Affichez une seule zone de mot de passe pour les connexions.Only show a single password box for logins.
  • Lorsqu’une zone de mot de passe est utilisée pour entrer un PIN, pensez à fournir une réponse dès l’entrée du dernier chiffre au lieu d’utiliser un bouton de confirmation.When a password box is used to enter a PIN, consider providing an instant response as soon as the last number is entered instead of using a confirmation button.

Obtenir l’exemple de codeGet the sample code

Contrôles de texteText controls