Контейнер Grid(сітка, таблиця) - Об'єднання клітинок

За умовчуванням, кожен елемент керування займає одну клітинку контейнера Grid. Однак інколи потрібно, щоб він зайняв більше рядків чи стовпців. На шастя, Grid дає можливість зробити це завдяки властивостям ColumnSpan та RowSpan. За умовчуванням, вони мають значення 1, але можна вибрати більше число, щоб потрібний елемент зайняв більше рядків чи стовпців.

Ось дуже простий приклад, в якому можна використати властивість 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>

Ми просто створили 2 рядки та стовпці, кожен з яких займає однаковий простір. Перші дві кнопки використовують стовпці звичним способом, в той час, як третя займає два стовпці другого рядка, завдяки зміні значення властивості ColumnSpan.

Це настільки просте завдання, що достатньо було скористатися комбінуванням контейнерів, однак для більш складних випадків обєднання клітинок - це дуже корисний прийом. Давайте поглянемо на щось, що краже показує всю потужність цього методу:

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

Три рядки та колонки утворюють дев'ять клітинок, однак у цьому прикладі ми використали комбінацію об'єднання ряків та стовпців, щоб заповнити весь простір всього п'ятьма кнопками. Як ви бачите елемент керування може об'єднувати рядки, стовпці або все разом, як от кнопка 4.

Тож, як ви бачите, в контейнері Grid дуже легко реалізувати об'єднання багаьох рідків та/чи клітинок. В пізніших статтях ми будемо використовувати техніку об'єднання клітинок у більш практичних прикладах.