DotNet : Le datagrid en WPF

De base, en WPF, les datagrid (“grille à la Exel” pour les barbares), ne sont pas présentent. Heureusement, le WPF ToolKit est là… il compte bien réparé cette erreur et venger le WPF du winform à grand coup de tatanne…

WPF TOOLKIT

La première chose à faire, si vous ne l’avez pas déjà, c’est de l’installer. Il est disponible sur http://wpf.codeplex.com/releases/view/40535
Ce toolkit contient plusieurs éléments destiné a enrichir le framework dotnet actuel.
Dans les features venant d’être released on peut trouver :

* DataGrid
* DatePicker/Calendar
* VisualStateManager (VSM)
Et dans ce qui va venir :

* Chart controls – Check out a preview here
* Autocomplete
* NumericUpDown
En bref, des fonctions que l’on souhaite souvent voir apparaître en temps que developpeur pour rendre encore plus ergonomiques nos IHM.
L’installation, eh bien, il suffit de lancer le msi. Une fois cela fait, on lance Visual Studio et on créé un projet WPF. Enfin, il suffit de rajouter dans les Références des références vers WPFToolkit. Ce qui donne ceci :

Enfin, nous allons rajouter le champ Name et un namespace xmlns, dg.

Enfin, un using.

Notre projet est maintenant configuré et prêt à l’utilisation.
Les Winforms vont morflé !

LE DATAGRID – PARTIE WPF

Dans ce tutoriel, nous allons faire un datagrid qui liste un repertoire et créé un tableau en readOnly de ces élèments. Il y aura trois colonnes, un colonne nom, une colonne dir et un colonne file. La première est du texte, les suivantes sont des checkbox selon le type de fichier (file ou dir). On rajoute également au tableau un comportement qui permet de naviguer dans les dossiers en cliquant sur l’item. Une sorte d’explorateur de fichier.
Voici le code WPF a renseigné :

En Ligne 7-8-9 on créé notre DataGrid, on bind ItemSource sur This.DemoData, on désactive l’auto génération des colonnes on le passe en ReadOnly et on rajoute un gestionnaire d’evenement lorsque la selection change. (pour la naviguation). Je pensse que jusque la, il n’y a rien de spécial. Nous allons ensuite définie les colonnes, il y a plusieurs types de colonnes :

Nous allons créé ici deux DataGridCheckBoxColumn et DataGridTextColumn. Nous allons binder le premier sur path, le second sur dir et le troisième sur path. Le header se nomme de la même manière, il s’agit ici du nom qui sera affiché en haut de la colonne. Voilà, on referme le tout, on compile et on obtient… TADA !!! Un tableau vide…

Bon, ok… Mais il nous manque encore le plus important, il faut lui donner à manger à ce tableau, dans ce cas ci, la liste des répertoires et fichier.. Allez, hop, on retrouse ses manches et on plonge ses mains dans le code, direction Window1.xaml.cs.

LE DATAGRID – PARTIE C#

La première chose des de définir un objet de type Datatable, nous allons le nommer _DemoData et le rendre privé. Pour que notre Datagrid, via le binding, puisse y acceder, nous allons rajouter un getter, DemoData.

Ensuite dans le constructeur, nous allons initialiser _DemoData puis appeler la méthode add avec en argument, un objet de type DataColumn. Nous utiliserons sa seconde surcharge qui prend en premier le nom de la colonne et en second le type de données. Nous faisons égallement un appel initial a  UpdateGUI() que nous verons plustard. Le contructeur devrait donc ressembler a ceci :

Maintenant il ne nous reste plus qu’a créé une méthode qui va lister un répertoire et renvoyer son contenu ainsi qu’une seconde qui se chargera de mettre à jour l’affichage du tableau. La première est assez basique et plutôt hors de sujet, sachez juste que il y a deux méthodes. Un première permettant d’avoir une liste d’object FileItem du répertoire passé en argument et une seconde qui permet de recupéré le FileItem sélectionné selon l’index selectionné dans le DataGrid. Voici le diagramme de classe de FileItem :

Passons donc au gestionnaire d’évenement associé au DataGrid. Nous vérifions d’abord que l’index selectionné n’est pas null, ensuite nous appelons la méthode getFile() avec l’index en argument. Enfin, On vérifie qu’il s’agit bien d’un dossier et si oui, on appel UpdateGUI.

Update() GUI est l’élément qui permet de mettre à jour le tableau. On vide tout d’abord le tableau avec Clear(), ensuite on récupère une List<FileItem> que l’on parcours avec un foreach. Pour rajouter des row à un Datagrid, il suffit de créé une variable NewRow, pour affecter des valeurs aux diffèrentes colonnes, il suffit de mentionner son nom (celui définit dans le constructeur), ensuite on rajoute la row au datagrid.

Voilà, basiquement, comment créer un DataGrid simple. Les possibilités du DataGrid sont bien plus vaste encore et des dizaines de tutos pourraient lui être entièrement dédié. J’éspère ceci dit que vous avec compris les bases de l’utilisation du DataGrid. Voici le résultat final de notre application :

Et voici une version un peu plus “riche” de cette dernière.

Projets :
Projet simple : 

Projet riche :