TOC

This article is currently in the process of being translated into Portuguese (~93% done).

Painéis:

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.

Summary

The Grid is a very versatile panel, with many more possibilities than we saw in this article. We'll dig into the rest of them in the next several articles.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!