Usando Grid: Um formulário de contato

Nos últimos dois capítulos, passamos por muitas informações teóricas, cada uma com alguns exemplos muito teóricos. Neste capítulo, combinaremos o que aprendemos sobre o Grid até agora, em um exemplo que pode ser usado no mundo real: Um simples formulário de contato.

A coisa boa sobre o formulário de contato é que ele é um exemplo de um diálogo comumente usado - você pode usar as técnicas usadas e aplicá-las a quase qualquer tipo de diálogo que precisar criar.

O primeiro exame desta tarefa é muito simples e mostrará um formulário de contato muito básico. Ele usa três linhas, duas delas com alturas automáticas e a última com altura de estrela, então consome o restante do espaço disponível:

<Window x:Class="WpfTutorialSamples.Panels.GridContactForm"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridContactForm" Height="300" Width="300">
    <Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>		
		<TextBox>Name</TextBox>
		<TextBox Grid.Row="1">E-mail</TextBox>
		<TextBox Grid.Row="2" AcceptsReturn="True">Comment</TextBox>		
	</Grid>
</Window>

Como você pode ver, o último TextBox simplesmente ocupa o espaço restante, enquanto os dois primeiros ocupam apenas o espaço de que necessitam. Tente redimensionar a janela e você verá o comentário TextBox redimensionar com ele.

Neste exemplo muito simples, não há rótulos para designar para que servem cada um dos campos. Em vez disso, o texto explicativo está dentro do TextBox, mas isso não é geralmente como uma caixa de diálogo do Windows parece. Vamos tentar melhorar o visual e a usabilidade um pouco:

<Window x:Class="WpfTutorialSamples.Panels.GridContactFormTake2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridContactFormTake2" Height="300" Width="300">
	<Grid Margin="10">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Label>Name: </Label>
		<TextBox Grid.Column="1" Margin="0,0,0,10" />
		<Label Grid.Row="1">E-mail: </Label>
		<TextBox Grid.Row="1" Grid.Column="1" Margin="0,0,0,10" />
		<Label Grid.Row="2">Comment: </Label>
		<TextBox Grid.Row="2" Grid.Column="1" AcceptsReturn="True" />
	</Grid>
</Window>

Mas talvez você esteja em uma situação em que o campo de comentários é bastante auto-explicativo? Nesse caso, vamos pular o rótulo e usar ColumnSpan para obter ainda mais espaço para o comentário TextBox:

<TextBox Grid.ColumnSpan="2" Grid.Row="2" AcceptsReturn="True" />

Então, como você pode ver, o Grid é um painel muito poderoso. Espero que você possa usar todas essas técnicas ao projetar seus próprios diálogos.