ListView, data binding and ItemTemplate

Önceki makalede, bir ListView kontrolünü XAML kodu ile manuel olarak doldurduk, ancak WPF'de her şey binding ile ilgilidir. Binding kavramı, bu öğreticinin başka bir kısmında detaylı olarak açıklanmıştır, ancak genel olarak veri ile düzenin ayrılmasından bahsedilir. Şimdi, bir veriyi ListView'e binding etmeyi deneyelim:

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

Kendi User (Kullanıcı) nesnelerimizden oluşan bir liste oluşturuyoruz; her kullanıcı bir isim ve yaşa sahip. Binding işlemi, listeyi ListView'in ItemsSource özelliğine atadığımız anda otomatik olarak gerçekleşir, ancak sonuç biraz cesaret kırıcıdır:

Her kullanıcı, ListView'de tür adıyla temsil edilir. Bu, beklenen bir durumdur çünkü .NET, verilerinizi nasıl görüntülemek istediğiniz konusunda hiçbir fikre sahip değildir, bu yüzden her nesne üzerinde ToString() metodunu çağırır ve öğeyi temsil etmek için bunu kullanır.

Bunu avantajımıza kullanabiliriz ve daha anlamlı bir çıktı almak için ToString() metodunu geçersiz kılabiliriz (override). User Class'ı aşağıdaki gibi değiştirmeyi deneyin:

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

	public int Age { get; set; }

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

Bu, çok daha kullanıcı dostu bir görüntüleme şeklidir ve bazı durumlarda gayet iyi iş görebilir, ancak basit bir metne güvenmek o kadar esnek değildir. Belki metnin bir kısmının kalın olmasını ya da başka bir renkte olmasını istersiniz? Belki bir resim eklemek istersiniz? Neyse ki, WPF tüm bunları çok basit bir şekilde, şablonlar (templates) kullanarak yapmanızı sağlar.

ListView with an ItemTemplate

WPF tamamen şablonlar (templating) ile ilgilidir, bu yüzden ListView için bir veri şablonu (data template) belirtmek çok kolaydır. Bu örnekte, her öğede bir dizi özel biçimlendirme yapacağız, böylece WPF ListView'in ne kadar esnek olduğunu göstereceğiz.

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

Her öğeyi oluşturmak için bir dizi TextBlock kontrolü kullanıyoruz, burada metnin bir kısmını kalın yapıyoruz. Bu örneğe eklediğimiz e-posta adresi için, onu altı çizili yapıyoruz, mavi renk veriyoruz ve fare imlecini değiştiriyoruz, böylece bir köprü gibi davranmasını sağlıyoruz.

Summary

Bir ItemTemplate ve data binding kullanarak oldukça şık bir ListView kontrolü oluşturduk. Ancak hâlâ bir ListBox'a çok benziyor. ListView için çok yaygın bir kullanım senaryosu, bazen (örneğin WinForms'ta) detay görünümü olarak adlandırılan sütunlara sahip olmaktır. WPF, bunu yönetmek için yerleşik bir görünüm sınıfı sunar, bunu bir sonraki bölümde ele alacağız.