Windows Phone. Layout. Control Grid.

El control Grid (rejilla) es el contenedor disponible en Windows Phone mas completo de todos. Nos permite crear filas y columnas para organizar los elementos visuales. Es el panel más utilizado de todos. Tanto es así que si nos fijamos en el XAML de la página principal (MainPage.xaml) es el contenedor principal utilizado.

Recordemos que en Silverlight tenemos los siguientes tipos de contenedores (paneles):

  • Canvas
  • StackPanel
  • Grid

Grid

El control Grid define una tabla formada por filas y columnas. Por defecto un Grid contiene una única fila y una única columna.

Por ejemplo:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
</Grid>

¿Cómo definimos filas y columnas?

Para definir filas utilizamos la propiedad RowDefinition y para definir columnas utilizamos la propiedad ColumnDefinition.

Veamos un primer ejemplo muy sencillo:

<!--ContentPanel. Colocar aquí el contenido adicional-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Grid.ColumnDefinitions>
          <ColumnDefinition />
          <ColumnDefinition />
          <ColumnDefinition />
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition/>
          <RowDefinition/>
     </Grid.RowDefinitions>
</Grid>

Ya en la vista de diseño aun sin compilar ni añadir elementos visuales dentro del Grid podemos ver el resultado en la vista de diseño:

En este primer ejemplo hemos creado un Grid con tres filas y tres columnas. Para conseguirlo hemos añadido tantos RowDefinition a la coleccioón RowDefinitions como filas deseabamos y tantos ColumnDefinition a la colección ColumnDefinitions como columnas deseabamos. Cada fila y columna puede tener un tamaño personalizado. En este primer ejemplo no hemos definido ni el ancho ni el alto. Si no especificamos ningún ancho o alto, se les aplica a cada celda el mismo tamaño (en nuestro ejemplo obtenemos como resultado nueve celdas iguales). Podemos especificar el tamaño de cada celda utilizando:

  • Tamaños Absolutos (en pixeles): Utilizaríamos un valor numérico (Por ejemplo 150). El único problema de utilizar tamaños absolutos es que si el Grid cambia su tamaño, no se puede adaptar el tamaño del contenido.
  • Tamaños Automáticos: Utilizaríamos el valor Auto. De esta forma le proporcionamos a la celda el espacio que necesitan los elementos que contendrá la celda.
  • Tamaños Proporcionales: Utilizaríamos como valor *. De esta forma proporcionamos a la celda el espacio que haya disponible de manera proporcional.

Vamos a modificar el código de nuestro ejemplo para utilizar cada una de las posibilidades disponibles con las que podemos gestionar el tamaño de las celdas:

<!--ContentPanel. Colocar aquí el contenido adicional-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Grid.ColumnDefinitions>
          <ColumnDefinition Width="100"/>
          <ColumnDefinition Width="150"/>
          <ColumnDefinition Width="Auto"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
          <RowDefinition Height="80"/>
          <RowDefinition Height="120"/>
          <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
</Grid>

El resultado sería:

Bien. Hasta este punto hemos visto como funciona el control Grid y hemos visto como crear filas y columnas. Llegamos al siguiente punto necesario para trabajar con el Grid.

¿Cómo añadimos los elementos visuales en la celda deseada?

Lo conseguiremos de una forma muy fácil gracias a las propiedades adjuntas Grid.Row y Grid.Column. Para añadir un elemento dentro del Grid bastará con definir a dicho elemento dentro del Grid. Una vez añadido utilizaremos las propiedades adjuntas Grid.Row y Grid.Column para definir en que fila y columna deseamos colocar al elemento.

Vamos a añadir elementos visuales en nuestro ejemplo:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Grid.ColumnDefinitions>
          <ColumnDefinition Width="100"/>
          <ColumnDefinition Width="150"/>
          <ColumnDefinition Width="Auto"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
          <RowDefinition Height="80"/>
          <RowDefinition Height="120"/>
          <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
     <Ellipse Grid.Column="0" Grid.Row="0" Fill="Red" />
     <Ellipse Grid.Column="1" Grid.Row="0" Fill="Blue" />
     <Ellipse Grid.Column="1" Grid.Row="1" Fill="Orange" />
     <Ellipse Grid.Column="2" Grid.Row="2" Fill="Green" Width="200"/>
</Grid>

El resultado es el siguiente:

En este ejemplo hemos utilizado las propiedades Grid.Row y Grid.Column para posicionar cada elipse. La elipse más interesante es la de color verde. La hemos posicionado en la posición Grid.Row = 2 y Grid.Column = 2. El ancho de esa celda es automático. Al tener la elipse un ancho de 200px, el ancho de la celda se adapta al ancho de la elipse. En caso de no añadir ningún elemento, la celda de ancho automático tiene por defecto el valor de 0px.

Todo elemento que este dentro del Grid y no tenga establecidas las propiedades Grid.Row y Grid.Column se posicionarán en la fila 0 y la columna 0.

Bien, ¿Que ocurriría si deseamos que una de las elipses que hemos añadido al Grid ocupe más de una celda ?

Es posible. Para ello tenemos a nuestra disposición dos propiedades adjuntas más que son, Grid.RowSpan y Grid.ColumnSpan.

La primera de las propiedades nos permite indicar el número de filas consecutivas que ocupará el elemento visual.

La segunda de las propiedades nos permite indicar el número de columnas consecutivas que ocupará el elemento visual.

Veamos un ejemplo:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Grid.ColumnDefinitions>
          <ColumnDefinition Width="100"/>
          <ColumnDefinition Width="150"/>
          <ColumnDefinition Width="Auto"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
          <RowDefinition Height="80"/>
          <RowDefinition Height="120"/>
          <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
     <Ellipse Grid.Column="0" Grid.Row="0" Fill="Red" />
     <Ellipse Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" Grid.RowSpan="2" Fill="Blue" />
     <Ellipse Grid.Column="1" Grid.Row="1" Fill="Orange" />
     <Ellipse Grid.Column="2" Grid.Row="2" Fill="Green" Width="200"/>
</Grid>

El resultado es el siguiente:

En este último ejemplo  hemos utilizado en la esfera azul las propiedades Grid.RowSpan y Grid.ColumnSpan asignandoles un valor de 2. De esta forma dicha esfera ocupará la celda que le hemos asignado y la consecutiva a esta.

Puedes descargar el ejemplo realizado en esta entrada a continuación:

Con esta entrada hemos visto ya las posibilidades básicas de todos los controles de Layout. En próximas entradas analizaremos como añadir contenido de forma dinámica a cada control de Layout entre otros puntos de interés. Recordar que cualquier tipo de problema, duda o sugerencia podéis escribirla en los comentarios. Espero que lo visto en esta entrada os sea de utilidad.

4 pensamientos en “Windows Phone. Layout. Control Grid.

  1. Pingback: [Windows 10] Control RelativePanel | Javier Suárez | Blog

  2. Pingback: [Windows 10] Control RelativePanel - Javier Suárez

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