Ejemplo de un ListView sencillo

El control ListView de WPF es muy minimalista en su forma más simple. De hecho, se parecerá bastante al control ListBox, a menos que se le empiecen a añadir vistas especializadas. Esto no es de extrañar, ya que ListView desciende directamente del control ListBox. Así que un ListView por defecto es sólo un ListBox con diferente modo de selección (más acerca de esto luego).

Vamos a crear un ListView en su forma más simple

<Window x:Class="WpfTutorialSamples.ListView_control.ListViewBasicSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ListViewBasicSample" Height="200" Width="200">
    <Grid>
		<ListView Margin="10">
			<ListViewItem>A ListView</ListViewItem>
			<ListViewItem IsSelected="True">with several</ListViewItem>
			<ListViewItem>items</ListViewItem>
		</ListView>
	</Grid>
</Window>

Esto es prácticamente lo más simple que uno obtiene, usando controles ListViewItem especificados manualmente para rellenar la lista con nada más que un texto representando cada ítem. El control WPF ListView más simple.

ListViewItem con una imagen

Debido a la naturaleza sin aspecto de WPF, la especificación de una imagen para un ListViewItem no se trata solo de asignar un ID o llave a una propiedad. En su lugar, tomas el control total y especificas los controles necesarios para representar tanto la imagen como el texto en el ListViewItem. Aquí hay un ejemplo:

<Window x:Class="WpfTutorialSamples.ListView_control.ListViewBasicSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ListViewBasicSample" Height="200" Width="200">
    <Grid>
		<ListView Margin="10">
			<ListViewItem>
				<StackPanel Orientation="Horizontal">
					<Image Source="/WpfTutorialSamples;component/Images/bullet_green.png" Margin="0,0,5,0" />
					<TextBlock>Green</TextBlock>
				</StackPanel>
			</ListViewItem>
			<ListViewItem>
				<StackPanel Orientation="Horizontal">
					<Image Source="/WpfTutorialSamples;component/Images/bullet_blue.png" Margin="0,0,5,0" />
					<TextBlock>Blue</TextBlock>
				</StackPanel>
			</ListViewItem>
			<ListViewItem IsSelected="True">
				<StackPanel Orientation="Horizontal">
					<Image Source="/WpfTutorialSamples;component/Images/bullet_red.png" Margin="0,0,5,0" />
					<TextBlock>Red</TextBlock>
				</StackPanel>
			</ListViewItem>
		</ListView>
	</Grid>
</Window>

Lo que hacemos aquí es muy simple. Debido a que ListViewItem proviene de la clase ContentControl, podemos especificar un control WPF como su contenido. En este caso, usamos un StackPanel, que tiene una Imagen y un TextBlock como controles secundarios.

Resumen

Como puede ver, la creación manual de un ListView en XAML es muy sencilla, pero en la mayoría de los casos, los datos del ListView provendrán de algún tipo de fuente de datos, que se debe procesar en el ListView en tiempo de ejecución. Trataremos de hacer eso en el próximo capítulo.