Grid- Span

Default Grid davranışında her kontrol bir hücreye yerleşir, fakat bazen bir kontrolün birden fazla satır veya sütunda yayılmasını isteyebilirsiniz. Şükür ki bağıl özellikler ColumnSpan ve RowSpan kullanarak Grid bunu çok kolay yapar. Bu özelliklerin default değeri 1 ama siz kontrolün birden fazla satır ya da sütuna yayılması için bu değeri değiştirebilirsiniz.

İşte size ColumnSpan özelliğini kullanan basit bir örnek :

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

Yerleşimi hepsi eşit alanlara sahip iki satır ve iki sütuna parçaladık. İlk iki buton bulundukları sütuna normal yerleşmiş, fakat üçüncü butonu ColumnSpan özelliğini kullanarak ikinci satırdaki iki sütunu da işgal edecek şekilde yayıyoruz.

Böyle basit olunca aynı etkiyi panellerin kombinasyonu ile de yapabiliriz, ama daha gelişmiş örneklerde bu yöntem daha kullanışlıdır. Şimdi bunun nasıl güçlü bir yöntem olduğunu gösteren bir örnek deneyelim :

<Window x:Class="WpfTutorialSamples.Panels.GridColRowSpanAdvanced"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridColRowSpanAdvanced" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Button Grid.ColumnSpan="2">Button 1</Button>
		<Button Grid.Column="3">Button 2</Button>
		<Button Grid.Row="1">Button 3</Button>
		<Button Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="2">Button 4</Button>
		<Button Grid.Column="0" Grid.Row="2">Button 5</Button>
	</Grid>
</Window>

Üç satır ve üç sütunla dokuz hücreye sahibiz, fakat bu örnekte satır ve sütun birleştirme kombinasyonları ile alana sadece beş buton yerleştirdik. Button 4'te görüldüğü gibi bir kontrol aynı anda hem satırlara hem sütunlara yayılabilir.

Yani bir Grid içinde birkaç satır veya sütuna yayılan yerleşim çok kolay. Önümüzdeki makalelerden birinde çok daha pratik bir uygulamada satır sütun birleştirmeleri ile birlikte diğer Grid tekniklerini de kullanacağız.