Nous avons vu dans ce post comment afficher des données provenant d’un service WCF dans un DataGrid. Nous avons utilisé pour cela la génération automatique de colonnes à partir de la source de données en utilisant l’attribut AutoGenerateColumns="True". Dans ce post nous allons partir de l’exemple précédemment réalisé pour personnaliser les colonnes de la grille.
Voici le code duquel nous allons partir :
<Data:DataGrid x:Name="TasksGrid" Style="{StaticResource MyGridStyle}" ItemsSource="{Binding Tasks}">
</Data:DataGrid>
L’attribut AutoGenerateColumns n’est pas spécifié parce que par défaut AutoGenerateColumns est positionné à True.
Pour rappel, voici la classe Task :
public class Task
{
public int Id { get; set; }
public string Name { get; set; }
public bool Realized { get; set; }
}
Et en utilisant l’auto génération de colonnes voici ce qu’on obtient :
Supposons maintenant que l’on veut afficher uniquement la colonne Name et la colonne Realized uniquement. Pour cela nous allons tout d’abord mettre l’attribut AutoGenerateColumns du DataGrid à False et puis nous allons définir les colonnes contenues dans notre grille. Pour cela nous disposons de 3 types de colonnes :
- DataGridTextColumn : une colonne de type texte
- DataGridCheckBoxColumn : une colonne de type CheckBox
- DataGridTemplateColumn : une colonne personnalisée qui peut contenir tout ce qu’on veut
Pour notre exemple, nous allons utiliser le DataGridTextColumn pour la colonne Name et un DataGridCheckBoxColumn pour la colonne Realized.
Dans le fichier Tasks.xaml trouver cette balise DataGrid
<Data:DataGrid x:Name="TasksGrid" Style="{StaticResource MyGridStyle}" ItemsSource="{Binding Tasks}">
</Data:DataGrid>
et Remplacez le par cette balise
<Data:DataGrid x:Name="TasksGrid" AutoGenerateColumns="False" Style="{StaticResource MyGridStyle}" ItemsSource="{Binding Tasks}">
<Data:DataGrid.Columns>
<Data:DataGridTextColumn Binding="{Binding Name}" Header="Nom"></Data:DataGridTextColumn>
<Data:DataGridCheckBoxColumn Binding="{Binding Realized}" Header="Réalisé"></Data:DataGridCheckBoxColumn>
</Data:DataGrid.Columns>
</Data:DataGrid>
En définissant les colonnes de la DataGrid de cette manière, nous pouvons les personnaliser en définissant par exemple si ces colonnes peuvent être ordonnées en utilisant l’attribut “CanUserSort”. Nous pouvons aussi définir si nous pouvons redimensionner la colonne en utilisant l’attribut “CanUserResize”. Les colonnes deviennent personnalisables au maximum d’une manière très simple.