Tag Archives: wpf

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 :

DotNet : Utiliser les GridSplitter WPF

Yop tout le monde, aujourd’hui, encore du DotNet. Je prépare deux Webcast sur les Windows Services en C# mais en attendant, voici un article sur l’utilisation des GridSplitter qui vous permettrons de redistribuer très facilement l’espace entre deux colonnes ou lignes. Halala, c’est beau le WPF tout de même…

Qu’est-ce qu’un GridSplitter ?

Comme dit juste au dessus, un est Gridsplitter est :

Un contrôle qui redistribue l’espace entre les colonnes ou les lignes d’un contrôle Grid.

Nous allons faire un GridSplitter en xaml uniquement, mais si vous saisissez son principe, il n’y aura aucun soucis à se faire pour le rajouter en C#, en VB en F# ou en C++.
Il faut tout d’abord distinguer deux “types” de gridsplitter, les gridsplitter horizontaux et verticaux. La différence entre les deux réside dans les valeurs qu’ont HorizontalAlignement et VerticalAlignement. Un tableau résumé très bien ces valeurs sur la msdn. Tableau que voilà  :


Le plus simple pour le mettre en place et de lui mettre à disposition une colonne ou ligne dédiée. Dans cet exemple je travaillerai avec des row. Voici à quoi devrait ressembler notre Grid avant d’y inserer notre gridsplitter. Nous avons deux Textarea. Voici le code en Xaml :


Et Voici le rendu une fois le projet lancé :

Maintenant nous allons rajouter notre GridSplitter dans la row centrale. Nous mettrons donc HorizontalAlignement a Strectch et VerticalAlignement a Center afin de redimensionner les lignes et non les colonnes. Nous le griderons dans la row 1, sa hauteur sera de 3px et nous passerons ShowPreview a True afin de ne redimensionner définitivement les deux elements qu’au moment où l’utilisateur relâche la souris. Voici donc le xaml :


Et voici le rendu… Bon un jpg ça ne sert à rien, alors voici une petite video, c’est plus explicite ^^

Enfin, voici un petit exemple inutile où je met un GridSplitter de colonne et chaque colonne contient un GridSplitter de ligne. (Je me suis aperçus sur la 2éme video qu’il y a un petit bug, quand on bouge un des splitter, son ancien emplacement reste +/- visible quelques temps, ceci est un bug du logiciel de capture, pas du programme)

Et voici la solution comprenant les deux projets.

Voila, donc rien de bien compliqué pour les GridSplitter mais c’est un élément du wpf qui n’est pas forcément le “plus connu” et qui pourtant, est juste genial d’un point de vue de l’ergonomie des IHM
Sur ce…