Resumen del capítulo 17. Dominio de la cuadrícula
Nota:
Este libro se publicó en la primavera de 2016 y no se ha actualizado desde entonces. Gran parte del libro sigue siendo útil, pero algunos de los materiales están anticuados y algunos temas ya no son completamente correctos o completos.
Grid es un eficaz mecanismo de diseño que organiza sus elementos secundarios en filas y columnas de celdas. A diferencia del elemento table de HTML similar, Grid es exclusivamente para fines de diseño y no para presentación.
Cuadrícula básica
Grid se deriva de Layout<View>, que define una propiedad Children que hereda Grid. Puede rellenar esta colección en XAML o en código.
Cuadrícula en XAML
La definición de Grid en XAML comienza generalmente con el rellenado de las colecciones RowDefinitions y ColumnDefinitions de Grid con los objetos RowDefinition y ColumnDefinition. Así es como se establece el número de filas y columnas de Grid, y sus propiedades.
RowDefinition tiene una propiedad Height y ColumnDefinition tiene una propiedad Width, ambas de tipo GridLength, una estructura.
En XAML, GridLengthTypeConverter convierte las cadenas de texto simples en valores de GridLength. En segundo plano, el constructor GridLength crea el valor GridLength basándose en un número y un valor de tipo GridUnitType, una enumeración con tres miembros:
Absolute: el ancho o el alto se especifica en unidades independientes del dispositivo (un número en XAML)Auto: el alto o ancho se ajusta automáticamente según el contenido de la celda ("auto" en XAML)Star: el alto o el ancho sobrante se asigna proporcionalmente (un número con "*", denominado estrella, en XAML)
A cada elemento secundario de Grid también se le debe asignar una fila y una columna (ya sea de forma explícita o implícita). Los intervalos de filas y los intervalos de columnas son opcionales. Todos ellos se especifican mediante propiedades enlazables asociadas propiedades definidas por Grid pero establecidas en elementos secundarios de Grid. Grid define cuatro propiedades enlazables estáticas asociadas:
RowProperty: fila de base cero; el valor predeterminado es 0ColumnProperty: columna de base cero; el valor predeterminado es 0RowSpanProperty: número de filas que abarca el elemento secundario; el valor predeterminado es 1ColumnSpanProperty: número de columnas que abarca el elemento secundario; el valor predeterminado es 1
En el código, un programa puede usar ocho métodos estáticos para establecer y obtener estos valores:
Grid.SetRowyGrid.GetRowGrid.SetColumnyGrid.GetColumnGrid.SetRowSpanyGrid.GetRowSpanGrid.SetColumnSpanyGrid.GetColumnSpan
En XAML, use los siguientes atributos para establecer estos valores:
Grid.RowGrid.ColumnGrid.RowSpanGrid.ColumnSpan
En el ejemplo SimpleGridDemo se muestra cómo crear e inicializar Grid en XAML.
Grid hereda la propiedad Padding de Layout y define dos propiedades adicionales que proporcionan espaciado entre las filas y las columnas:
RowSpacingtiene un valor predeterminado de 6.ColumnSpacingtiene un valor predeterminado de 6.
Las colecciones RowDefinitions y ColumnDefinitions no son estrictamente necesarias. En su ausencia, Grid crea filas y columnas para los elementos secundarios de Grid y les asigna un valor GridLength predeterminado de "*" (estrella).
La cuadrícula en el código
En el ejemplo GridCodeDemo se muestra cómo crear y rellenar Grid en el código. Puede establecer las propiedades asociadas para cada elemento secundario directamente, o indirectamente llamando a métodos Add adicionales, como Add definidos por la interfaz Grid.IGridList<T>.
Gráfico de barras de cuadrícula
En el ejemplo GridBarChart se muestra cómo agregar varios elementos BoxView a Grid mediante el método AddHorizontal masivo. De forma predeterminada, estos elementos BoxView tienen el mismo ancho. El alto de cada BoxView se puede controlar para que se parezca a un gráfico de barras.
Grid del ejemplo GridBarChart comparte un elemento AbsoluteLayout primario con un elemento Frame inicialmente invisible. El programa también establece un elemento TapGestureRecognizer en cada BoxView para usar Frame a fin de mostrar información sobre la barra punteada.
Alineación en la cuadrícula
En el ejemplo GridAlignment se muestra cómo usar las propiedades VerticalOptions y HorizontalOptions para alinear los elementos secundarios en una celda de Grid.
En el ejemplo SpacingButtons se espacian uniformemente los elementos Button centrados en las celdas de Grid.
Separadores de celdas y bordes
El elemento Grid no incluye una característica que dibuje separadores de celdas y bordes. Sin embargo, puede crear la suya propia.
GridCellDividers muestra cómo definir filas y columnas adicionales específicamente para que los elementos de BoxView finos imiten las líneas de división.
El programa GridCellBorders no crea ninguna celda adicional, sino que alinea los elementos BoxView de cada celda para imitar el borde de una celda.
Ejemplos de cuadrícula casi de la vida real
En el ejemplo KeypadGrid se usa un elemento Grid para mostrar un teclado:
Respuesta a los cambios de orientación
Grid puede ayudar a estructurar un programa para que responda a los cambios de orientación. En el ejemplo GridRgbSliders se muestra una técnica que mueve un elemento entre una segunda fila de un teléfono con orientación vertical y la segunda columna de un teléfono con orientación horizontal.
El programa inicializa Slider elementos en un intervalo de 0 a 255 y usa enlaces de datos para mostrar el valor de los controles deslizantes en formato hexadecimal. Dado que los valores de Slider son números de punto flotante, y la cadena de formato .NET para el formato hexadecimal solo funciona con enteros, una clase DoubleToIntConvert en la biblioteca Xamarin.FormsBook.Toolkit sirve de ayuda.