ListView with a GridView

Trong bài viết trước về ListView, chúng ta đã sử dụng dạng cơ bản nhất của ListView trong WPF, trong đó không có một View tùy chỉnh (custom View) nào được sử dụng. Kết quả là ListView hoạt động giống như một WPF ListBox với một vài khác biệt nhỏ. WPF xây dựng sẵn một GridView đóng vai trò một View có thể tận dụng được sức mạnh của ListView thay vì chỉ hoạt động như ListBox.

Bằng cách sử dụng GridView, bạn có thể tạo ra một số cột trong ListView, nó giống như chế độ xem Details View trong Windows Explorer. Để mọi người có thể hình dung ra, chúng ta sẽ bắt đầu với một ví dụ đơn giản:

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

Chúng ta đã sử dụng class User giống với các ví dụ trước đây, tạo ra các dữ liệu, sau đó bind đến ListView tương tự như các chương trước, nhưng như chúng ta có thể thấy trong hình, cách hiển thị dữ liệu rất khác. Chính điều này đã thể hiện rõ nhất sức mạnh của data binding - khi mà đối với cùng một dữ liệu, nó có thể hiển thị dữ liệu theo nhiều cách khác nhau, chỉ thông qua việc bạn thay đổi mã XAML.

Trong XAML, chúng ta định nghĩa một View cho ListView bằng cách sử dụng thuộc tính ListView.View. Trong ví dụ trên, chúng ta đã sử dụng một GridView, mà hiện tại nó cũng là kiểu View duy nhất được WPF xây dựng sẵn (dù vậy bạn cũng có thể tạo kiểu View cho riêng bạn một cách dễ dàng). GridView cho phép chúng ta tạo ra View dựa trên các cột như bạn thấy trong hình.

Bên trong GridView, chúng tạo ra 3 cột, mỗi cột hiển thị các phần dữ liệu mà chúng ta muốn hiển thị. Thuộc tính Header chỉ rõ đoạn chữ mà cột đó muốn hiển thị (tiêu đề của cột) và sau đó sử dụng thuộc tính DisplayMemberBinding để bind giá trị trong cột đến thuộc tính trong class User.

Templated cell content

Sử dụng thuộc tính DisplayMemberBinding khá là hạn chế do việc sử dụng các string đơn giản, không được định dạng để hiển thị, nhưng WPF ListView có thể linh động hơn thế. Bằng cách thiết đặt một DisplayMemberBinding, chúng ta có thể lựa chọn cách mà dữ liệu được hiển thị trong các ô được thiết đặt.

GridViewColumn sẽ ưu tiên sử dụng DisplayMemberBinding, sau đó mới đến dùng thuộc tính CellTemplate để quyết định cách mà dữ liệu được hiển thị, và chúng ta sẽ dùng nó ngay ở ví dụ này:

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

Lưu ý: Phần code-behind cho ví dụ này giống như ở ví dụ đầu tiên trong bài viết này.

Chúng ta đã tạo ra một CellTemplate cho cột cuối cùng để thực hiện thay đổi định dạng các địa chỉ email. Đối với các cột còn lại, chúng ta chỉ muốn hiển thị dữ liệu dưới dạng text mặc định, đơn giản là dùng thuộc tính DisplayMemberBinding vì nó không yêu cầu phải viết thêm nhiều mã XAML như CellTemplate.