ListView con una GridView

Nei precedenti articoli ListView, abbiamo utilizzato la versione più semplice di ListView WPF, che è quella senza una visualizzazione personalizzata. Il risultato è che la ListView si comporta in modo molto simile al ListBox di WPF, con alcune sottili differenze. Il vero potere sta nella vista specializzata integrata e WPF ne ha una: la GridView.

Utilizzando GridView, è possibile avere diverse colonne di dati in ListView, proprio come la visualizzazione in Esplora Risorse. Iniziamo con un esempio base:

<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; }
	}
}

Utilizziamo la stessa classe utente di prima, per i dati di test, che quindi associamo a ListView. Come puoi vedere dallo screenshot, il layout è molto diverso. Questo è il potere dell'associazione dei dati: gli stessi dati, ma presentati in un modo completamente diverso, semplicemente cambiando il markup.

Nel markup (XAML), definiamo una vista per ListView, usando la proprietà ListView.View. Lo impostiamo su GridView, che al momento è l'unico tipo di vista incluso in WPF (puoi comunque crearne uno tuo!). GridView è ciò che ci dà la vista basata su colonne che vedi nello screenshot.

All'interno di GridView, definiamo tre colonne, una per ciascuno dei dati che desideriamo mostrare. La proprietà Header è utilizzata per specificare il testo che vorremmo mostrare per la colonna e quindi usiamo la proprietà DisplayMemberBinding per associare il valore a un proprietà della nostra classe User.

Contenuto della cella basato su modelli

L'uso della proprietà DisplayMemberBinding è praticamente limitato all'output di stringhe semplici, senza alcuna formattazione personalizzata, ma la ListView WPF è molto più flessibile di così. Specificando un CellTemplate , prendiamo il pieno controllo del rendering del contenuto all'interno di una cella di colonna specifica.

GridViewColumn utilizzerà DisplayMemberBinding come prima priorità, se presente. La seconda scelta sarà la proprietà CellTemplate, che useremo nel prossimo esempio:

<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>

Nota: il codice Code-behind per questo esempio è uguale a quello utilizzato per il primo esempio in questo articolo.

Specifichiamo un CellTemplate personalizzato per l'ultima colonna, dove vorremmo fare una formattazione speciale per gli indirizzi e-mail. Per le altre colonne, dove vogliamo solo un output di testo di base, utilizziamo DisplayMemberBinding , semplicemente perché richiede molto meno markup.