Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Le glisser/déposer dans une application .NET (WPF)

Par François MAZOYER Publié le 05/10/2017 à 21:42:07 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Bienvenue dans cet article traitant de technologies .NET, en l'occurrence d'applications Windows codées avec les langages de programmation C# et Visual Basic .NET (VB.NET) et construites grâce au composant Windows Presentation Foundation (WPF). Nous allons nous intéresser à un exemple concret, plus difficile à réaliser qu'il n'y paraît à première vue : la programmation d'un glisser/déposer d'éléments provenant de l'explorateur de fichiers.

Windows Presentation Foundation

WPF est un composant de présentation intégrée au framework .NET, permettant la création d'applications Windows avec lequel la philosophie sera de clairement séparer le code métier de l'interface homme-machine (IHM). Cette technologie tend à remplacer Windows Forms auprès des développeurs depuis une dizaine d'années et intègre le langage XAML.

eXtensible Application Markup Language

XAML est un langage déclaratif, dérivé du XML, développé par Microsoft pour soutenir ses différentes technologies. Son but est de permettre aux designers de concevoir des applications de manière intuitive et visuelle, comme ils le feraient pour un site web. Cette partie visuelle fonctionne donc de concert avec le code-behind (en C# ou VB.NET dans notre cas), qui lui décrit la logique de l'application, dans le cadre de WPF.

Exemple d'implémentation dans une application

Prenons l'exemple d'une application concrète dans laquelle nous intégrerons la fonctionnalité glisser/déposer : un lecteur de fichier texte. Le but ici est de montrer un programme plutôt simple, en deux versions : l'une sera programmée en C# et l'autre avec VB.NET. Pour illustrer cela, nous utiliserons l'environnement de développement phare de Microsoft, Visual Studio (Enterprise 2017), sous Windows 10.

Design et code XAML

Voici ci-dessus une prévisualisation de notre programme et le code XAML correspondant, dans Visual Studio : bien que cette capture d'écran ait été réalisée sur le programme écrit en C#, son contenu serait strictement identique en VB.NET : la technlologie WPF fonctionne de manière indépendante au "langage de fond" choisi.

Donc dans notre code XAML, nous définissons la grille d'affichage Grid, divisée en deux parties grâce aux propriétés RowDefinition(s) dans les lignes 13 à 16 : 1/8 de l'espace vertical est ainsi occupé par l'élément TextBox, sur lequel nous glisserons/déposerons nos fichiers texte, alors que la partie restante sera allouée à l'élément TextBlock dans lequel sera affiché le contenu de ces derniers. Cette manière de découper et d'utiliser la grille d'affichage nous assure d'obtenir un programme dont l'interface est "responsive" (c'est à dire redimensionnable à volonté, sans déformation des éléments graphiques ou autres effets indésirables).

Nous utilisons la syntaxe x:Name="[...]" (voir les lignes 19 et 32) pour identifier ces deux principaux éléments de manière unique dans notre code. C'est de cette manière que nous pourrons les manipuler dans notre code-behind (pour rappel ce sera donc en C# ou avec VB.NET). Pour rester simple, nous pouvons donc dire que notre programme sera composé de deux éléments principaux, dont les identifiants uniques seront textBox_path et textBlock_textArea, ce dernier étant entouré des balises Border (une bordure noire qui entourera le texte) et ScrollWiever (qui permettra de le faire défiler) : voir la dernière image de l'article pour obtenir un aperçu concret de l'utilisation du programme.

Dans les lignes qui vont suivrent, nous détaillerons la logique du programme (le code-behind) en C# et VB.NET.

Le programme écrit en C#

Dans le code présenté ci-dessus, nous commençons par importer les différentes fonctionnalités utilisées par le programme :

  • System.Collections.Generic nous permet d'utiliser des listes (voir la ligne 24)

  • System.IO fait référence aux opérations d'entrée/sortie (voir la classe File, ligne 31)

  • System.Text apporte le support de l'encodage (ligne 31)

  • System.Windows supporte la classe MessageBox (ligne 34)

Ensuite, nous activons le support de la souris faisant glisser un objet sur notre élément textBox, grâce à l'événement textBox_path_PreviewDragOver : les lignes 13, 14 et 15 de ce code C# correspondent donc à la ligne 23 du code XAML.

Le prochain (et dernier) événement, textbox_path_Drop, est le coeur du programme. Il est sollicité lorsqu'un objet est déposé sur l'élément textBox et nous en profitons pour effectuer les opérations suivantes :

  • Création de la variable file, une suite d'élements de type string, qui récupère les données liées à/aux objet(s) déposé(s)

  • Création des variables fileName et fileExt, qui contiendront respectivement le chemin complet vers le premier objet déposé, et son extension

  • Écriture de ce chemin complet dans l'élément textBox de notre interface graphique

  • Création d'extList , une liste de type string dans laquelle nous spécifions les différentes extension acceptées pour l'objet déposé

  • Lecture et restitution du contenu de l'objet grâce à la fonction ReadAllText si l'extension est reconnue.

Quand nous parlons d'objet ci-dessus, nous faisons à priori référence au fichier déposé par l'utilisateur du programme. Les extensions acceptées pour celui-ci seront .txt, .csv et .srt.

Le programme écrit en VB.NET

Comme c'est souvent le cas, nous nous retrouvons avec un programme plus court avec VB.NET. La disparition de la procédure MainWindow, obligatoire en C#, n'y est d'ailleurs pas étrangère. Le nombre d'imports à réaliser est également moins important : seul System.Text est ici nécessaire.

Autre différence, la déclaration de la variable file (en ligne 9) se montre plus permissive qu'en C# ou il fallait utiliser un cast pour préciser le type de données traitées.

Au final, le code écrit s'avère quasiment identique entre ces deux langages, qui intègrent plus ou moins les mêmes fonctionnalités : si vous devez choisir, utilisez celui avec lequel vous vous sentez le plus à l'aise !

Utilisation réelle du programme

Voici ci-dessus comment se présente le programme une fois qu'un fichier lui a été fourni depuis l'explorateur de fichier de Windows. Comme vous pouvez le voir, il s'agit d'un fichier-test contenant des phrases quelconques et dont l'extension est .txt.

Notez que nous précisons l'encodage à utiliser pour lire le fichier et afficher correctement son contenu, avec le paramètre Encoding.Default passé dans la fonction ReadAllText. Cela correspond à l'encodage ANSI (celui utilisé, par défaut, avec les fichiers texte sous Windows).

Réflexion personnelle sur le sujet

Voilà, ce sera tout pour ce programme d'exemple. Personnellement, cela m'a donc donné l'occasion de retravailler sur le glisser/déposer, fonctionnalité que j'avais eu du mal à implémenter lors de mes premiers pas avec le langage C# : les différentes sources et documentations consultées alors (d'ailleurs souvent en Windows Forms et non WPF) ne m'avaient pas vraiment convaincu, ni aidé d'ailleurs. Aujourd'hui, avec davantage de pratique et de connaissances en programmation, je me trouve en mesure de comprendre et d'intégrer correctement cette fonctionnalité, certes basique mais pas aussi simple d'accès qu'elle en a l'air. Bien sûr, le programme montré ici pourrait être amélioré, mais en l'état il est probablement suffisamment simple et direct pour soutenir ces lignes.

Ceci marque la fin de cet article : j'espère que vous l'aurez trouvé utile et/ou intéressant. Si vous êtes curieux, n'hésitez pas à consulter mes autres documents sur cette page !

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels