Conseils de conception de styles pour le contrôle PasswordBox des contrôles Silverlight dans Blend
Vous pouvez utiliser le modèle de contrôle PasswordBox intégré pour créer un modèle PasswordBox personnalisé. Par défaut, le contrôle PasswordBox se présente comme suit :
Parties du modèle PasswordBox
Le contrôle PasswordBox possède une partie : la partie ContentElement. Cette partie est obligatoire.
Conseil
Pour afficher les parties du modèle, ouvrez le panneau Parties lorsque vous modifiez le modèle.
États du contrôle PasswordBox
Par défaut, le contrôle PasswordBox peut être dans l’un des quatre états suivants dans le groupe d’états CommonStates, que vous pouvez afficher dans le panneau États lors de la modification d’un modèle PasswordBox :
Nom de l’état |
Description |
---|---|
Normal |
Aspect du contrôle PasswordBox en l’absence d’interaction avec ce dernier. |
MouseOver |
Aspect du contrôle PasswordBox lorsque l’utilisateur place le pointeur dessus. |
Disabled |
Aspect du contrôle PasswordBox lorsque la propriété IsEnabled a la valeur False. |
Le contrôle PasswordBox peut être dans l’un des deux états suivants du groupe d’états FocusStates :
Nom de l’état |
Description |
---|---|
Unfocused |
Aspect du contrôle PasswordBox lorsqu’il ne possède pas le focus clavier. |
Focused |
Aspect du contrôle PasswordBox lorsqu’il possède le focus clavier. Un utilisateur pourrait, par exemple, appuyer sur la touche Tabulation pour parcourir en séquence les objets de votre application jusqu’à ce que le focus clavier soit sur le contrôle PasswordBox. |
Le contrôle PasswordBox peut être dans l’un des trois états suivants du groupe d’états ValidationStates :
Nom de l’état |
Description |
---|---|
Valid |
Aspect du contrôle PasswordBox lorsqu’il est valide. |
InvalidUnfocused |
Aspect du contrôle PasswordBox lorsqu’il n’est pas valide et ne possède pas le focus clavier. |
InvalidFocused |
Aspect du contrôle PasswordBox lorsqu’il n’est pas valide et possède le focus clavier. |
Conseil
Un groupe d’états contient les états visuels qui appartiennent à une même catégorie logique et ne peuvent pas être affichés simultanément.Le groupe CommonStates, par exemple, comprend des états qui se rapportent à une interaction utilisateur avec un périphérique d’entrée tel que la souris.Un seul état d’un groupe d’états peut être affiché à la fois, mais un état d’un groupe d’états peut être affiché en même temps qu’un état d’un autre groupe d’états.
Lorsque vous sélectionnez un état, l’enregistrement de l’état est activé et toutes les modifications que vous effectuez sont enregistrées pour cet état. Pour arrêter l’enregistrement de l’état, cliquez sur Indicateur du mode d’enregistrement , ou sélectionnez Base dans le panneau Etats. Pour modifier l’apparence de votre contrôle lorsque deux états distincts sont actifs, vous pouvez épingler un aperçu d’un état dans un groupe d’états pendant que vous modifiez un état dans un autre groupe d’états.
Liaison de modèle
Vous pouvez lier par modèle les propriétés Background, BorderBrush, Foreground, BorderThickness ou Padding. Pour plus d'informations, consultez Véhiculer des propriétés d'objet vers le modèle dans Blend.
Pour convertir des objets en contrôle PasswordBox
L’image suivante est une maquette de conception détaillée d’un objet PasswordBox :
Cet exemple utilise le code XAML de l’étape 2 de la procédure suivante, qui correspond au graphique précédent permettant de créer une zone de mot de passe personnalisée à l’aide du modèle de contrôle PasswordBox.
Ouvrez un nouveau projet Microsoft Silverlight. En mode Code, recherchez le code suivant, puis supprimez la barre oblique de fermeture (/).
<Grid x:Name="LayoutRoot" Background="White"/>
Copiez et collez ensuite le code suivant dans votre nouveau projet, après le code que vous avez localisé à l’étape 1.
<Grid Height="20" Width="120"> <Rectangle Fill="#FF333333" RadiusX="5" RadiusY="5"/> <TextBlock Margin="5,0" Foreground="White" Text="*****" VerticalAlignment="Center"/> </Grid>
Ajoutez une balise de fermeture Grid (</Grid>) après le code que vous venez de coller.
Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur Grille, puis cliquez sur Créer un contrôle. Dans la boîte de dialogue Créer un contrôle, cliquez sur PasswordBox, puis cliquez sur OK.
Dans le panneau Objets et chronologie, cliquez sur Grille. Dans le panneau Parties, double-cliquez sur ContentElement.
Copiez les propriétés VerticalAlignment et Margin de TextBlock et collez-les dans ContentElement. Cliquez sur ContentElement dans le panneau Objets et chronologie, puis, dans le panneau Propriétés, effectuez les opérations suivantes :
**VerticalAlignment **Affectez la valeur Centre.
**Marge **Affectez les valeurs suivantes :
Left 5
Right 5
Haut 0
Bottom 0
Dans le panneau Objets et chronologie, cliquez sur TextBlock, puis cliquez sur Suppr.
Dans le panneau Objets et chronologie, cliquez sur Modèle, puis cliquez sur **Rétablir l’étendue à **. Avec Style sélectionné dans le panneau Objets et chronologie, dans la catégorie Pinceaux du panneau Propriétés, affectez à Premier plan la valeur #FFFFFFFF.
Dans le panneau Objets et chronologie, cliquez sur Rétablir l’étendue à .
Dans le panneau Propriétés, dans la zone de texte Mot de passe de la catégorie Propriétés communes, tapez abcde.
Dans la catégorie Texte du panneau Propriétés, cliquez sur Afficher les propriétés avancées. Dans la zone de texte PasswordChar, tapez *.
Générez votre projet (Ctrl+Shift+B) et testez-le en appuyant sur F5.
Pour plus d’informations sur l’application de votre nouveau modèle PasswordBox à d’autres objets PasswordBox, voir Appliquer ou supprimer une ressource dans Blend.
Références
Vous trouverez des informations détaillées sur les propriétés et événements du contrôle PasswordBox de Silverlight dans la Galerie de contrôles Silverlight sur MSDN.
Voir aussi
Concepts
Conseils de conception de styles pour les contrôles Silverlight courants dans Blend
Définition d'un style pour un contrôle prenant en charge les modèles dans Blend