ListView c GridView

В предыдущих статьях о ListView, мы рассмотрели самые базовые варианты использования WPF ListView, не предусматривающие возможности указания собственного представления (View). В результате у нас получилось нечто очень похожее на WPF ListBox, хотя и с некоторыми уточняющими изменениями. Реальная мощь раскрывается при использовании представлений (views), к тому же есть одно специальное встроенное: GridView.

Используя GridView, можно получить несколько колонок данных в ListView, примерно как в Windows Explorer. Для наглядности начнем с простого примера:

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

Итак, мы используем тот же самый класс User что и раньше для тестовых данных, которые мы привязываем к ListView. Это то же самое что мы видели в предыдущих главах, но, как видно на скриншоте, раскладка очень отличается. В этом сила привязки данных - те же данные, но представлены полностью другим способом, просто с помощью изменения разметки.

В XAML разметке мы определяем представление (View) для ListView, используя свойство ListView.View. Мы настраиваем его как GridView, которое на данный момент является единственным типом представления уже включенным в WPF (но вы можете легко создать свое собственное!). GridView это то, что дает нам колоночное представление, которое видно на скриншоте.

Внутри GridView мы определяем три колонки, по одной на каждую часть данных, которые мы хотим показать. Свойство Header используется для задания текста, который мы бы хотели показать в шапке колонки и далее мы используем свойствоDisplayMemberBinding для привязки экранных значений к свойствам из нашего класса User.

Шаблон содержимого ячейки

Использование свойства DisplayMemberBinding довольно сильно ограничено выводом простых текстовых строк, совсем без специфичного форматирования, но WPF ListView может быть гораздо гибче. Определяя шаблон ячейки CellTemplate, мы получаем полный контроль над отрисовкой содержимого внутри заданной ячейки колонки.

GridViewColumn будет использовать DisplayMemberBinding первым по порядку, как уже представлено. Вторым выбором будет свойство CellTemplate, который мы используем в этом примере:

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

На заметку: Программный код для этого примера тот же самый, что был использован в первом примере в этой статье

Мы настраиваем собственный шаблон ячейки CellTemplate для последней колонки, в котором мы можем задать специализированное форматирование для адресов электронной почты. Для остальных колонок, где нам достаточно базового текстового вывода, мы обошлись DisplayMemberBinding, просто потому что это требует меньше разметки.