Procédure pas à pas : activation de la fonction glisser-déplacer sur un contrôle utilisateur

Cette procédure pas à pas explique comment créer un contrôle utilisateur personnalisé qui peut participer au transfert de données par glisser-déplacer dans Windows Presentation Foundation (WPF).

Dans cette procédure pas à pas, vous allez créer un UserControl WPF personnalisé qui représente une forme de cercle. Vous implémenterez la fonctionnalité sur le contrôle afin d'activer le transfert de données par glisser-déplacer. Par exemple, si vous faites glisser les données d'un contrôle Circle à un autre, les données de couleur de remplissage sont copiées du cercle source au cercle cible. Si vous faites glisser un contrôle Circle vers TextBox, la représentation sous forme de chaîne de la couleur de remplissage est copiée dans TextBox. Vous créerez également une petite application qui contient deux contrôles Panel et un TextBox pour tester la fonctionnalité de glisser-déplacer. Vous écrirez un code qui active les panneaux qui permettent de traiter les données Circle supprimées, ce qui vous permettra de déplacer ou de copier des éléments Circle de la collection Children d'un panneau à l'autre.

Cette procédure pas à pas décrit les tâches suivantes :

• Créer un contrôle utilisateur personnalisé.

• Activer le contrôle utilisateur comme source de glissement.

• Activer le contrôle utilisateur comme cible de déplacement.

• Activer un panneau pour recevoir les données supprimées du contrôle utilisateur.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des composants suivants :

• Visual Studio 2010

Création du projet d'application

De cette section, vous créerez l'infrastructure d'application, qui comprend une page principale avec deux panneaux et un TextBox.

Pour créer le projet

1. Créez un projet d'application WPF en Visual Basic ou Visual C# nommé DragDropExample. Pour plus d'informations, consultez Comment : créer un projet d'application WPF.

2. Ouvrez MainWindow.xaml.

3. Entre les balises Grid ouvrante et fermante, ajoutez le balisage suivant.

   Ce balisage crée l'interface utilisateur pour l'application de test.

Ajout d'un nouveau contrôle utilisateur au projet

De cette section, vous allez ajouter un nouveau contrôle utilisateur au projet.

Pour ajouter un nouveau contrôle utilisateur

1. Dans le menu Projet, sélectionnez Ajouter un contrôle utilisateur.

2. Dans la boîte de dialogue Ajouter un nouvel élément, remplacez le nom Circle.xaml, et cliquez sur Ajouter.

   Circle.xaml et son fichier code-behind sont ajoutés au projet.

3. Ouvrez Circle.xaml.

   Ce fichier contiendra les éléments de l'interface utilisateur du contrôle utilisateur.

4. Ajoutez le balisage suivant au Grid racine pour créer un contrôle utilisateur simple qui présente un cercle bleu comme interface utilisateur.

5. Ouvrez Circle.xaml.cs ou Circle.xaml.vb.

6. En C#, ajoutez le code suivant après le constructeur par défaut pour créer un constructeur de copie. En Visual Basic, ajoutez le code suivant pour créer un constructeur par défaut et un constructeur de copie.

   Afin de pouvoir copier le contrôle utilisateur, ajoutez une méthode de constructeur de copie dans le fichier code-behind. Dans le contrôle utilisateur Circle simplifié, copiez uniquement le remplissage et la taille du contrôle utilisateur.

Pour ajouter le contrôle utilisateur à la fenêtre principale

1. Ouvrez MainWindow.xaml.

2. Ajoutez le code XAML suivant dans la balise Window d'ouverture pour créer une référence d'espace de noms XML à l'application actuelle.

   xmlns:local="clr-namespace:DragDropExample"
   

3. Dans le premier StackPanel, ajoutez le code XAML suivant pour créer deux instances du contrôle utilisateur Circle au premier panneau.

   Le code XAML complet pour le panneau ressemble au code ci-dessous.

Implémentation des événements de source de glissement dans le contrôle utilisateur

De cette section, vous substituerez la méthode OnMouseMove et initialiserez l'opération de glisser-déplacer.

Si une opération de glisser est démarrée (le bouton de la souris est enfoncé et le pointeur est déplacé), vous créez un package des données à transférer dans DataObject. Dans ce cas, le contrôle Circle place dans un package trois éléments de données, une représentation sous forme de chaîne de sa couleur de remplissage, une double représentation de sa hauteur et une copie de lui-même.

