[Windows 8] Grid

Posted on Actualizado enn


Artículo escrito por: Néstor Fernández.

Twitter: @xamlparaadeptos

Es un panel que permite organizar otros controles en una especie de de cuadrícula con un número configurable de filas y columnas.

Para aquellos que hayan trabajado con WPF o Silverlight encontrarán que éste es prácticamente el mismo Grid que ya conocen. Quienes trabajen con HTML hallarán que su funcionalidad es muy similar a la del elemento "Table".

Columnas y Filas

Mientras no sean definidas, el Grid tendrá una única fila y una única columna. En otras palabras, podremos decir que tiene una única "celda".

   1:  <Grid />

Para definir la cantidad de filas o columnas se utilizan las propiedades RowDefinitions y ColumnDefinitions respectivamente. En este ejemplo se define un Grid con 2 filas y 3 columnas:

   1:  <Grid>
   2:    <Grid.RowDefinitions>
   3:      <RowDefinition />
   4:      <RowDefinition />
   5:    </Grid.RowDefinitions>
   6:    <Grid.ColumnDefinitions>
   7:      <ColumnDefinition />
   8:      <ColumnDefinition />
   9:      <ColumnDefinition />
  10:    </Grid.ColumnDefinitions>
  11:  </Grid>

Como era de esperarse, el alto de las filas se establece con la propiedad "Height" mientras que el ancho de las columnas con la propiedad "Width". Sin embargo el Grid permite especificar el tamaño de filas y columnas de 3 maneras diferentes:

  1. Tamaño fijo (no variable): Cuando se establece el valor numérico en unidades, por ejemplo, <ColumnDefinition Width="23" />.
  2. Tamaño depende del contenido: Cuando se establece el valor en "Auto". En este caso el tamaño de la fila/columna crece lo suficiente para contener el elemento más grande en ella(s):

    <ColumnDefinition Width="Auto" />
  3. Tamaño proporcional: Aquí se nos permite definir el tamaño como una cantidad proporcional, la que acompañamos del símbolo "*". El valor por defecto para Width o Height cuando no se establecen es "1*". En este ejemplo hay 3 columnas, cada una el doble de grande a la anterior:

    <ColumnDefinition Width="1*" />

    <ColumnDefinition Width="2*" />

    <ColumnDefinition Width="4*" />

    Nótese que aunque utilizamos la palabra "proporcional" la suma de los tamaños no tiene que ser 100 (por ciento), aunque puede serlo. Para el ejemplo anterior todo el ancho (Width) disponible se divide en 7 unidades (1+2+4) y se reparte proporcionalmente entre los anchos indicados.

Grid01
Ejemplo

Aquí definimos una grilla con 3 filas y 3 columnas, y en ella ubicamos algunos botones:

   1:  <Grid>
   2:    <Grid.ColumnDefinitions>
   3:      <ColumnDefinition />
   4:      <ColumnDefinition />
   5:      <ColumnDefinition />
   6:    </Grid.ColumnDefinitions>
   7:    <Grid.RowDefinitions>
   8:      <RowDefinition />
   9:      <RowDefinition />
  10:      <RowDefinition />
  11:    </Grid.RowDefinitions>
  12:    <Button
  13:      Content="Boton 1" />
  14:    <Button
  15:      Grid.Column="1"
  16:      VerticalAlignment="Top"
  17:      Content="Boton 2" />
  18:    <Button
  19:      Grid.Column="1"
  20:      Grid.Row="2"
  21:      HorizontalAlignment="Center"
  22:      Content="Boton 3" />
  23:    <Button
  24:      Grid.Column="2"
  25:      Grid.Row="1"
  26:      VerticalAlignment="Bottom"
  27:      HorizontalAlignment="Center"
  28:      Content="Boton 4" />
  29:    <Button
  30:      Grid.ColumnSpan="2"
  31:      Grid.Row="1"
  32:      HorizontalAlignment="Stretch"
  33:      VerticalAlignment="Stretch"
  34:      Margin="20"
  35:      Content="Boton 5" />
  36:  </Grid>

Grid02

Obsérvese unos detalles importantes sobre el funcionamiento del Grid:

  • Mientras no se definan tamaños para las filas y columnas el espacio disponible se repartirá de forma proporcional.

  • Contrario el elemento "Table" que se utiliza de forma similar en HTML, un Grid no define Celdas (elemento TD en HTML), solo define columnas y filas.

  • Ya que no se definen celdas, utilizamos las propiedades Grid.Column (la columna en el Grid) y Grid.Row (la fila en el Grid) para ubicar un elemento en la intersección (celda) deseada. Esto se puede observar en los botones 2, 3, 4 y 5 en este ejemplo.

  • Cuando a un elemento no se le define la fila (Grid.Row) o la columna (Grid.Column) se asumirá la primera fila (Grid.Row="0") o la primera columna (Grid.Columna="0"). Esto se observa para los botones 1 y 2.

  • Al igual que en HTML, es posible pedirle a un elemento que utilice más de una fila y/o más de una columna por medio de las propiedades Grid.ColumnSpan y Grid.RowSpan, como se observa para el botón 5.

  • Nótese el uso de las propiedades HorizontalAlignment y VerticalAlignment en los botones 2, 3, 4 y 5. Facilitan ubicar cada botón al interior de su celda.

  • Nótese también que la propiedad Margin en el botón 5 asigna un margen al rededor de este de modo que no ocupa todo el espacio asignado a la celda.

  • Dos o más controles pueden compartir una misma celda.

  • El Grid, por defecto, intentará restringir el tamaño y la ubicación de los controles que contiene de modo que se encuentren únicamente en su interior.

  • Y un último detalle muy importante: Si sucediese que el Grid o su contenido no caben completamente dentro de la pantalla, no se activarán barras de desplazamiento pues el Grid no tiene barras de desplazamiento. Debe utilizarse el control ScrollViewer para alcanzar dicho fin.

PARA SABER MÁS… Grid class

Un comentario sobre “[Windows 8] Grid

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:05

    […] [Windows 8] Grid […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s