El Grid - Extendiendo

El comportamiento por defecto es que cada control utilice una celda, pero a veces quieres que un control ocupe múltiples filas o columnas. Afortunadamente, el Grid lo permite fácilmente, con propiedades ColumnSpan y RowSpan. El valor por defecto de esa propiedad es 1 obviamente, pero puedes proveer un número más grande para que el control abarque varias filas o columnas.

Eso es un ejemplo sencillo donde se usa la propiedad ColumnSpan:

<Window x:Class="WpfTutorialSamples.Panels.GridColRowSpan"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridColRowSpan" Height="110" Width="300">
	<Grid>
		<Grid.ColumnDefinitions>			
			<ColumnDefinition Width="1*" />
			<ColumnDefinition Width="1*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2</Button>
		<Button Grid.Row="1" Grid.ColumnSpan="2">Button 3</Button>
	</Grid>
</Window>

Definimos dos columnas y dos filas, todos ocupan partes iguales del espacio. Los primeros dos botones (button) usan las columnas normalmente, pero al tercer botón (button), lo hacemos ocupar dos columnas del espacio en la segunda fila, usando el atributo ColumnSpan.

Esto es tan simple que simplemente podríamos haber utilizado una combinación de paneles para conseguir el mismo efecto, pero sólo para casos un poco más avanzados, esto es realmente útil. Vamos a probar algo donde se ve mejor cómo de potente es esto:

<Window x:Class="WpfTutorialSamples.Panels.GridColRowSpanAdvanced"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridColRowSpanAdvanced" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Button Grid.ColumnSpan="2">Button 1</Button>
		<Button Grid.Column="3">Button 2</Button>
		<Button Grid.Row="1">Button 3</Button>
		<Button Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="2">Button 4</Button>
		<Button Grid.Column="0" Grid.Row="2">Button 5</Button>
	</Grid>
</Window>

Con tres columnas y tres filas nosotros tendríamos normalmente nueve celdas, pero en este ejemplo, usamos una combinación de filas y columnas extendidas para llenar todo el espacio disponible sólo con cinco botones. Como puedes ver, un control se puede expandir ya sea con columnas extras, con filas extras o en el caso del botón 4: ambas.

Como puedes ver, expandir columnas o filas en un Grid es muy fácil. En un capítulo posterior, usaremos el "extendido", junto con todas las otras técnicas de Grid en un ejemplo más práctico.