Pour démarrer une opération de glisser-déplacer

1. Ouvrez Circle.xaml.cs ou Circle.xaml.vb.

2. Ajoutez la substitution OnMouseMove suivante pour fournir la gestion de classe pour l'événement MouseMove.

   Cette substitution OnMouseMove exécute les tâches suivantes :

   • Vérifie si le bouton gauche de la souris est enfoncé alors que la souris se déplace.

   • Empaquète les données Circle dans un DataObject. Dans ce cas, le contrôle Circle place dans un package trois éléments de données, une représentation sous forme de chaîne de sa couleur de remplissage, une double représentation de sa hauteur et une copie de lui-même.

   • Appelle la méthode DragDrop.DoDragDrop statique pour démarrer l'opération de glisser-déplacer. Passez les trois paramètres suivants à la méthode DoDragDrop :

     • dragSource : référence à ce contrôle.

     • data : DataObject créé dans le code précédent.

     • allowedEffects : opérations de glisser-déplacer autorisées, qui sont Copy ou Move.

3. Appuyez sur F5 pour générer et exécuter l'application.

4. Cliquez sur l'un des contrôles Circle et faites-le glisser sur les panneaux, l'autre contrôle Circle et TextBox. Lorsque le glissement passe au-dessus de TextBox, le curseur change pour indiquer un déplacement.

5. Tout en faisant glisser un contrôle Circle au-dessus de TextBox, appuyez sur la touche CTRL. Remarquez la façon dont le curseur change pour indiquer une copie.

6. Faites glisser-déplacer un contrôle Circle sur TextBox. La représentation sous forme de chaîne de la couleur de remplissage du contrôle Circle est ajoutée à TextBox.

Par défaut, le curseur change pendant une opération de glisser-déplacer pour montrer le résultat du déplacement des données. Vous pouvez personnaliser les commentaires donnés à l'utilisateur en gérant l'événement GiveFeedback et en définissant un autre curseur.

Pour fournir des commentaires à l'utilisateur

1. Ouvrez Circle.xaml.cs ou Circle.xaml.vb.

2. Ajoutez la substitution OnGiveFeedback suivante pour fournir la gestion de classe pour l'événement GiveFeedback.

   Cette substitution OnGiveFeedback exécute les tâches suivantes :

   • Vérifie que les valeurs Effects sont définies dans le gestionnaire d'événements DragOver de la cible du déplacement.

   • Définit un curseur personnalisé en fonction de la valeur Effects. Le curseur est conçu pour fourni un commentaire visuel à l'utilisateur sur le résultat du déplacement des données.

3. Appuyez sur F5 pour générer et exécuter l'application.

4. Faites glisser l'un des contrôles Circle sur les panneaux, l'autre contrôle Circle et TextBox. Remarquez que les curseurs sont à présent les curseurs personnalisés que vous avez spécifiés en substituant OnGiveFeedback.

5. Sélectionnez le mot green dans TextBox.

6. Faites glisser le mot green sur un contrôle Circle. Remarquez que les curseurs par défaut s'affichent pour montrer le résultat de l'opération de glisser-déplacer. Le curseur de commentaire est toujours défini par la source du glissement.

Implémentation des événements de cible de déplacement dans le contrôle utilisateur

De cette section, vous allez indiquer que le contrôle utilisateur est une cible de déplacement, substituez les méthodes qui permettent au contrôle utilisateur d'être une cible de déplacement et traiter l'élément qui y sont déposées.

Pour activer le contrôle utilisateur comme cible de déplacement.

1. Ouvrez Circle.xaml.

2. Dans la balise d'ouverture UserControl, ajoutez la propriété AllowDrop et affectez-lui la valeur true.

La méthode OnDrop est appelée lorsque la propriété AllowDrop est définie à true et que les données de la source de glissement sont déposées sur le contrôle utilisateur Circle. Dans cette méthode, vous allez traiter les données déplacées et appliquer les données au contrôle Circle.

Pour traiter les données déplacées

1. Ouvrez Circle.xaml.cs ou Circle.xaml.vb.

