El Grid de WPF
Por nivel de complejidad es el más complejo pero a la vez es el contenedor
más versátil. Mucho de lo que podemos conseguir con el resto de paneles
contenedores lo podemos crear con el Grid.
Para realizar un uso básico del Grid, en primer lugar debemos definir el
número de columnas y filas que tendrá. Esto lo conseguiremos añadiendo
tantos RowDefinition y ColumnDefinitions por fila y columna que queramos
en las propiedades RowDefinitions y ColumnDefinitions.
Una vez difinidas las filas y columnas, para posicionar cada elemento en su
respectiva celda utilizaremos las Attached Properties del contenedor Row y
Column, pudiendo aparecer más de un elemento por celda lógicamente.
En el siguiente código XAML y su resultado podemos ver un ejemplo de Grid:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1">
<Grid Name="mainPanel">
<!-- Definición de 3 Columas -->
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- Definición de 2 Filas-->
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label Content="Label 1 (Col=0 ;Row=0)" Grid.Column="0" Grid.Row="0" Background="Red" />
<Label Content="Label 2 (Col=1 ;Row=0)" Grid.Column="1" Grid.Row="0" Background="GreenYellow" />
<Label Content="Label 3 (Col=2 ;Row=0)" Grid.Column="2" Grid.Row="0" Background="Yellow" />
<Label Content="Label 4 (Col=0 ;Row=1)" Grid.Column="0" Grid.Row="1" Background="Blue" />
<Label Content="Label 5 (Col=2 ;Row=1)" Grid.Column="2" Grid.Row="1" Background="Orange" />
</Grid>
</Window>
El resultado seria:
Si queremos más complejidad, tenemos la posibilidad de expandir tanto las
columnas como las filas utilizando otras dos Attached Properties: RowSpan y
ColumnSpan.
Como nota final podemos destacar la posibilidad que nos brindan las
propiedades Height y Width de la definición de las columnas y filas. El tipo de
dato de estas propiedades no es double sino System.Windows.GridLength, por
lo que pueden tomar diferentes tipos de valores, a saber:
- Tamaños Absolutos :Corresponde a un valor numérico que representa pixeles independientes del
dispositivo.
- Automático :Asignando el valor Auto, asigna a los elementos hijos el espacio que necesitan
única y exclusivamente, y no más.
- Proporcional :Asigna a cada elemento el espacio disponible dividido de forma proporcional.