Visual Basic .Net:Evénements Glisser - Déposer (Drag & Drop)

Un des trucs balaises dans l'interface graphique de Windows, c'est qu'on peut se servir de sa souris pour prendre des trucs à un endroit, les trimballer et aller les mettre ailleurs. La quasi-totalité des logiciels exploitent cette possibilité, et il serait quand bien même bien dommage que nous n'apprenions pas à programmer avec VB ce qu'on appelle en français le "Glisser déposer ", et en anglais le "Drag and Drop". N'est-il pas ?

Cela dit, mieux vaut le savoir, mettre en oeuvre le Drag and Drop, cela suppose une fieffée dose de patience et de rigueur, car le moins qu'on puisse dire, c'est que ça ne glisse pas comme sur des roulettes et qu'à la fin, c'est souvent les armes qu'on dépose. Mais bon, en y allant le plus rationnellement et le plus méthodiquement possible, on peut espérer s'en sortir vivants.

[modifier]

Approche générale

La première chose à comprendre, c'est qu'un Drag and Drop est constitué de trois événements obligatoires, séparés par une quantité variable d'événements facultatifs. Ces trois événements incontournables se situent au point de départ et au point d'arrivée de la manipulation :

au départ, il faut autoriser (et gérer) le fait qu'un contrôle puisse être alpagué par la souris, et que lui même, ou une de ses propriétés, puisse être trimballé. Parce que par défaut, aucun contrôle normalement constitué ne peut subir un "Glisser", ou un "Drag". Cela se fait en passant au contrôle la méthode DoDragDrop.
il faut également autoriser le fait que tel ou tel contrôle puisse recevoir le largage. Car a priori, aucun contrôle n'accepte de son plein gré d'être la cible d'un "drop". Ceci ne peut se faire qu'en réglant la propriété AllowDrop du (des) contrôle(s) cible(s) à True.

Remarque :

Ces deux propriétés doivent être modifiées par du code qui, tant qu'à faire, et pour des raisons aisément compréhensibles, sera exécuté juste avant que le Drag & Drop ne se déclenche.

Traditionnellement, on considère qu'un bon endroit pour écrire ce code est la procédure MouseDown du contrôle qui subit le Drag.

[modifier]

Piège

Si l'on s'occupe du DoDragDrop et du Allowdrop dans la procédure MouseDown, alors il faut absolument écrire les Allowdrop avant le DoDragDrop, faute de voir toute l'affaire marcher de manière boiteuse.
C'est étrange et un peu déroutant, mais c'est comme ça.

à l'arrivée, il faut programmer ce qui se produit lorsque le bidule que représente le curseur de la souris va être largué au-dessus du (des) contrôle(s) cible(s). Et cela se décompose en deux événements : DragEnter (entrée du curseur au-dessus du contrôle susceptible de recevoir un Drop) et DragDrop (lâchage proprement dit).

Aux trois tâches à accomplir, correspondent donc très logiquement trois événements à gérer. Ce qu'il y a d'hilarant dans l'affaire, c'est que ces trois événements ne correspondent pas aux trois tâches en question ! Un événement (MouseDown) s'occupe de deux des tâches, alors que la troisième tâche (la gestion du Drop) mobilise à elle seule deux événements (DragEnter et DragDrop).

[modifier]

Les trois événements cruciaux

