Procédure pas à pas : création d'un bouton à l'aide de Microsoft Expression Blend

Cette procédure pas à pas vous guide tout au long du processus de création d’un bouton personnalisé WPF à l’aide de Microsoft Expression Blend.

L’illustration suivante montre le bouton personnalisé que vous allez créer.

Convertir une forme en bouton

Dans la première partie de cette procédure pas à pas, vous créez l’apparence personnalisée du bouton personnalisé. Pour ce faire, vous devez d’abord convertir un rectangle en un bouton. Vous ajoutez ensuite des formes supplémentaires au modèle du bouton, en créant un bouton de recherche plus complexe. Pourquoi ne pas commencer par un bouton normal et le personnaliser ? Étant donné qu’un bouton a des fonctionnalités intégrées dont vous n’avez pas besoin ; pour les boutons personnalisés, il est plus facile de commencer par un rectangle.

Pour créer un projet dans Expression Blend

1. Démarrer le mélange d’expressions. (Cliquez sur Démarrez, pointez sur Tous les programmes, pointez sur Microsoft Expression, puis cliquez sur Microsoft Expression Blend.)

2. Optimisez l’application si nécessaire.

3. Dans le menu Fichier, cliquez sur Nouveau projet.

4. Sélectionnez Application standard (.exe).

5. Nommez le projet CustomButton et appuyez sur OK.

À ce stade, vous disposez d’un projet WPF vide. Vous pouvez appuyer sur F5 pour exécuter l’application. Comme prévu, l’application se compose uniquement d’une fenêtre vide. Ensuite, vous créez un rectangle arrondi et convertissez-le en un bouton.

Pour convertir un rectangle en bouton

1. Définissez la propriété Arrière-plan de la fenêtre sur noir : sélectionnez la fenêtre, cliquez sur l’onglet Propriétés, puis définissez la propriété Blacksur Background .

   

2. Dessinez un rectangle à peu près la taille d’un bouton sur la fenêtre : sélectionnez l’outil rectangle dans le panneau d’outils de gauche et faites glisser le rectangle sur la fenêtre.

   

3. Arrondissez les angles du rectangle : faites glisser les points de contrôle du rectangle ou définissez directement les propriétés et RadiusY les RadiusX points de contrôle. Définissez les valeurs de RadiusX et RadiusY sur 20.

   

4. Modifiez le rectangle en un bouton : sélectionnez le rectangle. Dans le menu Outils , cliquez sur Bouton Créer.

   

5. Spécifiez l’étendue du style/modèle : une boîte de dialogue semblable à ce qui suit s’affiche.

   

   Pour le nom de la ressource (clé), sélectionnez Appliquer à tous. Cela permet d’appliquer le style et le modèle de bouton résultants à tous les objets qui sont des boutons. Pour Définir dans, sélectionnez Application. Cela rend le style et le modèle de bouton résultants ont une étendue sur l’ensemble de l’application. Lorsque vous définissez les valeurs dans ces deux zones, le style de bouton et le modèle s’appliquent à tous les boutons de l’application entière et tout bouton que vous créez dans l’application utilisera ce modèle par défaut.

Modifier le modèle de bouton

Vous disposez maintenant d’un rectangle qui a été remplacé par un bouton. Dans cette section, vous allez modifier le modèle du bouton et personnaliser davantage son apparence.

Pour modifier le modèle de bouton pour modifier l’apparence du bouton

1. Accédez à la vue Modifier le modèle : pour personnaliser davantage l’apparence de notre bouton, nous devons modifier le modèle de bouton. Ce modèle a été créé lorsque nous avons converti le rectangle en un bouton. Pour modifier le modèle de bouton, cliquez avec le bouton droit sur le bouton, puis sélectionnez Modifier les composants de contrôle (modèle), puis Modifiez le modèle.

   

   Dans l’éditeur de modèle, notez que le bouton est maintenant séparé en un Rectangle et le ContentPresenter. Il ContentPresenter est utilisé pour présenter du contenu dans le bouton (par exemple, la chaîne « Button »). Le rectangle et ContentPresenter sont disposés à l’intérieur d’un Grid.

   

