Partager via

Conseils de style pour le contrôle Button

  • Article

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

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

Ee341364.c01e5314-5b29-4283-a483-b0a1cb3b59f6(fr-fr,Expression.40).png

États d’un contrôle Button

Vous pouvez afficher les états possibles du contrôle Button dans le panneau États lorsque vous modifiez un modèle Button . Par défaut, le contrôle Button peut être dans l’un des quatre états suivants du groupe d’états CommonStates :

Nom de l’état Description

Normal

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

MouseOver

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

Pressed

Aspect du contrôle Button lorsque l’utilisateur clique dessus ou lorsque le contrôle est sélectionné et que l’utilisateur appuie sur Entrée ou sur Espace.

Disabled

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

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

Nom de l’état Description

Unfocused

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

Focused

Aspect du contrôle Button lorsqu’il possède un focus clavier. Un utilisateur pourrait, par exemple, appuyer sur la touche Tabulation pour parcourir les objets d’une application jusqu’à ce que le focus clavier soit sur le contrôle Button .
tip noteConseil :

Un groupe d’états contient les états visuels qui font partie de la même catégorie logique, et qui ne peuvent pas être affichés simultanément. Par exemple, le groupe CommonStates comprend des états associés à l’interaction utilisateur avec un périphérique d’entrée tel que la souris. Seul un état d’un groupe d’états peut être affiché à la fois, mais un état provenant d’un seul groupe peut être affiché en même temps qu’un état d’un autre groupe d’états.

Lorsque vous sélectionnez un état, l'enregistrement d'état est activé et les éventuelles modifications que vous apportez seront enregistrées pour cet état. Pour désactiver l’enregistrement de l’état, cliquez sur l’option Indicateur du mode d’enregistrement Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,Expression.40).png sur la planche graphique, ou sélectionnez Base dans le panneau États.

Pour plus d’informations, voir Définition d'états visuels différents pour un contrôle.

Liaison de modèle

Vous pouvez lier par modèle les propriétés Background, BorderBrush, Foreground, BorderThickness ou Padding. Pour plus d’informations, voir Véhiculer des propriétés d'objet vers le modèle.

Pour convertir le texte en contrôle Button

Les images suivantes sont une conception complète (comp) d’un bouton créé qui comprend les états Normal , MouseOver , Pressed , Disabled , et Focused  :

Normal

Bouton à l'état Normal

MouseOver

Bouton à l'état MouseOver

Pressed

Bouton à l'état Enfoncé

Disabled

Bouton à l'état Désactivé

Focused

Bouton à l'état Actif

NoteRemarque :

Il est important de noter que les graphiques précédents ne sont pas encore des contrôles Button , mais une conception graphique qui peut être convertie en contrôles Button .

La procédure suivante utilise le code XAML dans l’étape 2 de la procédure suivante, qui correspond à l’état Normal dans les graphiques précédents.

tip noteConseil :

