ListView avec GridView

Dans les articles précédents dédiés aux ListView, nous avons utilisé la version la plus basique des ListView de la librairie WPF, c'est-à-dire sans utiliser de vue personalisée. Nous obtenions alors une ListView qui ressemblait beaucoup au contrôle ListBox avec quelques différences subtiles. Le réel potentiel des ListView provient de l'utilisation de vues et la librairie WPF contient une vue spécialement prévue pour les ListView : la GridView.

En utilisant la GridView, vous pouvez définir plusieur colonnes dans votre ListView, dans le même esprit que celles de Windows Explorer. Pour être sûr que tous le monde visualise de quoi nous parlons, nous allons commencer par un exemple basique:

<Window x:Class="WpfTutorialSamples.ListView_control.ListViewGridViewSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ListViewGridViewSample" Height="200" Width="400">
    <Grid>
		<ListView Margin="10" Name="lvUsers">
			<ListView.View>
				<GridView>
					<GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" />
					<GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" />
					<GridViewColumn Header="Mail" Width="150" DisplayMemberBinding="{Binding Mail}" />
				</GridView>
			</ListView.View>
		</ListView>
	</Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Windows;

namespace WpfTutorialSamples.ListView_control
{
	public partial class ListViewGridViewSample : Window
	{
		public ListViewGridViewSample()
		{
			InitializeComponent();
			List<User> items = new List<User>();
			items.Add(new User() { Name = "John Doe", Age = 42, Mail = "john@doe-family.com" });
			items.Add(new User() { Name = "Jane Doe", Age = 39, Mail = "jane@doe-family.com" });
			items.Add(new User() { Name = "Sammy Doe", Age = 7, Mail = "sammy.doe@gmail.com" });
			lvUsers.ItemsSource = items;
		}
	}

	public class User
	{
		public string Name { get; set; }

		public int Age { get; set; }

		public string Mail { get; set; }
	}
}

Nous avons utilisé la même classe User que précédemment pour les données de test que nous avons associées à la ListView. Tout est exactement comme dans les chapitres précédents mais le rendu est très différent (comme vous pouvez le voir sur les captures d'écrans). Cet exemple est une démonstration du pouvoir du "Data Binding" : les mêmes données, mais représentées différement en modifiant uniquement le code XAML.

Dans le code XAML, nous avons défini une vue pour la ListView en utilisant la propriété ListView.View. Nous avons associé à cette propriété une GridView qui est le seul type de vue inclu dans la librairie WPF (vous pouvez cependant facilement créer votre propre type de vue !). La GridView est le type de vue qui nous a donné la représentation des données sous forme de colonnes comme vous avez pu le voir dans la capture d'écran.

A l'intérieur du GridView, nous avons défini 3 colonnes : une pour chaque élément de données que nous souhaitions afficher. La propriété Header est utilisée pour définir l'entête de la colonne et nous avons utilisé la propriété DisplayMemberBinding pour associer la valeur de la colonne à une propriété de notre classe User.

Contenu de cellule personnalisé

L'utilisation de la propriété DisplayMemberBinding permet uniquement l'affichage de simples chaînes de caractères, sans formattage. Mais la ListView de la librairie WPF est beaucoup plus flexible que cela. En utilisant un CellTemplate, il est possible de définir un rendu personnalisé pour les cellules d'une colonne.

La GridViewColumn va utiliser la propriété DisplayMemberBinding en priorité si elle est définie. Le second choix sera la propriété CellTemplate, que nous allons utiliser pour cet exemple:

<Window x:Class="WpfTutorialSamples.ListView_control.ListViewGridViewCellTemplateSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ListViewGridViewCellTemplateSample" Height="200" Width="400">
    <Grid>
		<ListView Margin="10" Name="lvUsers">
			<ListView.View>
				<GridView>
					<GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" />
					<GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" />
					<GridViewColumn Header="Mail" Width="150">
						<GridViewColumn.CellTemplate>
							<DataTemplate>
								<TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />
							</DataTemplate>
						</GridViewColumn.CellTemplate>
					</GridViewColumn>
				</GridView>
			</ListView.View>
		</ListView>
	</Grid>
</Window>

Remarque: le code C# pour cet exemple est le même que celui utilisé pour le premier exemple de cet article.

Nous avons défini un CellTemplate personnalisé pour la dernière colonne, où nous souhaitions un format spécifique pour les adresses e-mail. Pour les autres colonne, pour lesquelles nous voulions juste un affichage texte basique, nous avons utilisé la propriété DisplayMemberBinding car elle est la plus simple d'utilisation pour ce besoin.