Conseils sur les styles du contrôle TextBox

Ee371168.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(fr-fr,Expression.40).png

Vous pouvez utiliser le modèle de contrôle TextBox intégré pour créer un modèle TextBox personnalisé. Par défaut, le contrôle TextBox se présente comme suit :

Ee371168.f77261da-feb5-4693-b764-582a9cc93c12(fr-fr,Expression.40).png

Parties d’un modèle TextBox

Le contrôle TextBox possède une partie : la partie ContentElement . Cette partie est obligatoire.

tip noteConseil :

Pour afficher les parties du modèle, ouvrez le panneau Parties lorsque vous modifiez le modèle.

États d’un contrôle TextBox

Par défaut, le contrôle TextBox 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 TextBox  :

Nom de l’état Description

Normal

Aspect du contrôle TextBox en l’absence d’interaction avec ce dernier.

MouseOver

Aspect du contrôle TextBox lorsque l’utilisateur place le pointeur dessus.

ReadOnly

Aspect du contrôle TextBox lorsque la propriété IsReadOnly a la valeur True .

Disabled

Aspect du contrôle TextBox lorsque la propriété IsEnabled a la valeur False .

Le contrôle TextBox peut être dans l’un des deux états suivants du groupe d’états FocusStates :

Nom de l’état Description

Unfocused

Aspect du contrôle TextBox lorsqu’il ne possède pas le focus clavier.

Focused

Aspect du contrôle TextBox lorsqu’il possède le focus clavier. Un utilisateur pourrait, par exemple, appuyer sur la touche Tabulation pour parcourir en séquence les objets d’une application jusqu’à ce que le focus clavier soit sur le contrôle TextBox .

Le contrôle TextBox peut être dans l’un des trois états suivants du groupe d’états ValidationStates :

Nom de l’état Description

Valid

Aspect du contrôle TextBox lorsqu’il est valide.

InvalidUnfocused

Aspect du contrôle TextBox lorsqu’il n’est pas valide et ne possède pas le focus clavier.

InvalidFocused

Aspect du contrôle TextBox lorsqu’il n’est pas valide et possède le focus clavier.

tip noteConseil :

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 désactiver l’enregistrement de l’état, cliquez sur ****Indicateur du mode d’enregistrement ****Ee371168.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,Expression.40).png ou sélectionnez Base dans le panneau États. 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 et Padding. Pour plus d’informations, voir Véhiculer des propriétés d'objet vers le modèle.

Pour convertir des objets en contrôle TextBox

L’image suivante est une maquette de conception détaillée d’un objet TextBox  :

TextBox

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 texte personnalisée à l’aide du modèle de contrôle TextBox .

  1. 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"/>
    
  2. 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="Lorem" VerticalAlignment="Center"/>
    </Grid>
    
  3. Ajoutez une balise Grid de fermeture (</Grid>) après le code que vous venez de coller.

  4. 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 TextBox, puis cliquez sur OK.

  5. Générez votre projet (Ctrl+Maj+B) et testez-le en appuyant sur F5.

Pour plus d’informations sur l’application de votre nouveau modèle TextBox à d’autres objets TextBox , voir Appliquer ou supprimer une ressource.

Références

Vous trouverez des informations détaillées sur les propriétés et événements du contrôle TextBox de Silverlight dans la Galerie de contrôles Silverlight Ee371168.xtlink_newWindow(fr-fr,Expression.40).png sur MSDN.

Voir aussi

Concepts

Conseils de conception de styles pour les contrôles Silverlight courants
Application d’un style à un contrôle prenant en charge les modèles
Dessiner du texte

Copyright © 2011 Microsoft Corporation. Tous droits réservés.