Cliquez sur Mode fractionné pour afficher les modifications en modes Création et Code lorsque vous suivez cette procédure.

  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 MinWidth="79" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D" RadiusX="3" RadiusY="3"/>
   <TextBlock Foreground="LightGray" Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

  3. Ajoutez une balise de fermeture Grid (</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 Bouton, puis sur OK.

    En mode Code, notez que le code que vous avez collé à l’étape précédente a été remplacé par celui pour un nouveau contrôle Button . En outre, Microsoft Expression Blend a changé le contrôle Button en modèle pour un nouveau style Button et a appliqué ce modèle à Bouton .

    Le contrôle TextBlock dans la composition possède un premier plan gris clair. Le nouveau style Button possède également un premier plan gris clair. OK est le contenu textuel du bouton précédent et du contrôle Button , et TextBlock dans le code précédent a été remplacé par un contrôle ContentPresenter avec les mêmes propriétés que le contrôle TextBlock d’origine.

  5. Pour ajouter des états au contrôle Button , procédez comme suit :

    1. Dans le panneau Objets et chronologie, cliquez sur Rectangle.

    2. Dans le panneau États, cliquez sur MouseOver.

    3. Dans le panneau Propriétés, définissez Remplir et Trait sur #FF808080.

    4. Revenez au panneau États, puis cliquez sur Base pour arrêter l’enregistrement de l’état.

  6. Pour appliquer les mêmes propriétés à l’état Pressed , dans le panneau États, cliquez avec le bouton droit sur MouseOver, cliquez sur Copier l’état vers, puis cliquez sur Pressed.

  7. Pour décaler le texte du bouton lorsque le bouton est enfoncé, procédez comme suit :

    1. Dans le panneau États, cliquez sur Pressed.

    2. Dans le panneau Objets et chronologie, cliquez sur Zone de contenu.

    3. Dans la catégorie Transformer de l’onglet Déplacer du panneau Propriétés, définissez X et Y sur 1 .

    4. Revenez au panneau États, puis cliquez sur Base pour arrêter l’enregistrement de l’état.

  8. Dans le panneau États, cliquez sur Normal, sur Ajouter une transition, puis sur Normal à MouseOver. Dans la zone Durée de la transition, tapez 0,2 , puis cliquez sur Base.

  9. La composition comprend un rectangle bleu autour du bouton lorsque ce dernier dispose de l’état Focused . Pour créer le rectangle, ajoutez un objet Rectangle avec l’état Focused sélectionné. C’est ce que l’on appelle « dessin dans l’état », ce qui signifie que le nouvel objet est visible uniquement dans l’état dans lequel vous avez dessiné l’objet. Pour créer le rectangle dans l’état Focused , dans le panneau États, cliquez sur Focused, puis double-cliquez sur l’outil Rectangle du volet Outils pour créer le nouvel objet Rectangle .

  10. L’étape suivante consiste à définir les propriétés du nouveau rectangle. Les propriétés doivent être modifiées dans Base , pas dans l’état Focused . Toutefois, le rectangle est actuellement transparent et ne sera pas visible dans Base . Cliquez sur Indicateur de mode d’enregistrementEe341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,Expression.40).png pour rendre le rectangle visible. Notez que le nouveau rectangle ( rectangle1 ) est toujours sélectionné dans le panneau Objets et chronologie. Dans le panneau Propriétés, définissez les propriétés suivantes pour rectangle1 :

    • Remplir    Défini sur Aucun pinceau.

    • Couleur du trait    Défini sur #FF00C0FF.

    • RadiusX    Défini sur 2.

    • RadiusY    Défini sur 2.

    • Margin    Définissez Left sur 1, Right sur 1, Top sur 1, et Bottom sur 1.

  11. Si vous souhaitez éventuellement ajouter de l’interactivité au rectangle tandis que le bouton dispose de l’état Focused , vous pouvez créer une animation permanente comme suit. Dans le cas contraire, passez à l’étape 12.

    1. Dans le panneau États, sélectionnez l’état Focused.

    2. Dans le panneau Objets et chronologie, cliquez sur Afficher la chronologie.

    3. Faites glisser l’image clé vers la marque 2 secondes, puis déplacez la tête de lecture de chronologie à 2,2 secondes.

    4. Dans le panneau États, sélectionnez rectangle1.

    5. Dans l’onglet Apparences du panneau Propriétés, définissez Opacité sur 0.

    6. Dans le panneau Objets et chronologie, déplacez la tête de lecture de chronologie vers 0 seconde puis sélectionnez rectangle1. Dans l’onglet Redimensionner du panneau Propriétés, définissez X et Y sur 5.

    7. Dans le panneau Objets et chronologie, cliquez sur l’image clé à 2. Dans la catégorie Accélération du panneau Propriétés, définissez EasingFunction sur Sortie quartique.

    8. Dans le panneau Objets et chronologie, juste au-dessous de l’onglet, cliquez sur le nom de l’état (dans ce cas, Focused). Dans l’onglet Propriétés communes du panneau Propriétés, définissez RepeatBehavior sur Toujours.

  12. Générez votre projet (CTRL + MAJ + B) puis testez-le en appuyant sur F5.

Pour convertir des objets en contrôle Button

Les images suivantes sont une composition d’un bouton créé par un concepteur qui comprend les états Normal , MouseOver , Pressed , Disabled , et Focused  :

Normal

Graphique bouton Normal

MouseOver

Graphique bouton MouseOver

Pressed

Graphique bouton Enfoncé

Disabled

Graphique bouton Désactivé

Focused

Graphique bouton Actif

NoteRemarque :

Il est important de noter que les graphiques précédents ne sont pas encore des contrôles Button , mais une conception graphique qui peut être convertie en contrôles Button .

La procédure suivante utilise le code XAML dans l’étape 2 de la procédure suivante, qui correspond à l’état Normal dans les graphiques précédents.

tip noteConseil :