2. Remplacez les noms des composants du modèle : cliquez avec le bouton droit sur le rectangle dans l’inventaire du modèle, remplacez le Rectangle nom de « [Rectangle] » par « outerRectangle » et remplacez « [ContentPresenter] » par « myContentPresenter ».

   

3. Modifiez le rectangle de sorte qu’il soit vide à l’intérieur (comme un anneau) : sélectionnez outerRectangle et définissez Fill sur « Transparent » et StrokeThickness sur 5.

   

   Définissez ensuite la Stroke couleur du modèle. Pour ce faire, cliquez sur la petite zone blanche en regard du trait, sélectionnez CustomExpression et tapez « {TemplateBinding Background} » dans la boîte de dialogue.

   

4. Créez un rectangle interne : Maintenant, créez un autre rectangle (nommez-le « innerRectangle ») et positionnez-le de manière symétrique à l’intérieur de outerRectangle . Pour ce type de travail, vous voudrez probablement effectuer un zoom pour agrandir le bouton dans la zone d’édition.

   Remarque

   Votre rectangle peut être différent de celui de la figure (par exemple, il peut avoir des angles arrondis).

   

5. Déplacer ContentPresenter en haut : à ce stade, il est possible que le texte « Bouton » ne soit plus visible. Si c’est le cas, c’est parce que innerRectangle est sur le myContentPresenter. Pour résoudre ce problème, faites glisser myContentPresenter sous innerRectangle. Repositionnez les rectangles et myContentPresenter pour ressembler à ce qui suit.

   Remarque

   Vous pouvez également positionner myContentPresenter en haut en cliquant dessus avec le bouton droit et en appuyant sur Envoyer vers l’avant.

   

6. Modifiez l’apparence de innerRectangle : définissez les RadiusXvaleurs , RadiusYet StrokeThickness définissez les valeurs sur 20. En outre, définissez l’arrière-plan Fill du modèle à l’aide de l’expression personnalisée « {TemplateBinding Background} » ) et définissez Stroke sur « transparent ». Notez que les paramètres de l’élément Fill innerRectangle Strokesont opposés à ceux de outerRectangle.

   

7. Ajouter une couche de verre sur le dessus : la dernière pièce de personnalisation de l’apparence du bouton consiste à ajouter une couche de verre sur le dessus. Cette couche de verre se compose d’un troisième rectangle. Étant donné que le verre couvrira l’intégralité du bouton, le rectangle de verre est similaire en dimensions à l’extérieurRectangle. Par conséquent, créez le rectangle en effectuant simplement une copie de l’externeRectangle. Mettez en surbrillance outerRectangle et utilisez Ctrl+C et Ctrl+V pour effectuer une copie. Nommez ce nouveau rectangle « glassCube ».

8. Repositionner glassCube si nécessaire : si glassCube n’est pas déjà positionné afin qu’il couvre l’intégralité du bouton, faites-le glisser en position.

9. Donnez à glassCube une forme légèrement différente de externeRectangle : modifiez les propriétés de glassCube. Commencez par modifier les propriétés et RadiusY les RadiusX valeurs 10 et StrokeThickness 2.

   

10. Faites de glassCube ressemble à du verre : définissez l’aspect Fill en verre à l’aide d’un dégradé linéaire de 75 % opaque et alterne entre la couleur Blanc et Transparent sur 6 intervalles espacés environ uniformément. Il s’agit de ce qui permet de définir les arrêts de dégradé sur :

    • Point de dégradé 1 : Blanc avec la valeur Alpha de 75 %

    • Point de dégradé 2 : transparent

    • Dégradé 3 : Blanc avec une valeur Alpha de 75 %

    • Point de dégradé 4 : transparent

    • Point de dégradé 5 : Blanc avec la valeur Alpha de 75 %

    • Point de dégradé 6 : transparent

    Cela crée un look de verre « ondulé ».

    

11. Masquer la couche de verre : Maintenant que vous voyez à quoi ressemble la couche en verre, accédez au volet Apparence du panneau Propriétés et définissez l’opacité sur 0 % pour la masquer. Dans les sections à venir, nous allons utiliser des déclencheurs et des événements de propriété pour afficher et manipuler la couche de verre.

    

Personnaliser le comportement du bouton

