Grid - scalanie komórek

Domyślnym zachowaniem panelu Grid jest to, że każda kontrolka zajmuje jedną komórkę. Jednak czasem możesz chcieć aby kontrolka zajmowała obszar większy niż jeden rząd czy kolumna. Na szczęście Grid dostarcza do tego odpowiednie narzędia, w postaci dołączonych właściwości ColumnSpan oraz RowSpan. Domyślną wartością dla tych włąściwości jest 1, jednak możesz określić większy zakres kolumn oraz wierszy jakie mają zostać zajęte.

Poniższy przykład przedstawia użycie właściwości ColumnSpan:

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

W kodzie zdefiniowaliśmy dwie kolumy oraz dwa wiersze, które zajmują taką samą przestrzeń. Pierwsze dwa przyciski wykorzystują kolumny w normalny sposób. Jednak w przypadku trzeciego przycisku dodanie ColumnSpan sprawiło, że zajmuje on przestrzeń dwóch kolumn.

Przykład jest na tyle prosty, że mogliśmy równie dobrze użyć do tego kombinacji różnych paneli. Jednak w bardziej zaawansowanych przypadkach takie rozwiązanie jest naprawdę poręczne. Pora na przykład, który lepiej przedstawia jak użyteczne jest to rozwiązanie:

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

W przypadku trzech kolumn i trzech wierszy mielibyśmy dziewięć komórek. Jednak w powyższym przykładzie skorzystaliśmy z rozszerzania kontrolek na pozostałe komórki, tak aby wypełnić całą przestrzeń tylko pięcioma przyciskami. Jak łatwo zauważyć obszar kontrolki może zostać rozszerzony o dodatkowe wiersze, kolumny, lub jak w przypadky przycisku 4 z połączenia obu możliwości na raz.

Jak więc łatwo zauważyć scalanie ze sobą wielu kolumn i/lub wierszy w panelu Grid jest bardzo proste. W następnym artykule wykorzystamy scalanie, wraz z innymi możliwościami jakie daje nam Grid, w bardziej praktycznych przykładach.