ListView com um GridView

Nos artigos ListView anteriores, usamos a versão mais básica do ListView do WPF, que é aquela sem uma exibição personalizada especificada. Isso resulta em um ListView que age muito como o ListBox do WPF, com algumas diferenças sutis. O poder real está nas visões e o WPF vem com uma visão especializada embutida: o GridView.

Usando o GridView, você pode obter várias colunas de dados em seu ListView, da mesma forma que você vê no Windows Explorer. Apenas para garantir que todos possam visualizá-lo, começaremos com um exemplo básico:

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

Portanto, usamos a mesma classe de usuário que anteriormente, para dados de teste, que depois associamos ao ListView. Isso é tudo o mesmo que vimos nos capítulos anteriores, mas como você pode ver na captura de tela, o layout é bem diferente. Este é o poder da vinculação de dados - os mesmos dados, mas apresentados de uma maneira completamente diferente, apenas alterando a marcação.

Na marcação (XAML), definimos uma exibição para o ListView, usando a propriedade ListView.View. Nós configuramos para um GridView, que atualmente é o único tipo de view incluído no WPF (você pode facilmente criar o seu próprio!). O GridView é o que nos dá a visão baseada em colunas que você vê na captura de tela.

Dentro do GridView, definimos três colunas, uma para cada uma das partes de dados que desejamos mostrar. A propriedade Header é usada para especificar o texto que gostaríamos de mostrar para a coluna e, em seguida, usamos a propriedade DisplayMemberBinding para vincular o valor a uma propriedade de nossa classe User .

Teor de células modeladas

Usar a propriedade DisplayMemberBinding é praticamente limitado à saída de strings simples, sem nenhuma formatação personalizada, mas o ListView do WPF é muito mais flexível do que isso. Ao especificar um CellTemplate , assumimos o controle total de como o conteúdo é renderizado dentro da célula da coluna específica.

O GridViewColumn usará o DisplayMemberBinding como sua primeira prioridade, ele está presente. A segunda opção será a propriedade CellTemplate, que usaremos para este exemplo:

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

Veja: O código Code-behind para este exemplo é o mesmo que foi usado no primeiro exemplo deste artigo.

Nós especificamos um CellTemplate personalizado para a última coluna, onde gostaríamos de fazer alguma formatação especial para os endereços de e-mail. Para as outras colunas, em que apenas queremos saída de texto básico, nos limitamos ao DisplayMemberBinding , simplesmente porque requer menos marcação.