ListView med et GridView

I de foregående ListView artikler har vi brugt den mest grundlæggende udgave af WPF Listview, hvilket er en uden et specielt View angivet. Dette resulterer i et ListView, som opfører sig meget som WPF ListBox med nogle diskrete forskelle. Den virkelige styrke ligger dog i visninger, og WPF har et specialiseret view indbygget: GridView.

Ved at bruge GridView, kan du få flere kolonner af data i dit Listview, lige som du ser det i Windows Explorer. Bare for at være sikker på, at alle kan se det for sig, starter vi med et grundlæggende eksempel:

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

Vi bruger den samme User klasse som tidligere til testdata, som vi binder til ListView. Dette er det samme, som vi så i de forrige afsnit, men som du kan se på skærmbilledet, er layoutet meget anderledes. Dette er styrken i databinding - samme data, men præsenteret på en helt anderledes måde, bare ved at ændre markup.

I markup (XAML) definerer vi et View til ListView ved hjælp af ListView.View egenskaben. Vi sætter den til et GridView, hvilket for øjeblikket er den eneste visningstype i WPF (du kan dog nemt lave dine egne!). GridView er det, der giver os den kolonnebasesrede visning, du ser i skærmbilledet.

Inde i GridView definerer vi tre kolonner, en til hver af de data, vi ønsker at vise. Header egenskaben bruges til at angive den tekst, vi vil vise for kolonnen, og derefter bruger vi DisplayMemberBinding egenskaben til at binde værdien til en egenskab fra vores User klasse.

Skabelonbaseret celleindhold

At bruge DisplayMemberBinding egenskaben begrænser os til at vis simple strenge uden nogen brugerdefineret formattering overhovedet, men WPF ListView er meget mere fleksibelt end det. Ved at angive en CellTemplate, tager vi fuld kontrol over hvordan, indholdet gengives i den specifikke kolonne-celle.

GridViewColumn vil bruge DisplayMemberBinding som førsteproritet, hvis den er tilgængelig. Andet valg vil være CellTemplate egenskaben, som vi vil bruge i dette eksempel:

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

Bemærk: Code-behind koden til dette eksempel er den samme som til det første eksempel i denne artikel.

Vi angiver en brugerdefinerete CellTemplate til den sidste kolonne, hvor vi gerne vil have noget speciel formattereing af e-mail adresserne. Til de andre kolonner, hvor vi bare ønsker grundlæggende tekstoutput, holder vi os til DisplayMemberBinding simpelthen fordi, det kræver mindre markup.