Elise's blog

Voici un petit exemple de datagrid sans prétention : il reprend en grande partie des bouts d'exemples qu'on peut trouver à gauche et à droite. Vous pouvez télécharger tout çà ici.

J'ai utilisé des photos que j'ai prises avec divers appareils photo, et j'ai voulu les afficher dans le nouveau datagrid fournit dans le WPFToolkit. Evidemment, merci de ne pas réutiliser mes photos pour autre usage que cette démo, elles m'appartiennent (plus de photos ici : www.elisedupont.fr)

Il faut premièrement rajouter la DLL en question dans les références du projet. J'ai fait une classe "Picture" et j'ai fait une collection de type ObservableCollection, où j'ajoute quelques images. Cette collection est rajoutée dans le datacontext de ma fenètre.

En utilisant la syntaxe toute simple de base du datagrid AutoGenerateColumns="True" , avec l'option on obtient un résultat plûtot brut de décoffrage :

Cependant, le résultat n'est effectivement pas super beau. Du coup, on peut commencer à customiser un peu le rendu des colonnes.

Pour du texte simple, l'utilisation du DataGridTextColumn est suffisant :

<dg:DataGridTextColumn DataFieldBinding="{Binding Name}" Header="Nom" />

Pour les checkbox, il s'agit du DataGridCheckBoxColumn :

<dg:DataGridCheckBoxColumn DataFieldBinding="{Binding IsColor}" Header="Est en couleur" />

Pour l'affichage des images, on va passer par un DataGridTemplateColumn, que l'on va spécifier plus en détail :

<dg:DataGridTemplateColumn MaxWidth="250" Header="Image">

<dg:DataGridTemplateColumn.CellTemplate>

<DataTemplate>

<Image Source="{Binding Path=Imgpath}" MaxHeight="150" />

</DataTemplate>

</dg:DataGridTemplateColumn.CellTemplate>

<dg:DataGridTemplateColumn ClipboardContentBinding="{Binding Stars}" SortMemberPath="Rating" CellTemplateSelector="{StaticResource EtoileTemplateSelector}" Header="Rating" >

Ici, on doit rajouter l'infomation pour le tri (SortMemberPath="Rating"), car sinon le datagrid ne saura pas comment trier l'information. Par défaut, pour les autres données faciles telles que le texte, le datagrid tri très bien de façon ascendante et descendante tout seul (nb : pour ceux qui voudraient regarder une logique de tri plus personnelle avancée, un article est sortit sur le sujet).

Dans l'attribut CellTemplateSelector, on va définir la logique qui permet de lier le rating (qui est un chiffre) à une ressource XAML.

Enfin, pour la date, on va tirer partit du fameux StringFormat tout nouveau tout beau, qui evite d'écrire un converter pour afficher une date à un format précis :

<dg:DataGridTextColumn DataFieldBinding="{Binding CreationDate, StringFormat={}{0:d/M/yyyy}}" Header="Date de creation" /> 

Le résultat s'améliore un peu :

L'édition d'une ligne se gère toute seule : un click sur la cellule en question, et on passe en mode édition, on peut ainsi modifier le contenu. Seul problème : le cas des images et des étoiles.

Pour ce faire, on va définir un template pour l'affichage dans le mode édition :

Dans le cas des étoiles, on affichera une ComboBox avec des chiffres de 0 à 5 :

<dg:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox SelectedItem="{Binding Path=Rating, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ComboBox.ItemsSource>
<col:ArrayList>
<sys:Double>0</sys:Double>
<sys:Double>1</sys:Double>
<sys:Double>2</sys:Double>
<sys:Double>3</sys:Double>
<sys:Double>4</sys:Double>
<sys:Double>5</sys:Double>
</col:ArrayList>
</ComboBox.ItemsSource>
</ComboBox>
</DataTemplate>
</dg:DataGridTemplateColumn.CellEditingTemplate>

On va lier la donnée "Rating", afin qu'une fois la sélection finie, l'affichage se mette à jour.

De même, pour l'image :

<dg:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox SelectedItem="{Binding Path=Imgpath, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ComboBox.ItemsSource>
<col:ArrayList>
<sys:String>Pics\IMG_0127.jpg</sys:String>
<sys:String>Pics\IMG_0257.jpg</sys:String>
<sys:String>Pics\IMG_3385.jpg</sys:String>
<sys:String>Pics\IMG_2429.jpg</sys:String>
<sys:String>Pics\IMG_Pola3.jpg</sys:String>
<sys:String>Pics\IMG_Pola7.jpg</sys:String>
<sys:String>Pics\IMG_Pola1.jpg</sys:String>
<sys:String>Pics\IMG_2653.jpg</sys:String>
<sys:String>Pics\IMG_Pola6.jpg</sys:String>
</col:ArrayList>
</ComboBox.ItemsSource>
</ComboBox>
</DataTemplate>
</dg:DataGridTemplateColumn.CellEditingTemplate>

Résultat, quand on sélectionne l'image pour la changer, en mode édition, on a une ComboBox qui s'affiche avec les liste des images disponibles. Une amélioration possible serait d'afficher le visuel de l'image plutôt que son nom...