O controle Grid

O Grid é provavelmente o mais complexo dos tipos de painel. Uma grade pode conter várias linhas e colunas. Você define uma altura para cada uma das linhas e uma largura para cada uma das colunas, em uma quantidade absoluta de pixels, em uma porcentagem do espaço disponível ou como automática, em que a linha ou coluna ajustará automaticamente seu tamanho dependendo da conteúdo. Use a grade quando os outros painéis não fizerem o trabalho, por exemplo quando você precisa de várias colunas e muitas vezes em combinação com os outros painéis.

Em sua forma mais básica, o Grid irá simplesmente pegar todos os controles que você colocar nele, esticá-los para usar o máximo de espaço disponível e colocá-lo um sobre o outro:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Grid>
</Window>

Como você pode ver, o último controle fica na posição de cima, o que significa que você não pode nem ver o primeiro botão. Não muito útil para a maioria das situações, então vamos tentar dividir o espaço, que é o que a grade faz tão bem. Fazemos isso usando ColumnDefinitions e RowDefinitions. No primeiro exemplo, vamos nos ater às colunas:

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

Neste exemplo, dividimos simplesmente o espaço disponível em duas colunas, que compartilharão o espaço igualmente, usando uma "largura de estrela" (isso será explicado mais adiante). No segundo botão, eu uso uma propriedade chamada Attached para colocar o botão na segunda coluna (0 é a primeira coluna, 1 é o segundo e assim por diante). Eu poderia ter usado essa propriedade no primeiro botão também, mas ela é automaticamente atribuída à primeira coluna e à primeira linha, que é exatamente o que queremos aqui.

Como você pode ver, os controles ocupam todo o espaço disponível, que é o comportamento padrão quando a grade organiza seus controles filhos. Ele faz isso definindo o HorizontalAlignment e VerticalAlignment em seus controles filho para Stretch.

Em algumas situações, você pode querer que eles ocupem apenas o espaço necessário e / ou controlem como eles são colocados na Grade. A maneira mais fácil de fazer isso é definir o HorizontalAlignment e VerticalAlignment diretamente nos controles que você deseja manipular. Aqui está uma versão modificada do exemplo acima:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>		
		<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
		<Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>
	</Grid>
</Window>

Como você pode ver na imagem, o primeiro botão agora é colocado no topo e centralizado. O segundo botão é colocado no meio, alinhado à direita.

Resumo

O Grid é um painel muito versátil, com diversas possibilidades além das que vimos neste artigo. Iremos explorar elas nos próximos artigos.