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:

 

image

 

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.

Un comentario sobre “El Grid de WPF”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *