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…

2 thoughts on “DotNet : Utiliser les GridSplitter WPF

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s