El Grid - Unidades

Hasta el momento, hemos usado mayormente el ancho y alto asterisco, que indica que una columna o fila debería tomar cierto porcentaje del espacio combinado. Sin embargo, existen otras dos formas de especificar el ancho y altura de una columna: Unidades absolutas y el ancho y altura automáticos (Auto). Intentemos crear una grilla en la cual combinemos éstas técnicas:

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

En este ejemplo, el primer botón tiene una ancho "asterisco", el segundo tiene su ancho cambiado a Auto y el último tiene un ancho estático de 100 pixels

El resultado se puede ver en la captura, donde el segundo botón sólo toma exactamente la cantidad de espacio que necesita para renderizar su largo texto, el tercer botón toma exactamente los 100 pixels que se le habían prometido y el primer botón, con el ancho variable, toma el resto.

En un grid donde una o varias columnas (o filas) tiene un ancho variable (asterisco), tienden a ocupar automáticamente el ancho/alto que no ha sido asignado todavía por las columnas/filas que usan un ancho/alto absoluto o auto. Esto llega a ser más obvio cuando cambiamos el tamaño de la ventana.

En la primera captura, puedes ver que el Grid reserva el espacio para los dos últimos botones, aunque esto signifique que el primero no tenga todo el espacio que necesita para su renderizado correcto. En la segunda captura, puedes ver que los dos últimos botones mantienen exactamente la misma cantidad de espacio, dejando el superávit de espacio al primer botón.

Esto puede ser una técnica muy útil cuando diseñamos una amplia gama de diálogos. Por ejemplo, considera un simple formulario de contacto donde el usuario introduzca un nombre, una dirección de e-mail y un comentario. Los dos primeros campos normalmente tendrán una altura fijada, mientras que el último tomará tanto espacio como le sea posible, dejando espacio para escribir un comentario mayor. En el siguiente capítulo, intentaremos construir un formulario de contacto usando el grid, las filas y las columnas de diferente alto y ancho.