À ce stade, vous avez personnalisé la présentation du bouton en modifiant son modèle, mais le bouton ne réagit pas aux actions utilisateur, car les boutons classiques le font (par exemple, en modifiant l’apparence sur le dessus, en recevant le focus et en cliquant.) Les deux procédures suivantes montrent comment générer des comportements comme ceux-ci dans le bouton personnalisé. Nous allons commencer par des déclencheurs de propriété simples, puis ajouter des déclencheurs d’événements et des animations.

Pour définir des déclencheurs de propriété

1. Créer un déclencheur de propriété : avec glassCube sélectionné, cliquez sur + Propriété dans le volet Déclencheurs (voir la figure qui suit l’étape suivante). Cela crée un déclencheur de propriété avec un déclencheur de propriété par défaut.

2. Faites de IsMouseOver la propriété utilisée par le déclencheur : remplacez la propriété IsMouseOverpar . Cela rend le déclencheur de propriété activé lorsque la IsMouseOver propriété est true (lorsque l’utilisateur pointe vers le bouton avec la souris).

   

3. IsMouseOver déclenche l’opacité de 100 % pour glassCube : notez que l’enregistrement du déclencheur est activé (voir la figure précédente). Cela signifie que les modifications que vous apportez aux valeurs de propriété de glassCube pendant que l’enregistrement est activé deviendront une action qui se produit lorsque IsMouseOver c’est true. Lors de l’enregistrement, remplacez le Opacity glassCube par 100 %.

   

   Vous avez maintenant créé votre premier déclencheur de propriété. Notez que le panneau Déclencheurs de l’éditeur a enregistré la Opacity modification de 100 %.

   

   Appuyez sur F5 pour exécuter l’application, puis déplacez le pointeur de la souris sur le bouton et le désactivez. Vous devriez voir la couche de verre apparaître lorsque vous placez la souris sur le bouton et disparaissez lorsque le pointeur quitte.

4. IsMouseOver déclenche un changement de valeur de trait : nous allons associer d’autres actions au IsMouseOver déclencheur. Pendant que l’enregistrement se poursuit, basculez votre sélection de glassCube vers outerRectangle. Définissez ensuite la Stroke valeur outerRectangle sur l’expression personnalisée de « {DynamicResource {x :Static SystemColors.HighlightBrushKey}} ». Cela définit la Stroke couleur de surbrillance classique utilisée par les boutons. Appuyez sur F5 pour afficher l’effet lorsque vous placez la souris sur le bouton.

   

5. IsMouseOver déclenche du texte flou : nous allons associer une action supplémentaire au IsMouseOver déclencheur de propriété. Faites apparaître le contenu du bouton un peu flou lorsque le verre apparaît dessus. Pour ce faire, nous pouvons appliquer un flou BitmapEffect au ContentPresenter (myContentPresenter).

   

   Remarque

   Pour renvoyer le panneau Propriétés à ce qu’il était avant d’avoir effectué la recherche BitmapEffect, effacez le texte de la zone de recherche.

   À ce stade, nous avons utilisé un déclencheur de propriété avec plusieurs actions associées pour créer un comportement de mise en surbrillance lorsque le pointeur de la souris entre et quitte la zone du bouton. Un autre comportement typique d’un bouton consiste à mettre en surbrillance lorsqu’il a le focus (comme après son clic). Nous pouvons ajouter ce comportement en ajoutant un autre déclencheur de propriété pour la IsFocused propriété.

6. Créer un déclencheur de propriété pour IsFocused : à l’aide de la même procédure que pour IsMouseOver (voir la première étape de cette section), créez un autre déclencheur de propriété pour la IsFocused propriété. Pendant que l’enregistrement du déclencheur est activé, ajoutez les actions suivantes au déclencheur :

   • glassCube obtient une Opacity valeur de 100 %.

   • outerRectangle obtient une valeur d’expression Stroke personnalisée de « {DynamicResource {x :Static SystemColors.HighlightBrushKey}} ».

Lors de la dernière étape de cette procédure pas à pas, nous allons ajouter des animations au bouton. Ces animations seront déclenchées par des événements, en particulier les événements et Click les MouseEnter événements.

Pour utiliser des déclencheurs d’événements et des animations pour ajouter une interactivité

1. Créer un déclencheur d’événement MouseEnter : ajoutez un nouveau déclencheur d’événement et sélectionnez-le MouseEnter comme événement à utiliser dans le déclencheur.

   

