El control Grid

El control Grid probablemente es el más complejo de los controles tipo panel. Puede contener múltiples filas y columnas. Se define la altura para cada fila y el ancho de cada columna. Esas dimensiones pueden establecerse tanto en forma absoluta en cantidad de pixels, como porcentaje del espacio disponible o en forma automática ("Auto"), en la cual la fila o columna ajustará su tamaño automáticamente dependiendo del contenido. Usa un control Grid cuando otro tipo de paneles no sean adecuados para el formato deseado. Por ejemplo, cuando necesites varias filas y/columnas, a menudo en combinación con otro tipo de paneles.

En su forma más simple, una Grid tomará todos los controles que coloques dentro de ella, aumentará su tamaño hasta que usen todo el espacio disponible, y los ubicará uno encima de otro:

<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 puedes ver, el último control toma la posición superior, lo cual en este caso, significa que ni siquiera puedes ver el primer botón. No es algo impresionantemente útil en la mayoría de los casos, así que intentemos dividir el espacio, que es lo que la grilla hace tan bien. Lo haremos usando ColumnDefinitions y RowDefinitions. En el primer ejemplo, nos limitaremos a las columnas.

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

En este ejemplo, simplemente hemos dividido el espacio disponible en dos columnas, el cual se repartirá en forma igualitaria, usando un "ancho asterisco" (explicaremos ésto después). En el segundo botón, usé la famosa propiedad Attached para situar el botón en la segunda columna (0 es la primera columna, 1 es la segunda, y así sucesivamente). Podría haber utilizado esta propiedad en el primer botón también, pero se asigna automáticamente a la primera columna y fila, que es exactamente lo que buscamos aquí.

Como podrás comprobar, los controles toman todo el espacio disponible, lo cual es el comportamiento por defecto cuando el grid organiza sus controles hijos. Lo hace estableciendo las propiedades HorizontalAlignment y VerticalAlignment de los mismos a "Stretch".

En ciertas situaciones podrías querer que los controles en el grid tomen solamente el espacio que necesitan, y/o controlar como se ubican en la misma. La forma más fácil de lograr esto es establecer las propiedades HorizontalAlignment y VerticalAlignment directamente en los controles que deseas manipular. A continuación, una versión modificada del ejemplo de arriba:

<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 se ve en la imagen de arriba, el primer botón ahora se ubica en la parte superior y centrado. El segundo, en el medio y alineado a la derecha.

Resumen

El Grid es un panel muy versátil, con muchísimas más posibilidades de las que hemos visto en este articulo. Profundizaremos con el resto en los siguientes artículos.