Trabajando con GridLayout en Xamarin Forms

Leomaris Reyes
Dec 5, 2018 · 3 min read

Cuando estamos desarrollando una aplicación, es muy importante saber que tipo de Layout es mejor utilizar. Por ejemplo, imaginemos que estamos haciendo una calculadora, podemos usar un StackLayout o un GridLayout. Pero … Realmente, ¿Qué pasaría si creamos una calculadora basada en un conjunto de StackLayouts? Debido a la cantidad de Layouts anidados que necesitamos para crear nuestra calculadora, el rendimiento de la aplicación se verá afectado (En este caso, la reducción del rendimiento puede ser sutil, pero en aplicaciones más grandes, la disminución será notable). Por lo tanto, siempre que necesitemos crear un diseño que contenga un conjunto de columnas y filas, la mejor opción para usar es un GridLayout. En este artículo explicaré cómo usarlo. ¡¡¡Veamos!!!


Explicando la estructura del GridLayout

Comencemos por explicar cuál es la estructura que debe tener el GridLayout y luego iremos desglosando paso a paso los componentes mostrados en el ejemplo.

Filas

Para crear una fila (Row), solo tienes que agregar dentro de la etiqueta <Grid.RowDefinitions> tantas filas como desees y agregar la propiedad height. Con la siguiente etiqueta:<RowDefinition />.

Columnas

Para crear una columna (Column), solo tienes que agregar dentro de la etiqueta <Grid.ColumnDefinitions> tantas columnas como desees y agregar la propiedad width. Con la siguiente etiqueta: <RowDefinition />.

⚠Tanto las Filas (Rows) como las Columnas (Columns) deben declararse dentro de las etiquetas: <Grid> </Grid>.


Agregando altura y ancho a nuestras filas y columnas

Tenemos tres opciones para hacerlo:

Veamos las definiciones:

⚪ Auto Se ajusta al contenido de la fila o columna. En el XAML se llama “Auto” y en el código C # se especifica como GridUnitType.Auto.

⚪ Proportional (*) Este tipo divide el tamaño de las columnas y filas proporcionalmente al espacio restante entre los demás elementos. En el código C # se especifica como GridUnitType.Star. (Valor por defecto)

⚪ Absolute Indica un numero de tamaño específico para asignar a las filas y columnas. En el código C # se especifica como GridUnitType.Absolute.


Pero … ¿Cómo puedo empezar a colocar las filas y columnas en el GridLayout? 🤔

Una vez terminada la estructura del GridLayout, solo tenemos que comenzar a agregar los controles gráficos a necesitar. Para especificar a qué Fila/Columna del Grid pertenece, solo tienes que agregar: Grid.Row o Grid.Column.


Spacing

El Grid tiene las propiedades para manejar el espacio entre filas y columnas.

Puede utilizar las siguientes propiedades:

⚪ ColumnSpacing: : Es la cantidad de espacio entre columnas. Esta propiedad tiene como valor por defecto “6”.

⚪ RowSpacing: Es la cantidad de espacio entre filas. Esta propiedad tiene como valor por defecto “6”.

Solo tienes que agregar las propiedades a la etiqueta principal del Grid, de la siguiente manera:


Span

El Span se utiliza para cuando se requiere ocupar más de una fila o columna. Solo tenemos que agregar la cantidad que se desea abarcar, con las siguientes propiedades: Grid.RowSpan o Grid.ColumnSpan.

Artículo en inglés: https://askxammy.com/working-with-gridlayout-in-xamarin-forms/

Referencias: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid

Leomaris Reyes

Written by

I'm Leomaris Reyes, Microsoft MVP from the Dominican Republic, with more than 6 years of experience in Software Development. ❤

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade