[Silverlight] Création d’un contrôle déplaçable et redimensionnable

Cet article va vous présenter une solution que nous avons utilisée dans un projet afin que l’utilisateur puisse déplacer et redimensionner un élément. Bien sur ce n’est pas l’unique façon de faire et il est évident que d’autres techniques sont envisageables.

Préparatifs

Pour commencer, il faut placer un Canvas avec une largeur et une hauteur fixe dans la page qui est destinée à accueillir vos zones déplaçables.

Il est donc important de définir un parent lors de l’instanciation du UserControl qui est en fait notre zone déplaçable et redimensionnable. Maintenant que votre zone est instanciée il suffit de la faire apparaitre sur la page. Ce qui nous donne donc le code suivant :

Ici nous avons fait le choix de faire apparaitre une nouvelle zone lors du clic sur un bouton, mais bien entendu l’instanciation peut se faire sur un tout autre évènement. Précisons que cnvParent est le nom du Canvas que nous avons placé sur la page. Attention, la solution que nous vous proposons ici n’est fonctionnelle que si le parent est un Canvas. Néanmoins, il est possible de l’adapter pour d’autres types de parents.

Le déplacement du contrôle

Pour permettre à votre contrôle d’être déplacé selon les manipulations de l’utilisateur, il faut placer trois écouteurs d’évènements sur le rectangle qui est la zone à manipuler. Il s’agit des évènements MouseLeftButtonDown, MouseLeftButtonUp et MouseMove.

Les fonctions qui sont donc associées à ces écouteurs sont les suivantes :

Ces deux fonctions vont permettre de spécifier le début (évènement MouseLeftButtonDown) et la fin (évènement MouseLeftButtonUp)  du déplacement. Vous noterez la présence d’un booléen qui va permettre de savoir à tous moments si un déplacement est en cours ou non. Il permet d’éviter que votre zone suive votre curseur dès que vous survolez la zone même sans avoir initié un déplacement.

Et enfin, le code associé au déplacement en lui-même est le suivant (pour rappel il est associé à un évènement MouseMove)

Le redimensionnement du contrôle

Pour redimensionner le contrôle nous avons choisi de placer un petit rectangle dans le coin inférieur droit de notre zone déplaçable. Vous noterez que lorsque vous survolez ce contrôle, le curseur de votre souris change et se transforme en la double flèche que les utilisateurs connaissent bien comme étant le signe qu’un élément peut être redimensionné à l’aide de la souris. Afin de changer le curseur, il vous suffit de définir dans le xaml la propriété Cursor au rectangle qui symbolise le coin et de lui assigner une valeur du type SizeX, où X est le suffixe de la valeur qui définit de l’orientation désirée des flèches (par exemple SizeNS pour des flèches verticales).

Puis, à l’instar du déplacement décrit plus haut il faut placer les trois mêmes écouteurs d’évènements (MouseLeftButtonDown, MouseLeftButtonUp et MouseMove).

Démo et code source

Pour plus de détails sur le fonctionnement de ce contrôle vous pouvez télécharger les codes sources ci-dessous.

Télécharger les sources

Pour vous faire une idée du fonctionnement final de notre zone déplaçable et redimensionnable vous pouvez manipuler la petite démo ci-dessous.