Concevoir vos propres comportements avec Silverlight
Aucun commentaire
Si vous avez déjà utilisé Expression Blend, il est fort possible que vous ayez utilisé les comportements au cours de vos projets. Ils sont bénéfiques à plusieurs niveaux : d'une part, ils permettent d'ajouter de l'interaction sans coder en C# ou VB ; d'autre part, ils apportent une aide précieuse lorsqu'il est important de découpler la vue, le modèle et la vue-modèle. Pour finir, ils jouent un rôle essentiels en production puisqu'ils sont développés dans un objectif de réutilisation et qu'ils sont très simplement paramétrables dans Expression Blend.
Il existe deux grandes familles de comportements, les comportements simples et les comportements d'action déclenchée. Les comportements simples sont représentés par une icône d'engrenage, MouseDragElementBehavior, que vous trouverez dans le panneau assets, est de ce type. Dès lors que vous le déposer sur l'objet, celui-ci acquière une capacité supplémentaire directement accessible. Au contraire les comportements déclenchés n'agissent que lorsqu'un événement est diffusé. Ils sont identifiés par l'icône de l'engrenage surmontée d'une flèche de lecture.
Pour créer un nouveau comportement, il suffit dans Blend d'ajouter un élément dans un projet de type Behavior ou Action (via le menu Add Item...). Nous allons créer un comportement permettant de créer la copie visuelle d'un objet. Cela nous permettra de générer un effet de réflexion comme montré dans le projet Silverlight ci-dessous.
Créez un nouveau projet et ajoutez un comportement de type Action. Faites-le hériter de la classe TargetedTriggerAction. Cela sera pratique car nous pourrons cibler un objet dont on souhaite répliquer le visuel. Vous obtenez le code ci-dessous :
public class SnapshotAction : TargetedTriggerAction<UIElement> { public SnapshotAction() { } protected override void Invoke(object o) { } }
C'est la méthode surchargée Invoke qui nous intéresse. Celle-ci sera exécutée chaque fois qu'un événement au choix sera diffusé. Nous allons maintenant récupérer une image du composant ciblé puis l'appliquée sur le composant possédant le comportement.
protected override void Invoke(object o) { //on déclare une nouvelle image en écriture WriteableBitmap Wb; //on l'instancie en lui passant l'objet //elle doit créer un instantanné Wb = new WriteableBitmap(this.Target, null); //on crée un nouveau pinceau d'image ImageBrush Ib = new ImageBrush(); Ib.AlignmentX = AlignmentX.Left; Ib.Stretch = Stretch.None; //on affecte l'image binaire de l'instantanné à //la propriété ImageSource du pinceau d'image Ib.ImageSource = Wb; //Ensuite on teste le type de l'objet ciblé et on affecte //la bonne propriété en fonction de ce dernier if (AssociatedObject is Shape) ((Shape)AssociatedObject).Fill = Ib; else if (AssociatedObject is Panel) ((Panel)AssociatedObject).Background = Ib; else if (AssociatedObject is Control) ((Control)AssociatedObject).Background = Ib; //nous pourrions utiliser un peu de réflexion pour améliorer ce test }
La propriété Target du comportement correspond à l'objet ciblé par ce dernier. La propriété AssociatedObject fait quant à elle référence à l'objet sur lequel est déposé le composant. Dans notre cas, nous testons simplement le type de cet objet pour lui appliquer la capture bitmap en tant que pinceau de remplissage.
Voilà le tour est joué, il suffit de compiler le projet une première fois pour accéder au comportement dans le panneau assets, puis de déposer ce dernier sur une instance de Shape (par exemple) comme indiqué sur la figure ci-dessous.
Le comportement finalisé est téléchargeable à l'adresse suivante. J'y ai ajouté la possibilité de déclencher la réplication bitmap en mode automatique via l'utilisation d'un DispatcherTimer. Il est également possible de modifier la cadence de rafraichissement pour éviter les pertes de performances (voir figure ci-dessous).
Pour finir, sachez qu'avec Silverlight 4, il est désormais possible de créer des comportements intégrant directement le pattern commande. Celui-ci est directement lié au modèle de conception MVVM mais cela est une autre histoire.
