O Grid - Unidades

Até agora usamos principalmente a largura / altura da estrela, que especifica que uma linha ou coluna deve ocupar uma certa porcentagem do espaço combinado. No entanto, existem duas outras maneiras de especificar a largura ou a altura de uma coluna ou linha: Unidades absolutas e Largura / altura automática. Vamos tentar criar um Grid onde nós misturamos estes:

<Window x:Class="WpfTutorialSamples.Panels.GridUnits"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridUnits" Height="200" Width="400">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="1*" />
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="100" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2 with long text</Button>
		<Button Grid.Column="2">Button 3</Button>
	</Grid>
</Window>

Neste exemplo, o primeiro botão tem uma largura de estrela, o segundo tem sua largura definida como Automática e a última tem uma largura estática de 100 pixels.

O resultado pode ser visto na imagem, onde o segundo botão leva exatamente a quantidade de espaço necessária para renderizar o texto mais longo, o terceiro botão leva exatamente os 100 pixels esperados e o primeiro botão, com a largura variável, o resto.

Em uma grade em que uma ou várias colunas (ou linhas) têm uma largura variável (estrela), elas automaticamente compartilham a largura / altura que ainda não é usada pelas colunas / linhas, o que usa uma largura / altura absoluta ou automática. Isso fica mais óbvio quando redimensionamos a janela:

Na primeira captura de tela, você verá que o Grid reserva o espaço para os dois últimos botões, mesmo que isso signifique que o primeiro não tenha todo o espaço necessário para renderizar corretamente. Na segunda tela, você verá os dois últimos botões mantendo a mesma quantidade de espaço, deixando o espaço excedente no primeiro botão.

Essa pode ser uma técnica muito útil ao projetar uma ampla variedade de diálogos. Por exemplo, considere um formulário de contato simples em que o usuário insere um nome, um endereço de e-mail e um comentário. Os dois primeiros campos geralmente terão uma altura fixa, enquanto o último pode ocupar tanto espaço quanto possível, deixando espaço para digitar um comentário mais longo. No próximo capítulo, tentaremos construir um formulário de contato, usando a grade e linhas e colunas de diferentes alturas e larguras.