Панель 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>

Здесь мы просто определили сетку с двумя строками и двумя колонками; каждая ячейка занимает равную долю площади. Первые две кнопки используют колонки обычным образом, но для третьей кнопки мы сделали так, чтобы она занимала две колонки во второй строке, используя атрибут ColumnSpan.

Этот пример очень простой и мы бы могли достичь такого же эффекта за счет комбинации панелей, но эти возможности панели Grid будут весьма полезны для более сложных случаев. Давайте попробуем что-то более интересное, чтобы показать насколько это мощный инструмент:

<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 выполняется очень легко. В одной из следующих статей мы будем использовать объединение вместе с другими возможностями Grid в более практичном примере.