Share via

Conseils de conception de styles pour le contrôle Button des contrôles Silverlight dans Blend

  • Article

JJ170239.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(fr-fr,VS.120).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 :

JJ170239.c01e5314-5b29-4283-a483-b0a1cb3b59f6(fr-fr,VS.120).png

États d’un contrôle Bouton

Vous pouvez afficher les états possibles du contrôle Button dans le panneau États lorsque vous modifiez un modèle de 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 aussi ê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 le focus clavier.

Focused

Aspect du contrôle Button 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 Button.

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 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 de mode d'enregistrement JJ170239.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,VS.120).png sur la planche graphique, ou sélectionnez Base dans le panneau Etats.

Pour plus d'informations, consultez Définition d'états visuels différents pour un contrôle dans Blend.

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 le texte en un contrôle Button

Les images suivantes sont une conception complète (comp) d’un bouton qui inclut 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

Notes

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.

Conseil

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 Transformer en Contrôle, cliquez sur Bouton, puis cliquez 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, Blend for Visual Studio a fait du contrôle Button un modèle pour un nouveau style Button et l’a appliqué à Button.

    Le contrôle TextBlock dans la composition possède un premier plan gris clair. Le nouveau style de Button a é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 ContentPresenter avec les mêmes propriétés qu' TextBlockd'origine.

  5. Pour ajouter des états au contrôle Button, suivez ces étapes :

    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 Brosser 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é, suivez ces étapes :

    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 MouseOver à Normal. Dans la zone Durée de la transition, tapez .2, puis cliquez sur Base.

  9. Dans l'état Focused, la composition inclut un rectangle bleu autour du bouton. Pour créer le rectangle, ajoutez un nouvel objet Rectangle avec l’état Focused sélectionné. Ce procédé s’appelle « dessin dans l’état », ce qui signifie que le nouvel objet est uniquement visible 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.

  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. Pour maintenir la visibilité du rectangle, cliquez sur **Indicateur de mode d’enregistrement ** JJ170239.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,VS.120).png. 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éfinit sur #FF00C0FF.

    • RadiusX   Définit sur 2.

    • RadiusY   Définit sur 2.

    • Marge   Définit avec Gauche sur 1, Droite sur 1, Haut sur 1, et Bas sur 1.

  11. Éventuellement, si vous souhaitez ajouter des interactivités au rectangle quand il est dans l'état Focused, créez une animation statique en procédant comme suit. Si ce n'est pas le cas, passez à l'étape 12.

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

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

    3. Faites glisser l'image clé sur la marque 2-seconde, puis déplacez la tête de lecture de la chronologie à 2,2 secondes.

    4. Dans le panneau États, cliquez sur rectangle1.

    5. Dans la catégorie Apparence 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 la chronologie sur 0 secondes et sélectionnez rectangle1. Dans la catégorie Transformer du panneau Echelle, affectez à X et à Y la valeur 5.

    7. Dans le panneau Objets et chronologie, sélectionnez 2 avec l'image clé. Dans le panneau Propriétés, sous la catégorie Accélération, définissez EasingFunction à la valeur Quartique.

    8. Dans le panneau Objets et chronologie, exactement sous l'onglet, cliquez sur le nom d'état (dans ce cas, Actif). Dans le panneau Propriétés, sous l'onglet Propriétés communes, définissez RepeatBehavior sur Toujours.

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

Pour convertir des objets en contrôle Button

Les images suivantes sont une conception complète (comp) d’une case d’option créée par un designer qui inclut 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

Notes

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.

Conseil

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 Transformer en Contrôle, cliquez sur Bouton, puis cliquez 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, Blend a fait du contrôle Button un modèle pour un nouveau style Button et l’a appliqué à Button.

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

  6. Renvoie la portée à UserControl, cliquez avec le bouton droit sur UserControl, puis cliquez sur Collerensuite.

  7. Pour ajouter des états au contrôle Button, suivez ces étapes :

    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 Brosser 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é, suivez ces étapes :

    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 conception complète inclut un rectangle bleu autour de la case d’option lorsque l’état de celle-ci est Focused. Pour créer le rectangle, ajoutez un nouvel objet Rectangle avec l’état Focused sélectionné. Ce procédé s’appelle « dessin dans l’état », ce qui signifie que le nouvel objet est uniquement visible 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. Pour maintenir la visibilité du rectangle, cliquez sur **Indicateur de mode d’enregistrement ** JJ170239.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,VS.120).png. 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éfinit sur Aucun pinceau.

    • Couleur du trait   Définit sur #FF00C0FF.

    • Marge   Définit avec Gauche sur 1, Droite sur 1, Haut sur 1, et Bas sur 1.

  13. Éventuellement, si vous souhaitez ajouter plus d'interactivité au rectangle quand il est dans l'état Focused, créez une animation statique en procédant comme suit. Si ce n'est pas le cas, passez à l'étape 14.

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

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

    3. Faites glisser l'image clé sur la marque 2-seconde, puis déplacez la tête de lecture de la chronologie à 2,2 secondes.

    4. Dans le panneau États, sélectionnez rectangle1, puis, sous l'onglet Apparences dans le panneau Propriétés, définissez Opacité à 0.

    5. Dans le panneau Objets et chronologie, déplacez la tête de lecture de la chronologie sur 0 secondes et sélectionnez rectangle1. Dans la catégorie Transformer du panneau Echelle, affectez à X et à Y la valeur 5.

    6. Dans le panneau Objets et chronologie, sélectionnez 2 avec l'image clé. Dans le panneau Propriétés, sous la catégorie Accélération, définissez EasingFunction à la valeur Quartique extérieur.

    7. Dans le panneau Objets et chronologie, exactement sous l'onglet, cliquez sur le nom d'état (dans ce cas, Actif).

    8. Dans le panneau Propriétés, sous l'onglet Propriétés communes, définissez RepeatBehavior sur Toujours.

  14. 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 Button à d’autres objets Button, 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 Button de Silverlight dans la Galerie de contrôles Silverlight sur MSDN.

Voir aussi

Tâches

Essayez ! Créer un bouton de substitution (prise en charge de WPF dans Blend)

Concepts

Conseils de conception de styles pour les contrôles Silverlight courants dans Blend

SimpleButton

Définition d'un style pour un contrôle prenant en charge les modèles dans Blend