Comment créer un téléchargeur de fichiers par glisser-déposer dans une application Winforms

2022/12/21

De nombreuses applications modernes fonctionnent sur des fichiers qu’un utilisateur peut télécharger sur son système. Les éditeurs d’images, les IDE de code et les traitements de texte en sont tous des exemples. Si vous créez une application Windows Form, vous pouvez facilement ajouter cette fonctionnalité dans le cadre de votre interface utilisateur.

Les applications Windows Form vous permettent de faire glisser et de déposer des éléments d’interface utilisateur tels que des panneaux ou des zones de liste. Vous pouvez utiliser ces éléments d’interface utilisateur pour créer votre fonctionnalité de glisser-déposer. Lorsque l’utilisateur fait glisser un fichier sur un panneau, vous pouvez afficher des commentaires basés sur ce fichier.

Comment créer l’interface utilisateur pour le conteneur glisser-déposer

Vous pouvez utiliser un élément de panneau pour créer l’interface utilisateur pour la fonctionnalité de glisser-déposer. Vous pouvez ensuite utiliser un élément d’interface utilisateur ListBox pour afficher les noms de tous les fichiers qu’un utilisateur fait glisser sur le panneau.

Créez une nouvelle application Windows Forms.
Dans la boîte à outils, recherchez un élément d’interface utilisateur de panneau et faites-le glisser sur le canevas.
Mettez en surbrillance le nouveau panneau. Dans la fenêtre des propriétés, modifiez les valeurs des propriétés suivantes :
Dans la boîte à outils, recherchez un élément d’interface utilisateur ListBox et faites-le glisser sur le canevas. Positionnez-le de manière à ce qu’il soit à l’intérieur du panneau et assurez-vous qu’il y a un certain espace entre le ListBox et le panneau.
Mettez en surbrillance le nouveau ListBox et modifiez les valeurs des propriétés suivantes :

Comment ajouter l’événement glisser-déposer

Vous pouvez utiliser des événements dans une application Windows Form pour exécuter certaines fonctions uniquement lorsque certains événements se produisent.

Pour ajouter des fonctionnalités au panneau glisser-déposer, vous devrez ajouter deux événements. L’événement « DragEnter » se produit lorsque vous faites glisser des fichiers sur le panneau. L’événement « DragDrop » se produit lorsque vous relâchez la souris pour déposer les fichiers dans le panneau.

