Usando el Grid: Un Formulario de contacto.

En los últimos capítulos pasamos por bastante información teórica, cada uno con ejemplos muy teóricos. En este capítulo vamos a combinar lo que hemos aprendido acerca del Grid y vamos a hacer un ejemplo que puede ser usado en el mundo real: Un formulario de contacto sencillo.

Lo bueno acerca del formulario de contacto es que es un ejemplo de un dialogo usado comúnmente puedes tomar la técnicas usadas y aplicarlas para casi cualquier tipo de dialogo que necesites crear.

Lo primero que haremos en esta tarea es muy sencillo y te enseñará un formulario de contacto muy básico. Se van a usar 3 filas, dos de ellas con la altura (heights) en Auto y la última con la altura de asterisco, para que consuma el resto del espacio disponible:

<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 puedes ver, la última TextBox (caja de texto) toma el espacio restante, mientras las primeras dos solo toman el espacio que requieren. Prueba cambiar el tamaño de tu ventana y verás la TextBox "comment" cambiar de tamaño junto con la ventana.

En este sencillo ejemplo, no hay etiquetas (labels) que designar para qué es cada campo (field). En cambio, el texto explicativo está adentro del TextBox, pero así no es como un diálogo de Windows normalmente parece. Vamos a intentar mejorar el estilo y la usabilidad un poco:

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

¿Pero quizás tú estás en una situación donde el campo "comment" es bastante autoexplicativo? En ese caso, vamos a evitarnos usar una etiqueta (label) y usemos "ColumnSpan" para obtener aún más espacio para la TextBox "comment":

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

Como puedes ver, la Grid es un panel muy poderoso. Ojalá puedas usar todas estas técnicas cuando estés diseñando tus propios formularios.