Résumons-nous, en prenant pour le moment un exemple simple : on va autoriser l'utilisateur à prendre le texte d'un Label (que nous appellerons Etiquette) pour le poser dans une TextBox (que nous appellerons Arthur, parce que c'est un joli nom, et que si on l'appelait Perceval, ça risquerait de nous porter la poisse.

[modifier]

Première étape

Nous devons autoriser Etiquette à être l'objet d'un Drag, et Arthur à être la cible d'un Drop. Pour le Drag, la méthode DoDragDrop devra préciser deux paramètres :

la nature des informations qui seront transmises à l'objet e, objet qui sera créé lors du Drag, qui ne disparaîtra qu'avec le Drop, et dont les propriétés resteront à notre disposition en permanence entre ces deux moments. Je rappelle que e n'est autre que ce fameux objet qui figure comme paramètre de certaines procédures événementielles, et dont nous ne nous étions guère préoccupés jusque là. Je rappelle également - au cas où - que si Sender représente l'objet qui a déclenché la procédure, e incarne quant à lui l'événement lui même, et ses propriétés représentent donc en quelque sorte les circonstances de cet événement.

VB nous demande donc de préciser par ce paramètre, lors du DoDragDrop, quelles sont les données qui seront affectées à la propriété Data de l'objet e.
Ce paramètre a donc parfois une grande importance, et parfois il n'en a aucune : tout dépend, en gros, si plusieurs objets peuvent être à l'origine du Drag, ou s'il n'y en a qu'un seul. Dans le premier cas, nous aurons vraisemblablement besoin de récupérer lors du Drop l'information qui aura été passée en paramètre. Dans le second cas, la récupération de la propriété Data de e n'est pas utile, et on peut donc affecter à peu près n'importe quoi à e.Data !
Considérons ici le cas le plus compliqué : plusieurs contrôles seront susceptibles d'être l'objet d'un Drag. Étant donné que ce qui nous intéresse est le texte du Label, nous affecterons à e.Data la propriété ext d'Etiquette.

second paramètre, le type d'effets que le Drag and Drop pourra produire (parmi une liste prédéfinie). Le choix le plus simple est bien entendu All. Mais on pourrait d'ores et déjà restreindre les effets possibles en optant pour une des autres possibilités.

Nous entrerons donc, dans la procédure Etiquette.MouseDown :

Arthur.AllowDrop = True
Etiquette.DoDragDrop(Etiquette.Text, DragDropEffects.All)

[modifier]

Deuxième étape

Nous devons gérer à présent l'entrée du curseur (après un Drag) dans la zone de Drop, c'est-à-dire au-dessus du contrôle Arthur. C'est là, dans cette procédure Arthur.DragEnter, que nous devrons préciser l'effet qui devra se produire lors du Drop. A noter que cette procédure, et cette instruction, sont indispensables, quand bien même on aura déjà précisé les possibilités lors du MouseDown. Si l'on veut, lors du MouseDown, on n'a fait que définir ce qui serait possible. Là, il faut dire ce qui va vraiment se passer.
Cela se fait en affectant la propriété Effectsde l'objet e, via une énumération :

e.Effects = DragDropEffects.All

[modifier]

Troisième étape

Il ne nous reste plus qu'à préciser, dans la procédure Arthur.DragDrop, ce qui doit se passer lors du largage. Ici, c'est très simple : Arthur doit prendre le texte qui se trouvait dans Etiquette. Si nous avions été sûrs que seul Etiquette avait pu être victime d'un Drag, l'affaire auraiot été un peu plus simple. Mais nous avons choisi de traiter le cas général, celui où l'information a été passée lors du MouseDown à la propriété Data de l'objet e.

Récupérer les données trimballées dans la propriété Data de e n'est pas une mince affaire. On ne peut consulter cette propriété qu'en lui appliquant la méthode GetData, méthode exigeant elle-même qu'on précise le format des données à récupérer... données qui doivent être ensuite converties dans le format approprié par la méthode adéquate ! Bref, la simplicité même, dans la plus pure tradition Petitmou.

Dans notre exemple, cela donne :

Arthur.Text = e.Data.GetData(DataFormats.Text).ToString

[modifier]

Autres évènements

Ce que nous venons de voir, c'est la base minimale, sans laquelle aucun Drag & Drop n'est possible. Mais on peut tout à fait enrichir l'interface, en tripatouillant la tête du curseur de la souris, en affichant ça ou là des informations, etc. Je me contente ici d'indiquer quelques pistes, tant le sujet est vaste.
Pour commencer, jetons un oeil rapide sur les autres événements qu'il est possible de gérer lors d'un Drag & Drop.

DragLeave : c'est en quelque sorte l'inverse du DragEnter. Cet événement se produit lorsque le curseur, pendant un Drag & Drop, quitte le contrôle concerné. Il est particulièrement utile pour gérer le fait que le curseur de la souris sorte du cadre de la fenêtre de l'application (c'est-à-dire de la Form).
DragOver : cet événement est un peu l'équivalent du MouseMove en cas de Drag & Drop. Il se déclenche pour tout mouvement de la souris au-dessus du contrôle concerné.
GiveFeedback : cet événement est déclenché dès que le Drag commence (il suit donc, chronologiquement, le MouseDown lorsque celui-ci provoque un Drag). C'est cet événement qui doit être utilisé si l'on souhaite programmer un curseur personnalisé durant le Drag and Drop.

Ensuite, j'ai parlé du curseur de la souris : il est en effet bon de savoir qu'en cas de besoin, on peut par exemple procéder à une gestion "fine" des coordonnées de la souris durant un Drag & Drop. En effet, chaque événement où la souris est impliquée - et lors d'un Drag & Drop, ils le sont tous ! - envoie au paramètre e deux propriétés, X et Y, qui précisent les coordonnées de la souris au moment du déclenchement de l'événement.

Attention toutefois ! Selon le type d'événement concerné, ces coordonnées e.X et e.Y sont stipulées par rapport au contrôle qui reçoit l'événement, ou par rapport à l'écran !!! Autant vous dire qu'il ne va pas falloir s'étonner de certains résultats surréalistes... Dans ce cas, la démarche sera toujours la même : vérifier dans l'aide, et effectuer les conversions de coordonnées nécessaires, comme on aura bientôt l'occasion de le faire dans de croustillants exercices.

La souris communique d'autres informations à l'événement e, par exemple l'état de ses boutons - ce qui permet de différencier un clic gauche d'un clic droit.

Enfin, notre bonheur ne serait pas complet si j'omettais de signaler que certains contrôles posent des problèmes particuliers pour le Drag & Drop - et disposent donc de solutions particulières. Il s'agit en particulier des ListBox, Combobox et autres Treeview, qui permettent de Glisser - Déposer un de leurs éléments, en allant le positionner à un endroit précis. Mais là, mon courage pourtant légendaire m'abandonne, et je renvoie les programmeurs concernés à des exemples de code traînant dans les bouquins ou sur le Net.

[modifier]

Exercices

L'exercice Lapins est une introduction au Drag & Drop, qui ne pose aucune difficulté particulière. Just a pawn in their game, en revanche, est nettement plus... stimulant.

Tout d'abord, il faudra absolument décompresser les deux fichiers *.ico livrés avec l'exécutable dans le même répertoire que celui-ci. Cette solution est certes inélégante, mais nous n'apprendrons que plus tard à procéder de la bonne façon.

Ensuite, le programme pose quelques petites difficultés, en premier lieu parvenir à susciter l'illusion que l'on promène les pions. Cela vous rappelle-t-il une remarque faite un peu plus haut ?