2. Ajoutez la substitution OnDrop suivante pour fournir la gestion de classe pour l'événement Drop.

   Cette substitution OnDrop exécute les tâches suivantes :

   • Utilise la méthode GetDataPresent pour vérifier si les données glissées contiennent un objet String.

   • Utilise la méthode GetData pour extraire des données de chaîne, le cas échéant.

   • Utilise BrushConverter pour essayer de convertir la chaîne en Brush.

   • Si la conversion réussit, applique le pinceau au Fill de Ellipse qui fournit l'interface utilisateur du contrôle Circle.

   • Marque l'événement Drop comme étant géré. Vous devez marquer l'événement de déplacer comme géré afin que les autres éléments qui reçoivent cet événement sachent que le contrôle utilisateur Circle l'a traité.

3. Appuyez sur F5 pour générer et exécuter l'application.

4. Sélectionnez le mot green dans TextBox.

5. Faites glisser le texte vers un contrôle Circle et déposez-le. Le contrôle Circle passe du bleu au vert.

6. Tapez le mot green dans TextBox.

7. Sélectionnez le mot gre dans TextBox.

8. Faites-le glisser sur un contrôle Circle et déposez-le. Notez que le curseur change pour indiquer que le déplacement est autorisé, mais la couleur du contrôle Circle ne change pas car gre n'est pas une couleur valide.

9. Effectuez l'opération de glisser-déplacer du contrôle Circle vert vers le contrôle Circle bleu. Le contrôle Circle passe du bleu au vert. Notez que le curseur qui s'affiche dépend de la source du déplacement, TextBox ou le contrôle Circle.

La définition de la propriété AllowDrop à true et le traitement des données déposées sont les seules opérations requises pour autoriser un élément à devenir cible de l'opération de déplacer. Toutefois, pour fournir une meilleure expérience utilisateur, vous devez également gérer les événements DragEnter, DragLeave et DragOver. Dans ces événements, vous pouvez exécuter des contrôles et fournir des commentaires supplémentaires à l'utilisateur avant que les données ne soient déplacées.

Lorsque les données sont glissées sur le contrôle utilisateur Circle, le contrôle doit indiquer à la source du glissement s'il peut traiter les données glissées. Si le contrôle n'est pas capable de traiter les données, il doit refuser le déplacement. Pour ce faire, vous allez gérer l'événement DragOver et définir la propriété Effects.

Pour vérifier que le déplacement de données est autorisé

1. Ouvrez Circle.xaml.cs ou Circle.xaml.vb.

2. Ajoutez la substitution OnDragOver suivante pour fournir la gestion de classe pour l'événement DragOver.

   Cette substitution OnDragOver exécute les tâches suivantes :

   • Affecte la valeur None à la propriété Effects.

   • Exécute les mêmes vérifications que celles exécutées dans la méthode OnDrop pour déterminer si le contrôle utilisateur Circle peut traiter les données glissées.

   • Si le contrôle utilisateur peut traiter les données, définit la propriété Effects sur Copy ou Move.

3. Appuyez sur F5 pour générer et exécuter l'application.

4. Sélectionnez le mot gre dans TextBox.

5. Faites glisser le texte vers un contrôle Circle. Notez que le curseur change à présent pour indiquer que le déplacement n'est pas autorisé car gre n'est pas une couleur valide.

Vous pouvez améliorer encore plus l'expérience utilisateur en appliquant une vue d'ensemble de l'opération de déplacement. Pour le contrôle utilisateur Circle, vous allez substituer les méthodes OnDragEnter et OnDragLeave. Lorsque les données sont déplacées au-dessus du contrôle, le Fill de l'arrière-plan actif est enregistré dans une variable d'espace réservé. La chaîne est ensuite convertie en pinceau et appliquée au Ellipse qui fournit l'interface utilisateur du contrôle Circle. Si les données sont glissées en dehors du contrôle Circle sans être déposées, la valeur Fill d'origine est réappliquée au contrôle Circle.

Pour afficher un aperçu du résultat de l'opération de glisser-déplacer

1. Ouvrez Circle.xaml.cs ou Circle.xaml.vb.

2. Dans la classe Circle, déclarez une variable Brush privée nommée _previousFill et initialisez-la à null.