Mettez en surbrillance l’élément d’interface utilisateur du panneau externe.
Dans la fenêtre des propriétés, cliquez sur l’ icône Eclair pour ouvrir la liste des événements.
Double-cliquez sur l’ événement DragEnter pour générer une nouvelle fonction. Cette fonction s’exécute lorsque vous faites glisser des fichiers sur le panneau.
A l’intérieur de la nouvelle fonction, changez l’icône de la souris pour indiquer l’action glisser/déposer :private void dragDropPanel_DragEnter(object sender, DragEventArgs e) { // Changes the icon of the mouse e.Effect = DragDropEffects.All; }
Cliquez sur l’ onglet Form 1.cs [Design] en haut de la fenêtre Visual Studio pour revenir à la vue canevas. Mettez en surbrillance l’élément de l’interface utilisateur du panneau.
Dans la fenêtre des propriétés, cliquez sur l’ icône Eclair pour revenir à la liste des événements. Cette fois, double-cliquez sur l’ événement DragDrop . Cela générera une autre fonction qui s’exécutera lorsque vous relâcherez la souris pour déposer les fichiers dans le panneau.
Dans la nouvelle fonction DragDrop, obtenez la liste des fichiers que l’utilisateur fait glisser dans le panneau. Vous pouvez le trouver dans les détails de l’événement qui sont automatiquement transmis à la fonction.private void dragDropPanel_DragDrop(object sender, DragEventArgs e) { string[] files = (string[])e.Data.GetData(DataFormats.FileDrop, false); }

Comment afficher la liste des fichiers déplacés

Maintenant que vous avez ajouté la fonctionnalité permettant à l’utilisateur de glisser-déposer des fichiers, vous pouvez afficher les noms des fichiers à l’aide de l’élément d’interface utilisateur ListBox.

Dans la fonction dragDropPanel_DragDrop(), après avoir obtenu la liste des fichiers, utilisez une boucle for pour parcourir chaque fichier.foreach (var file in files) {

}
À l’intérieur de la boucle for, n’obtenez que le nom du fichier. Séparez le nom du fichier du chemin d’accès au fichier et stockez-le dans une variable distincte. Si vous utilisez un Mac, vous devrez peut-être modifier le code pour prendre en compte les barres obliques plutôt que les barres obliques inverses. string fileName = file.Substring(file.LastIndexOf("\\") + 1, file.Length - (file.LastIndexOf("\\") + 1));
Ajoutez le nom du fichier à l’élément d’interface utilisateur ListBox.try { uploadedFilesList.Items.Add(fileName); } catch (Exception exception) { Console.WriteLine(exception); }
La ListBox n’est pas visible par défaut. Après la boucle for, changez la visibilité de ListBox en true : uploadedFilesList.Visible = true;
Modifiez le constructeur en haut du fichier. Définissez les propriétés AllowDrop et AutoScroll du panneau glisser-déposer sur true.public Form1() { InitializeComponent(); dragDropPanel.AllowDrop = true; dragDropPanel.AutoScroll = true; }

Comment effacer la liste

Une fois que l’utilisateur a fait glisser des éléments dans le panneau, il peut vouloir effacer la liste et recommencer. Vous pouvez ajouter un bouton pour effacer la liste lorsque l’utilisateur clique dessus.

À l’aide de la boîte à outils, faites glisser un bouton sur le canevas.
Mettez le bouton en surbrillance. Utilisez la fenêtre des propriétés pour remplacer les propriétés suivantes par les nouvelles valeurs :
Double-cliquez sur le bouton pour générer une nouvelle fonction. Cette fonction s’exécutera lorsque vous cliquerez sur le bouton lors de l’exécution :private void clearButton_Click(object sender, EventArgs e) {

}
Dans la fonction, effacez le contenu de l’élément ListBox UI et masquez-le :private void clearButton_Click(object sender, EventArgs e) { uploadedFilesList.Items.Clear(); uploadedFilesList.Visible = false; }

Comment tester le panneau glisser-déposer

Pour tester la fonctionnalité de glisser-déposer, exécutez l’application et faites glisser certains fichiers dans le panneau. Si nécessaire, vous pouvez également déboguer votre application Winforms dans Visual Studio au moment de l’exécution. Cela vous aidera à comprendre ce qui se passe dans chaque ligne de code.

Appuyez sur le bouton de lecture vert en haut de la fenêtre Visual Studio pour exécuter l’application.
Faites glisser quelques fichiers depuis votre explorateur de fichiers et déposez-les dans le panneau. Assurez-vous que vous n’exécutez pas Visual Studio en mode administrateur. Vous devrez configurer des autorisations de sécurité supplémentaires pour que le glisser-déposer fonctionne en mode administrateur.
Le panneau se mettra à jour pour vous montrer les noms des fichiers que vous avez glissés dans le panneau.
Faites glisser suffisamment de fichiers et vous verrez que le panneau de glisser-déposer affiche automatiquement une barre de défilement sur son côté droit.
Cliquez sur le bouton Effacer pour vider la liste.

Utilisation de la fonctionnalité glisser-déposer dans les applications Windows Form

Maintenant, espérons-le, vous comprenez comment ajouter une fonctionnalité de glisser-déposer à votre application Windows Form. Il existe de nombreuses autres fonctionnalités que vous pouvez explorer pour faire des choses intéressantes avec Windows Forms.