TOC

This article is currently in the process of being translated into Polish (~49% done).

Kontrolka ListView:

ListView, data binding and ItemTemplate

W poprzednim artykule ręcznie wypełniliśmy kontrolkę ListView za pomocą kodu XAML, ale w WPF chodzi o powiązanie danych. Pojęcie powiązania danych zostało szczegółowo wyjaśnione w innej części tego samouczka, ale mówiąc ogólnie, chodzi o oddzielenie interfejsu od danych. Spróbujmy więc powiązać jakieś dane z ListView:

<Window x:Class="WpfTutorialSamples.ListView_control.ListViewDataBindingSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ListViewDataBindingSample" Height="300" Width="300">
    <Grid>
		<ListView Margin="10" Name="lvDataBinding"></ListView>
	</Grid>
</Window>
using System;
using System.Collections.Generic;
using System.Windows;

namespace WpfTutorialSamples.ListView_control
{
	public partial class ListViewDataBindingSample : Window
	{
		public ListViewDataBindingSample()
		{
			InitializeComponent();
			List<User> items = new List<User>();
			items.Add(new User() { Name = "John Doe", Age = 42 });
			items.Add(new User() { Name = "Jane Doe", Age = 39 });
			items.Add(new User() { Name = "Sammy Doe", Age = 13 });
			lvDataBinding.ItemsSource = items;
		}
	}

	public class User
	{
		public string Name { get; set; }

		public int Age { get; set; }
	}
}

Wypełniamy listę naszych obiektów User, z których każdy ma imię i wiek. Proces powiązania danych odbywa się automatycznie, gdy tylko przypiszemy listę do właściwości ItemsSource elementu ListView, ale wynik jest nieco zniechęcający:

Każdy użytkownik jest reprezentowany przez swoją nazwę typu w ListView. Należy się tego spodziewać, bo .NET nie ma pojęcia jak chcesz wyświetlić swoje dane, więc po prostu wywołuje metodę ToString() na każdym obiekcie i używa jej wyniku do zaprezentowania elementu.

Możemy to wykorzystać i nadpisać metodę ToString() aby uzyskać bardziej znaczący wynik. Spróbuj zastąpić klasę User tą wersją:

public class User
{
	public string Name { get; set; }

	public int Age { get; set; }

	public override string ToString()
	{
		return this.Name + ", " + this.Age + " years old";
	}
}

Jest to widok o wiele bardziej przyjazny dla użytkownika i w niektórych przypadkach zadziała bardzo dobrze, ale poleganie na prostym stringu nie jest tak elastyczne. Być może chcesz pogrubić część tekstu lub wyświetlić w innym kolorze? Może chcesz mieć obrazek? Na szczęście WPF sprawia, że wszystko to będzie proste jak użyjesz szablonów.

ListView with an ItemTemplate

WPF is all about templating, so specifying a data template for the ListView is very easy. In this example, we'll do a bunch of custom formatting in each item, just to show you how flexible this makes the WPF ListView.

<Window x:Class="WpfTutorialSamples.ListView_control.ListViewItemTemplateSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ListViewItemTemplateSample" Height="150" Width="350">
    <Grid>
		<ListView Margin="10" Name="lvDataBinding">
			<ListView.ItemTemplate>
				<DataTemplate>
					<WrapPanel>
						<TextBlock Text="Name: " />
						<TextBlock Text="{Binding Name}" FontWeight="Bold" />
						<TextBlock Text=", " />
						<TextBlock Text="Age: " />
						<TextBlock Text="{Binding Age}" FontWeight="Bold" />
						<TextBlock Text=" (" />
						<TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />
						<TextBlock Text=")" />
					</WrapPanel>
				</DataTemplate>
			</ListView.ItemTemplate>
		</ListView>
	</Grid>
</Window>
using System;
using System.Collections.Generic;
using System.Windows;

namespace WpfTutorialSamples.ListView_control
{
	public partial class ListViewItemTemplateSample : Window
	{
		public ListViewItemTemplateSample()
		{
			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 = 13, Mail = "sammy.doe@gmail.com" });
			lvDataBinding.ItemsSource = items;
		}
	}

	public class User
	{
		public string Name { get; set; }

		public int Age { get; set; }

		public string Mail { get; set; }
	}
}

We use a bunch of TextBlock controls to build each item, where we put part of the text in bold. For the e-mail address, which we added to this example, we underline it, give it a blue color and change the mouse cursor, to make it behave like a hyperlink.

Summary

Using an ItemTemplate and data binding, we produced a pretty cool ListView control. However, it still looks a lot like a ListBox. A very common usage scenario for a ListView is to have columns, sometimes (e.g. in WinForms) referred to as a details view. WPF comes with a built-in view class to handle this, which we will talk about in the next chapter.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!