3. Ajoutez la substitution OnDragEnter suivante pour fournir la gestion de classe pour l'événement DragEnter.

   Cette substitution OnDragEnter exécute les tâches suivantes :

   • Enregistre la propriété Fill de Ellipse dans la variable _previousFill.

   • Exécute les mêmes vérifications que celles exécutées dans la méthode OnDrop pour déterminer si les données peuvent être converties en Brush.

   • Si les données sont converties est en Brush valide, applique le Fill de Ellipse.

4. Ajoutez la substitution OnDragLeave suivante pour fournir la gestion de classe pour l'événement DragLeave.

   Cette substitution OnDragLeave exécute les tâches suivantes :

   • Applique le Brush enregistré dans la variable _previousFill à Fill de Ellipse qui fournit l'interface utilisateur du contrôle utilisateur Circle.

5. Appuyez sur F5 pour générer et exécuter l'application.

6. Sélectionnez le mot green dans TextBox.

7. Faites glisser le texte au-dessus d'un contrôle Circle sans le déposer. Le contrôle Circle passe du bleu au vert.

8. Faites glisser le texte en dehors du contrôle Circle. Le contrôle Circle repasse du vert au bleu.

Activation d'un panneau pour recevoir des données déplacées

De cette section, vous allez permettre aux panneaux qui hébergent les contrôles utilisateur Circle de jouer le rôle de cibles de déplacement pour les données Circle glissées. Vous allez implémenter un code qui vous permet de déplacer un contrôle Circle d'un panneau vers un autre, ou de créer une copie d'un contrôle Circle en maintenant la touche CTRL enfoncée tout en faisant glisser-déposer un contrôle Circle.

Pour permettre au panneau d'être une cible de déplacement

1. Ouvrez MainWindow.xaml.

2. Comme indiqué dans le code XAML suivant, dans chacun des contrôles StackPanel, ajoutez des gestionnaires pour les événements DragOver et Drop. Nommez le gestionnaire d'événements DragOver, panel_DragOver, le gestionnaire d'événements Drop, panel_Drop.

3. Ouvrez MainWindows.xaml.cs ou MainWindow.xaml.vb.

4. Ajoutez le code suivant pour le gestionnaire d'événements DragOver.

   Ce gestionnaire d'événements DragOver effectue les tâches suivantes :

   • Vérifie que les données glissées contiennent les données « Objet » qui ont été empaquetées dans DataObject par le contrôle utilisateur Circle et passées dans l'appel à DoDragDrop.

   • Si les données « Objet » sont présentes, vérifie si la touche CTRL est enfoncée.

   • Si la touche CTRL est enfoncée, définit la propriété Effects sur Copy. La propriété Effects a pour valeur Move.

5. Ajoutez le code suivant pour le gestionnaire d'événements Drop.

   Ce gestionnaire d'événements Drop effectue les tâches suivantes :

   • Vérifie si l'événement Drop a déjà été traité. Par exemple, si un contrôle Circle est déposé sur un autre contrôle Circle qui gère l'événement Drop, le panneau qui contient le contrôle Circle ne doit pas également le gérer.

   • Si l'événement Drop n'est pas géré, vérifie si la touche CTRL est enfoncée.

   • Si la touche CTRL est enfoncée lorsque l'événement Drop se produit, effectue une copie du contrôle Circle et l'ajoute à la collection Children de StackPanel.

   • Si la touche CTRL n'est pas enfoncée, déplace le contrôle Circle de la collection Children de son panneau parent vers la collection Children du panneau sur lequel il a été déposé.

   • Définit la propriété Effects pour indiquer à la méthode DoDragDrop si une opération de déplacement ou de copie a été effectuée.

6. Appuyez sur F5 pour générer et exécuter l'application.

7. Sélectionnez le mot green dans TextBox.

8. Faites glisser le texte au-dessus d'un contrôle Circle et déposez-le.

9. Faites glisser un contrôle Circle du panneau gauche vers panneau droit et déposez-le. Le contrôle Circle est supprimé de la collection Children du panneau gauche et ajouté à la collection Children du panneau droit.

10. Faites glisser un contrôle Circle depuis le panneau où il se trouve vers l'autre panneau et déposez-le tout en appuyant sur la touche CTRL. Le contrôle Circle est copié et la copie est ajoutée à la collection Children du panneau de destination.

Voir aussi

Concepts

Vue d'ensemble du glisser-déplacer

Historique des modifications

Date	Historique	Motif
Avril 2011	Ajout d'une rubrique.	Commentaires client.