Como definicion rápida diremos que un Grid es una capa que ordena vistas en lineas y columnas.
El código XAML permite ver de una forma mas limpia la estructura y definición de un Grid. Este objeto definimos las lineas (Rows) y las columnas (Columns)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="20*"/> <ColumnDefinition Width="20*"/> <ColumnDefinition Width="20*"/> <ColumnDefinition Width="20*"/> <ColumnDefinition Width="20*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="30" /> <RowDefinition Height="30" /> <RowDefinition Height="30" /> </Grid.RowDefinitions> </Grid> |
De esta manera queda definido el Grid con una estructura de cuatro columnas y tres filas de misma anchura y altura. Ahora solo queda colocar otros objetos ordenados según la estructura definida, para ello hay que especificar la posición en cada objeto hijo del Grid. Para ello está la propiedad Grid.Row para establecer la linea y la propiedad Grid.Column para asignar la columna.
|
1 2 3 4 5 6 |
<StackLayout Grid.Column="2" Grid.Row="0"> <Label Text="Posicion del StackLayout:" /> <Label Text="Primera Fila, tercera columna" /> </StackLayout> <Label Grid.Row="2" Grid.Column="4" Text="Posicion: Tercera fila, quinta columna" /> |
En caso de necesitar una celda de mayor espacio, el control Grid tiene la posibilidad de fusionar celdas con sus adyacentes. La propiedad Grid.ColumnSpan fusionará la celda actual con la inmediatamente a su derecha, el numero de celdas a fusionar ira en función del valor especificado, de esta forma ahora la celda ocupará la suma de los tamaños de las celdas fusionadas. También se pueden fusionar del mismo modo las lineas mediante la propiedad Grid.RowSpan ampliando asi el tamaño de las celdas en altura.
|
1 |
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="5" Text="Esta Fila ocupa el tamaño de las cinco columnas" /> |
También existe la posibilidad de dividir una celda en mas celdas de igual o diferente tamaño. Solamente será necesaria la definición de un nuevo Grid
|
1 2 3 4 5 |
<Grid Grid.Column="1" Grid.Row="0"> <Grid> {...} </Grid> </Grid> |
Nota: Debido a los largos textos descriptivos empleados en el ejemplo, intentar usar el código sin reducir las propiedades Text provocará que no se pueda mantener las dimensiones especificadas anteriormente o que los textos no se muestren completamente.