ListView s ovládacím prvkem GridView

V předchozích článcích o ListView jsme pracovali s nejzákladnější verzí WPF ListView, aniž bychom se starali o vlastního zobrazení obsahu. Důsledkem toho je, že ListView, se takto až na některé jemné rozdíly tváří podobně, jako ovládací prvek WPF ListBox. Skutečná síla tohoto prvku však spočívá právě v zobrazení obsahu a WPF přichází s jedním speciálně zabudovaným pohledem: prvkem GridView.

Pomocí GridView můžete vytvořit v ListView několik sloupců pro zobrazení dat, podobně jako je např. vidíte v Průzkumníkovi Windows. Jen abychom se ujistili, že si to každý umí představit, začneme základním příkladem:

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

Takže jako testovací data použijeme stejnou třídu User jako u předchozího příkladu, která jsou svázaná s ListView. Vše je shodné s příkladem, který jsme sestavili v předchozích kapitolách, ale jak si určitě všimnete, ze snímku obrazovky, zobrazení dat je velmi odlišné. Teď se představila síla datové vazby – stejná data, ale jsou zcela jiným způsobem prezentována, a to jen s pomocí tagů značkovacího jazyka.

V souboru (XAML) definujeme zobrazení pro ListView pomocí vlastnosti ListView.View. Tuto vlastnost jsme nastavili na GridView, což je v současné době jediný implicitně zahrnutý typ zobrazení ve WPF (můžete si snadno vytvořit svůj vlastní i když!). Díky GridView vidíme zobrazení založené na sloupcích, které vidíte na snímku obrazovky

Uvnitř GridView definujeme tři sloupce, každý z nich je určen pro konkrétní část dat, která chceme zobrazit. Vlastnost Header se používá k označení záhlaví daného sloupce, a pomocí vlastnosti DisplayMemberBinding navážeme k zobrazení data z naší třídy User.

Šablona obsahu buňky

Použití vlastnosti DisplayMemberBinding do značné míry omezuje výstup dat jen na prosté řetězce, bez jakéhokoliv vlastního formátování. Ale WPF ListView je však mnohem flexibilnější. Specifikací vlastnosti CellTemplate přebíráme plnou kontrolu nad tím, jak bude obsah dat v rámci konkrétní buňky daného sloupce zobrazen.

GridViewColumn používá primárně vlastnost DisplayMemberBinding, pokud je k dispozici. Druhou volbou je vlastnost CellTemplate, kterou použijeme pro tento příklad:

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

Upozornění: Kód na pozadí (Code-behind )pro tento příklad je stejný jako u prvního příkladu v tomto článku.

Pro poslední sloupec vytvoříme vlastní šablonu CellTemplate, kde budeme chtít naformátovat text jako e-mailovou adresu. Pro ostatní sloupce, kde chceme jen základní textový výstup, využijeme vazbu DisplayMemberBinding, jednoduše proto, že vyžaduje méně značek.