Cliquez sur Mode mixte pour afficher les modifications en modes Création et Code lorsque vous suivez cette procédure.

  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 MinWidth="79" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D" RadiusX="3" RadiusY="3"/>
   <TextBlock Foreground="LightGray" Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

  3. Ajoutez une balise de fermeture Grid (</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 Bouton, puis sur OK.

    En mode Code, notez que le code que vous avez collé à l’étape précédente a été remplacé par celui pour un nouveau contrôle Button . En outre, Expression Blend a changé le contrôle Button en modèle pour un nouveau style Button et a appliqué ce modèle à Bouton .

  5. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur Contenu, puis cliquez sur Couper.

  6. Rétablissez l’étendue à UserControl, cliquez avec le bouton droit sur UserControl, puis cliquez sur Coller.

  7. Pour ajouter des états au contrôle Button , procédez comme suit :

    1. Dans le panneau Objets et chronologie, cliquez sur Rectangle.

    2. Dans le panneau États, cliquez sur MouseOver.

    3. Dans le panneau Propriétés, définissez Remplir et Trait sur #FF808080.

    4. Revenez au panneau États, puis cliquez sur Base pour arrêter l’enregistrement de l’état.

  8. Pour appliquer les mêmes propriétés à l’état Pressed , dans le panneau États, cliquez avec le bouton droit sur MouseOver, cliquez sur Copier l’état vers, puis cliquez sur Pressed.

  9. Pour décaler le texte du bouton lorsque le bouton est enfoncé, procédez comme suit :

    1. Dans le panneau États, cliquez sur Pressed.

    2. Dans le panneau Objets et chronologie, cliquez sur Zone de contenu.

    3. Dans la catégorie Transformer de l’onglet Déplacer du panneau Propriétés, définissez X et Y sur 1 .

    4. Revenez au panneau États, puis cliquez sur Base pour arrêter l’enregistrement de l’état.

  10. Dans le panneau États, cliquez sur Normal, sur Ajouter une transition, puis sur MouseOver à Normal.

  11. Dans la zone Durée de la transition, tapez 0,2 , puis cliquez sur Base.

    La composition comprend un rectangle bleu autour du bouton lorsque ce dernier dispose de l’état Focused . Pour créer le rectangle, ajoutez un objet Rectangle avec l’état Focused sélectionné. C’est ce que l’on appelle « dessin dans l’état », ce qui signifie que le nouvel objet est visible uniquement dans l’état dans lequel vous avez dessiné l’objet. Pour créer le rectangle dans l’état Focused , dans le panneau États, cliquez sur Focused, puis double-cliquez sur l’outil Rectangle du panneau Outils pour créer l’objet Rectangle .

  12. L’étape suivante consiste à définir les propriétés du nouveau rectangle. Les propriétés doivent être modifiées dans Base , pas dans l’état Focused . Toutefois, le rectangle est actuellement transparent et ne sera pas visible dans Base . Cliquez sur Indicateur de mode d’enregistrement Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,Expression.40).png pour rendre le rectangle visible. Notez que le nouveau rectangle ( rectangle1 ) est toujours sélectionné dans le panneau Objets et chronologie. Dans le panneau Propriétés, définissez les propriétés suivantes pour rectangle1 :

    • Remplir    Défini sur Aucun pinceau.

    • Couleur du trait    Défini sur #FF00C0FF.

    • Margin    Définissez Left sur 1, Right sur 1, Top sur 1 et Bottom sur 1.

  13. Si vous souhaitez éventuellement ajouter de l’interactivité au rectangle tandis que le bouton dispose de l’état Focused , vous pouvez créer une animation permanente comme suit. Dans le cas contraire, passez à l’étape 14.

    1. Dans le panneau États, sélectionnez l’état Focused.

    2. Dans le panneau Objets et chronologie, cliquez sur Afficher la chronologie.

    3. Faites glisser l’image clé vers la marque 2 secondes, puis déplacez la tête de lecture de chronologie à 2,2 secondes.

    4. Dans le panneau États, sélectionnez rectangle1, puis, dans l’onglet Apparences du panneau Propriétés, définissez Opacité sur 0.

    5. Dans le panneau Objets et chronologie, déplacez la tête de lecture de chronologie vers 0 seconde puis sélectionnez rectangle1. Dans l’onglet Redimensionner du panneau Propriétés, définissez X et Y sur 5.

    6. Dans le panneau Objets et chronologie, cliquez sur l’image clé à 2. Dans la catégorie Accélération du panneau Propriétés, définissez EasingFunction sur Quartic Out.

    7. Dans le panneau Objets et chronologie, juste au-dessous de l’onglet, cliquez sur le nom de l’état (dans ce cas, Focused).

    8. Dans l’onglet Propriétés communes du panneau Propriétés, définissez RepeatBehavior sur Forever.

  14. Générez votre projet (CTRL + MAJ + B) puis testez-le en appuyant sur F5.

Pour plus d’informations sur l’application de votre nouveau modèle Button à d’autres objets Button , 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 Silverlight  Button dans la Galerie des contrôles Silverlight Ee341364.xtlink_newWindow(fr-fr,Expression.40).png sur MSDN.

Voir aussi

Tâches

Créer un contrôle à partir d’objets existants

Concepts

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

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