ListView con un GridView

En artículos previos sobre ListView, hemos usado la versión más básica del ListView de WPF, la cual es la que no especifica una vista personalizada. Esto deriva en un ListView que actua de forma similar al ListBox de WPF, con algunas sutiles diferencias. El potencial, sin embargo, radica en las vistas y WPF viene con una vista especializada de serie: la GridView.

Usando la GridView, puedes obtener múltiples columnas de datos en tu ListView, de la misma forma que puedes verlas en el Explorador de Windows. Sólo para asegurarnos de que todos pueden verla, comenzaremos con un ejemplo 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; }
	}
}

Por lo tanto, utilizamos la misma clase de usuario que anteriormente, para los datos de prueba, que luego vinculamos a ListView. Todo esto es lo mismo que vimos en capítulos anteriores, pero como puede ver en la captura de pantalla, el diseño es muy diferente. Este es el poder del enlace de datos: los mismos datos, pero presentados de forma completamente diferente, simplemente cambiando el marcado.

En el marcado (XAML), definimos una Vista para ListView, usando la propiedad ListView.View. Lo configuramos en un GridView, que actualmente es el único tipo de vista incluido en WPF (¡sin embargo, puede crear fácilmente el suyo propio!). El GridView es lo que nos da la vista basada en columnas que ves en la captura de pantalla.

Dentro de GridView, definimos tres columnas, una para cada una de las piezas de datos que deseamos mostrar. La propiedad Encabezado se usa para especificar el texto que nos gustaría mostrar para la columna y luego usamos la propiedad DisplayMemberBinding para vincular el valor a una propiedad de nuestra clase de usuario.

Contenido de celda mediante plantillas

El uso de la propiedad DisplayMemberBinding está bastante limitado a la salida de cadenas simples, sin ningún formato personalizado, pero el WPF ListView es mucho más flexible que eso. Al especificar una CellTemplate , tomamos el control total de cómo se representa el contenido dentro de la celda de columna específica.

La GridViewColumn usará el DisplayMemberBinding como opción prioritaria, si es que está presente. La segunda elección será la propiedad CellTemplate, la cual veremos usar en este ejemplo:

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

Tenga en cuenta: el código de código subyacente para este ejemplo es el mismo que el utilizado para el primer ejemplo en este artículo.

Especificamos un CellTemplate personalizado para la última columna, donde nos gustaría aplicar algún formato especial para las direcciones de correo electrónico. Para las otras columnas, donde sólo necesitamos mostrar texto normal, seguimos usando el DisplayMemberBinding, simplemente porque requiere menos marcado.