Grid Kontrolü

Grid panel tipleri içinde en karmaşık olanı. Bir Grid bir çok satır ve sütun içerebilir. Her satıra yükseklik ve her sütuna genişlik belirleyebilirsiniz. Bunu piksel olarak, alanın yüzde miktarı olarak veya satır ya da sütunun içeriğine göre boyutunu otomatik ayarlayacağı Auto olarak ayarlayabilirsiniz. Grid'i diğer paneller işinizi görmeye yetmeyince kullanın, örn. diğer panellerle birlikte kombinasyon oluşturan ve birden çok satır ve sütundan oluşan yerleşimler için.

En basit şeklinde Grid içindeki tüm alt kontrolleri alanı dolduracak kadar sündürür ve üst üste koyar :

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Grid>
</Window>

Gördüğünüz gibi en son yazılan kontrol en üstte pozisyon alır ve ilk butonu göremezsiniz. Tabi ki çok durumda bu faydalı değil, öyleyse alanı bölmeye çalışalım, Grid bunu çok iyi yapar. Bunu ColumnDefinitions ve RowDefinitions elemanları ekleyerek yaparız. İlk örnekte sütunlar kullanacağız :

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2</Button>
	</Grid>
</Window>

Bu örnekte mevcut alanı eşit büyüklükte iki sütuna böldük, bunu "star width" ile yaptık (sonra açıklayacağız) . İkinci butonun sütununu belirtmek için bir bağıl özellik kullandık, sütun numaraları sıfırdan başlari dolayısıyla 1 değeri verdik. İlk buton için sütun belirtmeye gerek yok çünkü default olarak ilk satır ve ilk sütuna yerleştirilir.

Gördüğünüz üzere Grid'in default yerleştirmesi olarak içindeki kontroller tüm alanı dolduracak şekilde sündürüldü, Grid bunu alt kontrollerin HorizontalAlignment ve VerticalAlignment özelliklerini ayarlayarak yapar.

Bazı durumlarda kontrolün minimum alanı alacak boyutta olmasını ve/veya kontrolün Grid içinde yerleşimin kontrol etmeyi isteyebilirsiniz. Bunun en kolay yolu direk olarak kontrolün HorizontalAlignment ve VerticalAlignment özelliklerine istediğiniz değerleri vermektir. Şimdi az önceki örneğin değiştirilmiş hali :

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>		
		<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
		<Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>
	</Grid>
</Window>

Çıktının ekran görüntüsünde gördüğünüz gibi, ilk buton artık üstte ve ortada, ikinci buton da sağda ve ortada.

Sonuç

Grid bu makalede gördüğümüz gibi çok esnek bir panel, önümüzdeki bazı makalelerde bu yerleşimi deşmeye devam edeceğiz.