2. Créez une animation chronologie : Ensuite, associez une animation chronologie à l’événementMouseEnter.

   

   Une fois que vous avez appuyé sur OK pour créer une nouvelle chronologie, un panneau chronologie s’affiche et « L’enregistrement de chronologie est activé » est visible dans le panneau de conception. Cela signifie que nous pouvons commencer à enregistrer les modifications de propriété dans le chronologie (animer les modifications de propriété).

   Remarque

   Vous devrez peut-être redimensionner votre fenêtre et/ou panneaux pour afficher l’affichage.

   

3. Créez un image clé : pour créer une animation, sélectionnez l’objet que vous souhaitez animer, créez deux images clés ou plus sur le chronologie et, pour ces images clés, définissez les valeurs de propriété entre lesquelles l’animation doit être interpolée. La figure suivante vous guide tout au long de la création d’un image clé.

   

4. Réduisez glassCube à cette image clé : avec le deuxième image clé sélectionné, réduisez la taille du glassCube à 90 % de sa taille complète à l’aide de la transformation de taille.

   

   Appuyez sur F5 pour exécuter l'application. Déplacez le pointeur de la souris sur le bouton. Notez que la couche de verre se réduit en haut du bouton.

5. Créez un autre déclencheur d’événement et associez-y une autre animation : ajoutons une autre animation. Utilisez une procédure similaire à ce que vous avez utilisé pour créer l’animation du déclencheur d’événement précédent :

   1. Créez un déclencheur d’événement à l’aide de l’événement Click .

   2. Associez une nouvelle chronologie à l’événementClick.

      

   3. Pour cette chronologie, créez deux images clés, une à 0,0 seconde et la seconde à 0,3 secondes.

   4. Avec l’image clé à 0,3 secondes mise en surbrillance, définissez l’angle de transformation pivotée sur 360 degrés.

      

   5. Appuyez sur F5 pour exécuter l'application. Cliquez sur le bouton . Notez que la couche de verre tourne autour.

Conclusion

Vous avez terminé un bouton personnalisé. Vous l’avez fait à l’aide d’un modèle de bouton appliqué à tous les boutons de l’application. Si vous laissez le mode d’édition du modèle (voir la figure suivante) et créez d’autres boutons, vous verrez qu’ils ressemblent et se comportent comme votre bouton personnalisé plutôt que comme le bouton par défaut.

Appuyez sur F5 pour exécuter l'application. Cliquez sur les boutons et notez comment ils se comportent tous de la même façon.

N’oubliez pas que lors de la personnalisation du modèle, vous définissez la Fill propriété innerRectangleet la Stroke propriété outerRectangle sur l’arrière-plan du modèle ({TemplateBinding Background}). Pour cette raison, lorsque vous définissez la couleur d’arrière-plan des boutons individuels, l’arrière-plan que vous définissez sera utilisé pour ces propriétés respectives. Essayez de modifier les arrière-plans maintenant. Dans la figure suivante, différents dégradés sont utilisés. Par conséquent, bien qu’un modèle soit utile pour la personnalisation globale des contrôles comme le bouton, les contrôles avec des modèles peuvent toujours être modifiés pour être différents les uns des autres.

En conclusion, dans le processus de personnalisation d’un modèle de bouton, vous avez appris à effectuer les opérations suivantes dans Microsoft Expression Blend :

• Personnalisez l’apparence d’un contrôle.

• Définir des déclencheurs de propriété. Les déclencheurs de propriété sont très utiles, car ils peuvent être utilisés sur la plupart des objets, pas seulement sur les contrôles.

• Définissez des déclencheurs d’événement. Les déclencheurs d’événements sont très utiles, car ils peuvent être utilisés sur la plupart des objets, pas seulement sur les contrôles.

• Créez des animations.

• Divers : créez des dégradés, ajoutez BitmapEffects, utilisez des transformations et définissez les propriétés de base des objets.

Voir aussi

• Créer un bouton avec XAML
• Application d’un style et création de modèles
• Vue d’ensemble de l’animation
• Vue d’ensemble de la peinture avec des couleurs unies ou des dégradés
• Vue d’ensemble des effets bitmap