ListView mit einem GridView

In den vorherigen ListView Artikeln haben wir die Standardversion der ListView benutzt, ohne eine selbst festzulegen. Deswegen funktioniert diese ListView fast wie eine WPF-ListBox, abgesehen von ein paar kleinen Unterschieden. Die nützlichste Eigenschaft der ListView sind die Views, wozu es eine schon gibt: die GridView.

Mit einem GridView können Sie mehrere Datenspalten in Ihrer ListView erhalten, so wie Sie es vom Windows Explorer kennen. Nur um sicherzugehen, dass Sie verstehen, was ich meine, beginnen wir mit einem einfachen Beispiel:

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

Daher verwenden wir für Testdaten die gleiche Benutzerklasse wie bisher, die wir dann an die ListView anbinden. Daran ist nichts anders als in den vorangegangenen Kapiteln, aber wie Sie auf dem Screenshot sehen können, ist das Layout sehr unterschiedlich. Dies ist die Stärke der Datenbindung - die gleichen Daten, aber auf eine völlig andere Weise dargestellt, nur durch Änderung des Markups.

Im Markup (XAML) definieren wir eine View für den ListView über die Eigenschaft ListView.View. Wir setzen es auf eine GridView, die derzeit der einzige enthaltene View-Typ im WPF ist (Sie können aber ganz einfach einen eigenen erstellen!). Die GridView gibt uns die spaltenbasierte Ansicht, die Sie auf dem Screenshot sehen.

Innerhalb der GridView definieren wir drei Spalten, eine für jede der Daten, die wir anzeigen möchten. Die Header-Eigenschaft wird verwendet, um den Text anzugeben, den wir für die Spalte anzeigen möchten, und dann verwenden wir die DisplayMemberBinding-Eigenschaft, um den Wert an eine Eigenschaft aus unserer Benutzerklasse zu binden.

Zellinhalt mit Vorlagen

Die Verwendung der DisplayMemberBinding-Eigenschaft beschränkt sich auf die Ausgabe einfacher Zeichenketten, ohne jegliche benutzerdefinierte Formatierung, aber die WPF ListView kann viel mehr. Durch die Angabe einer Vorlage, eines CellTemplates, übernehmen wir die volle Kontrolle darüber, wie der Inhalt in den Zellen jeder Spalte dargestellt wird.

Die GridViewColumn verwendet das DisplayMemberBinding als erste Priorität, wenn es vorhanden ist. Die zweite Wahl ist die CellTemplate Eigenschaft, die wir für dieses Beispiel verwenden werden:

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

Bitte beachten Sie: Der Code-Behind für dieses Beispiel ist derselbe wie für das erste Beispiel in diesem Artikel.

Wir spezifizieren eine benutzerdefinierte CellTemplate für die letzte Spalte, in der wir einige spezielle Formatierungen für die E-Mail-Adressen vornehmen möchten. Für die anderen Spalten, in denen wir nur einfache Textausgabe wünschen, bleiben wir bei der DisplayMemberBinding, einfach weil sie viel weniger Markup benötigt.