The Grid - Spanning

O comportamento padrão da Grade é que cada controle ocupa uma célula, mas às vezes você deseja que um determinado controle ocupe mais linhas ou colunas. Felizmente, o Grid torna isso muito fácil, com as propriedades Anexadas ColumnSpan e RowSpan. O valor padrão para essa propriedade é obviamente 1, mas você pode especificar um número maior para tornar o controle span mais linhas ou colunas.

Aqui está um exemplo muito simples, onde usamos a propriedade 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>

Nós apenas definimos duas colunas e duas linhas, todas ocupando a mesma parte do lugar. Os dois primeiros botões apenas usam as colunas normalmente, mas com o terceiro botão, fazemos com que ele ocupe duas colunas de espaço na segunda linha, usando o atributo ColumnSpan.

Isso tudo é tão simples que poderíamos ter usado uma combinação de painéis para obter o mesmo efeito, mas para casos um pouco mais avançados, isso é realmente útil. Vamos tentar algo que melhor mostre como isso é poderoso:

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

Com três colunas e três linhas, normalmente teríamos nove células, mas neste exemplo, usamos uma combinação de linhas e colunas para preencher todo o espaço disponível com apenas cinco botões. Como você pode ver, um controle pode abranger colunas extras, linhas extras ou no caso do botão 4: ambos.

Então, como você pode ver, é muito fácil abranger várias colunas e / ou linhas em uma grade. Em um artigo posterior, usaremos o spanning, juntamente com todas as outras técnicas de grid, em um exemplo mais prático.