The ItemsControl

WPF, bir veri listesini görüntülemek için geniş bir kontrol yelpazesi sunar. Bu kontroller farklı şekil ve biçimlerde gelir ve ne kadar karmaşık oldukları ve sizin için ne kadar iş yaptığı açısından farklılık gösterir. En basit versiyon, çoğunlukla sadece bir işaretleme tabanlı döngü olan ItemsControl'dür – tüm stil ve şablonları uygulamanız gerekir, ancak birçok durumda tam olarak ihtiyacınız olan şey budur.

A simple ItemsControl example

Çok basit bir örnekle başlayalım, burada ItemsControl'a bir dizi öğe veriyoruz. Bu, ItemsControl'ün ne kadar basit olduğunu size gösterecektir:

<Window x:Class="WpfTutorialSamples.ItemsControl.ItemsControlSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:system="clr-namespace:System;assembly=mscorlib"
        Title="ItemsControlSample" Height="150" Width="200">
    <Grid Margin="10">
		<ItemsControl>
			<system:String>ItemsControl Item #1</system:String>
			<system:String>ItemsControl Item #2</system:String>
			<system:String>ItemsControl Item #3</system:String>
			<system:String>ItemsControl Item #4</system:String>
			<system:String>ItemsControl Item #5</system:String>
		</ItemsControl>
	</Grid>
</Window>

Gördüğünüz gibi, öğeleri tekrarlamak için sadece 5 TextBlock kontrolü eklemek yerine bir kontrol kullandığımızı gösteren hiçbir şey yok - ItemsControl varsayılan olarak tamamen görünüşsüzdür. Eğer öğelerden birine tıklarsanız, hiçbir şey olmaz çünkü seçili öğe için herhangi bir olay işleyicisi yoktur.

ItemsControl with data binding

Tabii ki, ItemsControl, ilk örnekte yaptığımız gibi işaretleme içinde tanımlanan öğelerle kullanılmak üzere tasarlanmamıştır. WPF'deki neredeyse tüm diğer kontroller gibi, ItemsControl de veri bağlama için yapılmıştır; burada, code-behind sınıflarımızın kullanıcıya nasıl sunulacağını tanımlamak için bir şablon kullanırız.

Bunu göstermek için, kullanıcıya bir TO-DO listesi gösterdiğim bir örnek hazırladım ve kendi şablonlarınızı tanımladığınızda her şeyin ne kadar esnek hale geldiğini göstermek için, mevcut tamamlanma yüzdesini göstermek amacıyla bir ProgressBar kontrolü kullandım. Önce bazı kodlar, ardından bir ekran görüntüsü ve sonrasında her şeyin açıklaması:

<Window x:Class="WpfTutorialSamples.ItemsControl.ItemsControlDataBindingSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ItemsControlDataBindingSample" Height="150" Width="300">
    <Grid Margin="10">
		<ItemsControl Name="icTodoList">
			<ItemsControl.ItemTemplate>
				<DataTemplate>
					<Grid Margin="0,0,0,5">
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="*" />
							<ColumnDefinition Width="100" />
						</Grid.ColumnDefinitions>
						<TextBlock Text="{Binding Title}" />
						<ProgressBar Grid.Column="1" Minimum="0" Maximum="100" Value="{Binding Completion}" />
					</Grid>
				</DataTemplate>
			</ItemsControl.ItemTemplate>
		</ItemsControl>
	</Grid>
</Window>

using System;
using System.Windows;
using System.Collections.Generic;

namespace WpfTutorialSamples.ItemsControl
{
	public partial class ItemsControlDataBindingSample : Window
	{
		public ItemsControlDataBindingSample()
		{
			InitializeComponent();

			List<TodoItem> items = new List<TodoItem>();
			items.Add(new TodoItem() { Title = "Complete this WPF tutorial", Completion = 45 });
			items.Add(new TodoItem() { Title = "Learn C#", Completion = 80 });
			items.Add(new TodoItem() { Title = "Wash the car", Completion = 0 });

			icTodoList.ItemsSource = items;
		}
	}

	public class TodoItem
	{
		public string Title { get; set; }
		public int Completion { get; set; }
	}
}

Bu örneğin en önemli kısmı, ItemsControl içinde, ItemsControl.ItemTemplate etiketinin içinde belirttiğimiz şablondur. İki sütun elde etmek için bir Grid paneli ekliyoruz: İlk sütunda, TO-DO öğesinin başlığını gösterecek bir TextBlock var, ikinci sütunda ise Completion özelliğine bağladığımız bir ProgressBar kontrolü bulunuyor.

Şablon şimdi bir TodoItem'ı temsil ediyor, bunu Code-behind dosyasında tanımlıyoruz, burada bir dizi TodoItem örneğini oluşturuyor ve bunları bir listeye ekliyoruz. Sonunda, bu liste ItemsControl'ümüzün ItemsSource özelliğine atanır, ki bu da gerisini bizim için halleder. Listede her bir öğe, sonuçta elde edilen ekran görüntüsünden de görebileceğiniz gibi, şablonumuzu kullanarak görüntülenir.

The ItemsPanelTemplate property

