TOC

This article is currently in the process of being translated into Italian (~89% done).

Il controllo ListView:

ListView, data binding and ItemTemplate

Nell'articolo precedente, abbiamo popolato manualmente un controllo ListView tramite il codice XAML, ma in WPF è tutto basato sull'associazione di dati. Il concetto di associazione dei dati è spiegato in dettaglio in un'altra parte di questo tutorial, ma in generale si tratta di separare i dati dal layout. Quindi, proviamo ad associare alcuni dati a ListView:

<Window x:Class="WpfTutorialSamples.ListView_control.ListViewDataBindingSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ListViewDataBindingSample" Height="300" Width="300">
    <Grid>
		<ListView Margin="10" Name="lvDataBinding"></ListView>
	</Grid>
</Window>
using System;
using System.Collections.Generic;
using System.Windows;

namespace WpfTutorialSamples.ListView_control
{
	public partial class ListViewDataBindingSample : Window
	{
		public ListViewDataBindingSample()
		{
			InitializeComponent();
			List<User> items = new List<User>();
			items.Add(new User() { Name = "John Doe", Age = 42 });
			items.Add(new User() { Name = "Jane Doe", Age = 39 });
			items.Add(new User() { Name = "Sammy Doe", Age = 13 });
			lvDataBinding.ItemsSource = items;
		}
	}

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

		public int Age { get; set; }
	}
}

Popoliamo un elenco dei nostri oggetti utente, ogni utente ha un nome e un'età. Il processo di associazione dei dati avviene automaticamente non appena assegniamo l'elenco alla proprietà ItemsSource di ListView, ma il risultato è un po' scoraggiante:

Ogni utente è rappresentato dal nome del proprio tipo in ListView. Ciò è prevedibile, poiché .NET non ha la minima idea di come visualizzare i dati, quindi chiama semplicemente il metodo ToString () su ciascun oggetto e lo utilizza per rappresentare l'elemento.

Possiamo sovrascrivere il metodo ToString(), per ottenere un output più significativo. Prova a sostituire la classe User con questa versione:

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

	public int Age { get; set; }

	public override string ToString()
	{
		return this.Name + ", " + this.Age + " years old";
	}
}

Questa visualizzazione è più user friendly e andrà bene in alcuni casi, ma non sempre basta una semplice stringa. Come è possibile rendere una parte del testo in grassetto o un altro colore? Come si può inserire un'immagine? Fortunatamente, WPF rende tutto questo molto semplice usando i template.

ListView with an ItemTemplate

WPF è tutto basato sul modello, quindi specificare un modello di dati per ListView è molto semplice. In questo esempio, eseguiremo una serie di formattazioni personalizzate in ciascun elemento, solo per mostrarti quanto questo sia flessibile con ListView di WPF.

<Window x:Class="WpfTutorialSamples.ListView_control.ListViewItemTemplateSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ListViewItemTemplateSample" Height="150" Width="350">
    <Grid>
		<ListView Margin="10" Name="lvDataBinding">
			<ListView.ItemTemplate>
				<DataTemplate>
					<WrapPanel>
						<TextBlock Text="Name: " />
						<TextBlock Text="{Binding Name}" FontWeight="Bold" />
						<TextBlock Text=", " />
						<TextBlock Text="Age: " />
						<TextBlock Text="{Binding Age}" FontWeight="Bold" />
						<TextBlock Text=" (" />
						<TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />
						<TextBlock Text=")" />
					</WrapPanel>
				</DataTemplate>
			</ListView.ItemTemplate>
		</ListView>
	</Grid>
</Window>
using System;
using System.Collections.Generic;
using System.Windows;

namespace WpfTutorialSamples.ListView_control
{
	public partial class ListViewItemTemplateSample : Window
	{
		public ListViewItemTemplateSample()
		{
			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 = 13, Mail = "sammy.doe@gmail.com" });
			lvDataBinding.ItemsSource = items;
		}
	}

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

		public int Age { get; set; }

		public string Mail { get; set; }
	}
}

Usiamo alcuni controlli TextBlock per costruire ogni elemento: una parte del testo la mettiamo in grassetto. Per l'indirizzo e-mail, che abbiamo aggiunto a questo esempio, lo sottolineiamo, gli diamo un colore blu e cambiamo il cursore del mouse, per farlo comportare come un collegamento ipertestuale.

Summary

Usando un ItemTemplate e un'associazione di dati, abbiamo prodotto un controllo ListView piuttosto interessante. Tuttavia, sembra ancora molto simile a un ListBox. Uno scenario di utilizzo molto comune per un ListView è avere colonne, a volte (ad es. In WinForms) indicate come vista dettagli. WPF viene fornito con una classe di visualizzazione integrata per gestire ciò, di cui parleremo nel prossimo capitolo.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!