Le principe du visualBrush est super intéressant, c'est un pinceau avec la vue "live" d'un objet.
Un visualbrush peut être créé à partir d'une vidéo par exemple et être ensuite appliquée à n'importe quelle forme en conservant la vue actualisée de l'objet d'origine.
L'usage le plus fréquent du visualBrush est la création de reflet : il est en effet très simple de créer un visualbrush pour l'appliquer ensuite à une forme qui sera placée sous l'objet d'origine, à laquelle un flip vertical et un masque d'opacité seront appliqués.
Jusque là tout va bien, mais lorsque vous souhaitez utiliser un visualbrush à l'intérieur d'un template, les problèmes commencent. En effet, vous aurez la désagréable surprise, lors de la compilation de votre application... de ne rien voir. Le visualBrush est invisible.
Par défaut, lorsque vous cliquez sur "créer un visualBrush", le pinceau est créé dans les ressources de la fenêtre. Pour le rendre accessible au niveau du template, le visualbrush doit être intégré dans les ressources qui sont propres au template.
Le template d'un bouton pourrait ressembler à ça :
La grille contient la base du bouton dans une première ligne et son reflet dans une seconde ligne, les 2 ont une hauteur de 50%. Le ReflectRectangle qui affiche le visualBrush doit pouvoir accéder au VisualBrush. Pour cela le VisualBrush doit être présent dans les ressources de la grille. En bref, sélectionnez l'origine du visual brush (ici le ButtonBorder), dans le menu Tools / Make Brush Resource cliquez sur Make Visual Brush. Nommez le et, étape cruciale ! dans le menu déroulant sélectionnez la Grid... Si elle est disponible, vous avez de la chance, le plus dur est fait vous n'avez plus qu'à sélectionner le rectangle et à spécifier le visualBrush comme étant son remplissage.
Ah ba oui seulement le souci c'est que si aucune ressource n'a été créée au niveau de la Grid, vous n'aurez pas la possibilité d'y accéder. Donc il va falloir y mettre du votre !
Un simple couper/coller suffira : nous en étions donc au menu déroulant, sélectionnez la Window. Dans le panneau des ressources, faites un clic droit sur le visualBrush et cliquez sur "View XAML". Faites un couper (ctrl+X) et au niveau du template du bouton, faites un clic droit sur la Grid et cliquez sur "View XAML"
Maintenant un petit peu de code : insérez ces lignes comme ceci
<Grid x:Name="Grid">
<Grid.Resources>
ICI COLLEZ LE VISUALBRUSH
</Grid.Resources>
...
Il ne vous reste plus qu'à remplir le ReflectRectangle avec le VisualBrush. Toutes les interactions que vous mettrez en place au niveau du BorderButton (IsMouseOver, IsPressed etc...) seront automatiquement visible au niveau du reflet.
Petit projet ici : Download visualBrushTest.zip
Commentaires