Yukarıdaki örneklerde, tüm öğeler üstten alta doğru sıralanır ve her öğe tam bir satırı kaplar. Bunun nedeni, ItemsControl'ün varsayılan olarak tüm öğelerimizi dikey hizalanmış bir StackPanel'e atmasıdır. Ancak bunu değiştirmek oldukça kolaydır, çünkü ItemsControl, tüm öğeleri tutacak panel türünü değiştirmemize olanak tanır. İşte bir örnek:

<Window x:Class="WpfTutorialSamples.ItemsControl.ItemsControlPanelSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:system="clr-namespace:System;assembly=mscorlib"
        Title="ItemsControlPanelSample" Height="150" Width="250">
	<Grid Margin="10">
		<ItemsControl>
			<ItemsControl.ItemsPanel>
				<ItemsPanelTemplate>
					<WrapPanel />
				</ItemsPanelTemplate>
			</ItemsControl.ItemsPanel>
			<ItemsControl.ItemTemplate>
				<DataTemplate>
					<Button Content="{Binding}" Margin="0,0,5,5" />
				</DataTemplate>
			</ItemsControl.ItemTemplate>
			<system:String>Item #1</system:String>
			<system:String>Item #2</system:String>
			<system:String>Item #3</system:String>
			<system:String>Item #4</system:String>
			<system:String>Item #5</system:String>
		</ItemsControl>
	</Grid>
</Window>

ItemsControl'ün şablon olarak bir WrapPanel kullanmasını sağlamak için, ItemsPanelTemplate özelliğinde bir tane tanımlıyoruz ve eğlence amacıyla, dizelerin button olarak render edilmesini sağlayan bir ItemTemplate ekliyoruz. WPF panellerinin herhangi birini kullanabilirsiniz, ancak bazıları diğerlerine göre daha kullanışlıdır.

Bir diğer iyi örnek ise UniformGrid panelidir; burada bir dizi sütun tanımlayabiliriz ve ardından öğelerimizi eşit genişlikteki sütunlarda düzenli bir şekilde görüntüleyebiliriz:

<Window x:Class="WpfTutorialSamples.ItemsControl.ItemsControlPanelSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:system="clr-namespace:System;assembly=mscorlib"
        Title="ItemsControlPanelSample" Height="150" Width="250">
	<Grid Margin="10">
		<ItemsControl>
			<ItemsControl.ItemsPanel>
				<ItemsPanelTemplate>
					<UniformGrid Columns="2" />
				</ItemsPanelTemplate>
			</ItemsControl.ItemsPanel>
			<ItemsControl.ItemTemplate>
				<DataTemplate>
					<Button Content="{Binding}" Margin="0,0,5,5" />
				</DataTemplate>
			</ItemsControl.ItemTemplate>
			<system:String>Item #1</system:String>
			<system:String>Item #2</system:String>
			<system:String>Item #3</system:String>
			<system:String>Item #4</system:String>
			<system:String>Item #5</system:String>
		</ItemsControl>
	</Grid>
</Window>

ItemsControl with scrollbars

ItemsControl'ü kullanmaya başladığınızda, çok yaygın bir problemle karşılaşabilirsiniz: Varsayılan olarak, ItemsControl'ün herhangi bir kaydırma çubuğu yoktur, bu da içerik sığmazsa, sadece kesileceği anlamına gelir. Bunu, bu makaledeki ilk örneğimizi alıp uygulamayı yeniden boyutlandırarak görebilirsiniz:

Ancak, WPF bunu çözmeyi çok kolay hale getiriyor. Birkaç olası çözüm vardır, örneğin, ItemsControl'ün kullandığı şablonu değiştirip bir ScrollViewer kontrolü ekleyebilirsiniz, ancak en kolay çözüm, ItemsControl'ün etrafına basitçe bir ScrollViewer eklemektir. İşte bir örnek:

<Window x:Class="WpfTutorialSamples.ItemsControl.ItemsControlSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:system="clr-namespace:System;assembly=mscorlib"
        Title="ItemsControlSample" Height="150" Width="200">
	<Grid Margin="10">
		<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
			<ItemsControl>
				<system:String>ItemsControl Item #1</system:String>
				<system:String>ItemsControl Item #2</system:String>
				<system:String>ItemsControl Item #3</system:String>
				<system:String>ItemsControl Item #4</system:String>
				<system:String>ItemsControl Item #5</system:String>
			</ItemsControl>
		</ScrollViewer>
	</Grid>
</Window>

Görünürlük seçeneklerini Auto olarak ayarladım, böylece sadece gerektiğinde görünür olmalarını sağladım. Ekran görüntüsünden de görebileceğiniz gibi, artık öğeler listesini kaydırarak gezinebilirsiniz.

Summary

ItemsControl, verilerinizin nasıl görüntüleneceği üzerinde tam kontrol sahibi olmak istediğinizde ve içeriğinizin seçilebilir olmasını istemediğinizde harikadır. Kullanıcının listeden öğeleri seçebilmesini istiyorsanız, diğer kontrol seçeneklerinden birini kullanmanız daha iyi olur, örneğin ListBox veya ListView. Bunlar ilerleyen bölümlerde açıklanacaktır.