Todo lo que debes saber sobre Layouts en Xamarin Forms

Si estás iniciando en el mundo del desarrollo con Xamarin, los Layouts en Xamarin Forms son un concepto importante que debes dominar, ya que a través de ellos, podrás crear la interfaz gráfica que desees, acomodando los controles de Xamarin en la posición exacta donde deben de ir.

Algunos de estos controles son más utilizados que otros. Antes de examinar los layouts, te dejaré algunos conceptos que te servirán para trabajar con los layouts, tales como Alignment, Expansion, Margin y Padding.

Antes de iniciar con la publicación, quiero agradecer a Luis Beltrán por incluir mi aportación en el primer Calendario de Adviento de Xamarin, en el enlace puedes ver muchas publicaciones geniales referentes al desarrollo con Xamarin. Sin más preámbulos, ¡Empecemos!

¡Adquiere el Máster en Xamarin Forms!

Antes de iniciar, te invito a visitar la página de la Membresía de mi academia, donde podrás encontrar:

Cursos y talleres de Xamarin
Cursos y talleres en C#
Cursos y talleres de Blazor
– Cursos y talleres de ASP.NET
– Cursos y talleres en muchas otras tecnologías

¡Todo al precio más bajo posible por tiempo limitado!

curso de xamarin

LayoutOptions – Alignment

Todos los Layouts tienen un par de propiedades llamadas HorizontalOptions y VerticalOptions. Dichas propiedades, nos van a servir para que el control dentro del contenedor, se despliegue de acuerdo a su valor. Por ejemplo, supongamos que tenemos el siguiente caso:

    <StackLayout>
        <Button Text="Fill"/>
    </StackLayout>

Esto nos daría el control desplegado de la siguiente forma:

Xamarin Forms Layout Options
Xamarin Forms Layout Options

Esto es debido, a que por default, tiene una propiedad llamada HorizontalOptions asignada en su valor Fill, por lo que sería lo mismo a tener:

    <StackLayout>
        <Button Text="Fill"
                HorizontalOptions="Fill"/>
    </StackLayout>

Esta misma propiedad, tiene otros valores que nos permitirán acomodar el control de acuerdo a nuestras necesidades, las cuales son: Start, Center y Expand. Aunque su nombre es bastante explicativo, aqui lo vemos de forma práctica:

    <StackLayout>
        <Button Text="Fill"
                HorizontalOptions="Fill"/>
        <Button Text="Start"
                HorizontalOptions="Start" />
        <Button Text="Center"
                HorizontalOptions="Center" />
        <Button Text="End"
                HorizontalOptions="End" />
    </StackLayout>
Opcoines de Layout Options en Xamarin Forms
Opcoines de Layout Options en Xamarin Forms

Si quisiéramos que esto funcionara pero de forma vertical y no horizontal, tendrías que modificar la orientación del StackLayout, y finalmente, la propiedad HorizontalOptions por VerticalOptions:

    <StackLayout Orientation="Horizontal">
        <Button Text="Fill"
                VerticalOptions="Fill"/>
        <Button Text="Start"
                VerticalOptions="Start" />
        <Button Text="Center"
                VerticalOptions="Center" />
        <Button Text="End"
                VerticalOptions="End" />
    </StackLayout>
HorizontalOptions en Xamarin Forms
HorizontalOptions en Xamarin Forms

Layout Options – Expansion

Si has hecho el ejemplo anterior, te habrás dado cuenta que siempre tenemos una propiedad de Opciones verticales ó bien horizontales, que finalizan con un “AndExpand”, vamos a analizar de qué se trata con un ejemplo práctico.

Comencemos con el siguiente código:

<StackLayout>
      <BoxView BackgroundColor="Red"
               HeightRequest="1"/>
        <Label Text="Start"
               BackgroundColor="Gray"
               VerticalOptions="Center"
               TextColor="White"></Label>
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="Center"
               BackgroundColor="Gray"
               VerticalOptions="Center"
               TextColor="White"></Label>
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="End"
               BackgroundColor="Gray"
               VerticalOptions="Center"
               TextColor="White"></Label>
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="Fill"
               BackgroundColor="Gray"
               VerticalOptions="Center"
               TextColor="White"></Label>
    </StackLayout>

Lo cual da como resultado lo siguiente:

Propiedades Expansión en Xamarin Forms
Propiedades Expansión en Xamarin Forms

Como podemos apreciar, tenemos 4 conjuntos de BoxView con etiquetas, y vemos también que nos queda un espacio enorme debajo de ellos.

Si cambiaramos la propiedad  VerticalOptions de una de la etiqueta que dice “Start”, con un valor StartAndExpand, tendríamos el siguiente resultado:

        <Label Text="Start"
               BackgroundColor="Gray"
               VerticalOptions="StartAndExpand"
               TextColor="White"></Label>
StartAndExpand en Xamarin Forms
StartAndExpand en Xamarin Forms

Como puedes ver, la etiqueta ahora ocupa todo el espacio que “queda libre”. Lo mismo pasaría con los demás valores, sólo que si hay más controles con la misma propiedad que finaliza en “Expand”, los elementos se irían “repartiendo” el espacio sobrante, por ejemplo, si aplicamos el Expand a todos los elementos, nos quedaría algo así:

<StackLayout>
      <BoxView BackgroundColor="Red"
               HeightRequest="1"/>
        <Label Text="Start"
               BackgroundColor="Gray"
               VerticalOptions="StartAndExpand"
               TextColor="White"></Label>
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="Center"
               BackgroundColor="Gray"
               VerticalOptions="CenterAndExpand"
               TextColor="White"></Label>
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="End"
               BackgroundColor="Gray"
               VerticalOptions="EndAndExpand"
               TextColor="White"></Label>
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="Fill"
               BackgroundColor="Gray"
               VerticalOptions="FillAndExpand"
               TextColor="White"></Label>
    </StackLayout>
AndExpand en Xamarin Forms
AndExpand en Xamarin Forms

Vemos como todos los controles han ocupado su respectivo espacio, tomando el que quedera libre. Hay que notar, cómo la etiqueta, la cual puedes reconocer por el fondo gris, ha quedado al inicio, en medio, al final, y llenando todo el espacio, de acuerdo a la propiead de alineación especificada.

Margin y Padding en Xamarin Forms

Si has trabajado con HTML, el concepto es exactamente el mismo. El margin se refiere al márgen externo del control sobre el cual lo aplicamos, y el padding, al espacio del control respecto a su contenido.

Por ejemplo, supongamos que tenemos lo siguiente:

<StackLayout>
        <StackLayout BackgroundColor="Green">
            <Image Source="dotnet_logo"
                   HeightRequest="200"></Image>
        </StackLayout>

        <StackLayout BackgroundColor="Green">
            <Image Source="dotnet_logo"
                   HeightRequest="200"></Image>
        </StackLayout>
    </StackLayout>
Margin en Xamarin Forms
Margin en Xamarin Forms

Si quisiéramos que nuestra StackLayout que contiene la imagen, tuviera más espacio de margen respecto al elemento contenedor, lo que podríamos hacer es incrementar precisamente el margen, con lo que quedaría algo así:

<StackLayout BackgroundColor="Green"
                     Margin="25,50,100,20">
            <Image Source="dotnet_logo"
                   HeightRequest="200"></Image>
        </StackLayout>
Aplicando un margen en Xamarin Forms
Aplicando un margen en Xamarin Forms

Si por otra parte, lo que quisiéramos, es que el contenido del StackLayout (en este caso la imagen) tuviera un espacio mayor, tendríamos que utilizar un padding, con lo que quedaría:

 <StackLayout BackgroundColor="Green"
                     Padding="25,50,100,20">
            <Image Source="dotnet_logo"
                   HeightRequest="200"></Image>
        </StackLayout>
Aplicando Padding en Xamarin Forms
Aplicando Padding en Xamarin Forms

Puedes notar, como la imagen queda, exactamente en el mismo lugar en ambos casos, con la diferencia de que en el primer caso, es todo el contenedor el que ha reducido su tamaño debido al margen, y en el segundo caso, únicamente el contenido, que es la imagen.

StackLayout en Xamarin Forms

Este Layout, nos va a permitir agrupar un conjunto de elementos dentro, en forma apilada. Esto quiere decir, que podremos colocar múltiples elementos de interfaz gráfica, ya sean botones u otros Layouts.

La forma de utilizarlo, es colocar un elemento StackLayout, y dentro de él todos los elementos que deseemos. El siguiente es un ejemplo de ello, aplicando lo que hemos visto anteriormente:

<StackLayout>
        <BoxView BackgroundColor="Maroon"
                 VerticalOptions="FillAndExpand"/>
        <BoxView BackgroundColor="Yellow"
                 VerticalOptions="FillAndExpand" />
        <BoxView BackgroundColor="Blue"
                 VerticalOptions="FillAndExpand" />
        <BoxView BackgroundColor="Green"
                 VerticalOptions="FillAndExpand" />
    </StackLayout>
StackLayout en Xamarin Forms
StackLayout en Xamarin Forms

Vemos que tenemos los elementos apiladoras hacia abajo, porque tenemos una propiedad del StackLayout llamada “Orientation”, la cual por default es Vertical.

Podemos modificar este comportamiento al cambiar dicho valor, por Horizontal:

<StackLayout Orientation="Horizontal">
        <BoxView BackgroundColor="Maroon"
                 VerticalOptions="FillAndExpand"/>
        <BoxView BackgroundColor="Yellow"
                 VerticalOptions="FillAndExpand" />
        <BoxView BackgroundColor="Blue"
                 VerticalOptions="FillAndExpand" />
        <BoxView BackgroundColor="Green"
                 VerticalOptions="FillAndExpand" />
    </StackLayout>
StackLayout Vertical en Xamarin Forms
StackLayout Vertical en Xamarin Forms

¿Cómo quitar el espacio entre elementos de un StackLayout en Xamarin Forms?

Si te has dado cuenta en los ejemplos anteriores, siempre queda un espacio entre los diferentes elementos, el cual podremos reducir con la propiedad “Spacing”. Por ejemplo, si quisiéramos que el espacio desapareciera completamente, pondríamos un valor 0:

<StackLayout Spacing="0">
        <BoxView BackgroundColor="Maroon"
                 VerticalOptions="FillAndExpand" />
        <BoxView BackgroundColor="Yellow"
                 VerticalOptions="FillAndExpand" />
        <BoxView BackgroundColor="Blue"
                 VerticalOptions="FillAndExpand" />
        <BoxView BackgroundColor="Green"
                 VerticalOptions="FillAndExpand" />
    </StackLayout>
StackLayout sin espacio en Xamarin Forms
StackLayout sin espacio en Xamarin Forms

Ejemplo de un StackLayout complejo en Xamarin Forms

Como no todo en la vida son ejemplos sencillos, te dejo un ejemplo para que puedas ver cómo utilizar un StackLayout en tu aplicación, en dado caso de que desees utilizarlo.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TheBusinessTumble.StackLayoutPage"
BackgroundColor="Maroon"
Title="StackLayouts">
    <ContentPage.Content>
    <ScrollView>
      <StackLayout Spacing="0" Padding="0" BackgroundColor="Maroon">
        <BoxView HorizontalOptions="FillAndExpand" HeightRequest="100"
          VerticalOptions="Start" Color="Gray" />
        <Button BorderRadius="30" HeightRequest="60" WidthRequest="60"
          BackgroundColor="Red" HorizontalOptions="Center" VerticalOptions="Start" />
        <StackLayout HeightRequest="100" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Spacing="20" BackgroundColor="Maroon">
          <Label Text="User Name" FontSize="28" HorizontalOptions="Center"
            VerticalOptions="Center" FontAttributes="Bold" />
          <Entry Text="Bio + Hashtags" TextColor="White"
            BackgroundColor="Maroon" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" />
        </StackLayout>
        <StackLayout Orientation="Horizontal" HeightRequest="50" BackgroundColor="White" Padding="5">
          <StackLayout Spacing="0" BackgroundColor="White" Orientation="Horizontal" HorizontalOptions="Start">
            <BoxView BackgroundColor="Black" WidthRequest="40" HeightRequest="40"  HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
            <Label FontSize="14" TextColor="Black" Text="Accent Color" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
          </StackLayout>
          <StackLayout Spacing="0" BackgroundColor="White" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
            <BoxView BackgroundColor="Maroon" WidthRequest="40" HeightRequest="40" HorizontalOptions="Start" VerticalOptions="Center" />
            <Label FontSize="14" TextColor="Black" Text="Primary Color" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
          </StackLayout>
        </StackLayout>
        <StackLayout Orientation="Horizontal">
          <Label FontSize="14" Text="Age:" TextColor="White" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100" />
          <Entry HorizontalOptions="FillAndExpand" Text="35" TextColor="White" BackgroundColor="Maroon" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
          <Label FontSize="14" Text="Interests:" TextColor="White"
          HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100" />
          <Entry HorizontalOptions="FillAndExpand" Text="Xamarin.Forms" TextColor="White" BackgroundColor="Maroon" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
          <Label FontSize="14" Text="Ask me about:" TextColor="White"
          HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100"/>
          <Entry HorizontalOptions="FillAndExpand" Text="Xamarin, C#, .NET, Mono..." TextColor="White" BackgroundColor="Maroon" />
        </StackLayout>
      </StackLayout>
    </ScrollView>
    </ContentPage.Content>
</ContentPage>

Esto nos dará lo siguiente:

Stacklayout complejo en Xamarin Forms
Stacklayout complejo en Xamarin Forms

AbsoluteLayout en Xamarin Forms (También escrito Absolute Layout)

Este es uno de los controles menos utilizados en el mundo del desarrollo con Xamarin, pero que nos permite hacer cosas complejas para formar “capas”. Nos sirve para posicionar elementos hijos de forma proporcional a su tamaño y posición de acuerdo a valores absolutos.

Vamos a comenzar definiéndolo, y dentro, un botón:

<AbsoluteLayout>
        <Button Text="Absolute"/>
    </AbsoluteLayout>
AbsoluteLayout en Xamarin Forms
AbsoluteLayout en Xamarin Forms

Vemos que el comportamiento, es colocar el elemento en la esquina de la derecha. Si colocamos un segundo botón, veremos cómo se posiciona encima del primero:

 <AbsoluteLayout>
        <Button Text="Absolute"/>
        <Button Text="Absolute 2" />
    </AbsoluteLayout>
Absolute Layout en Xamarin Forms
Absolute Layout en Xamarin Forms

Como tenemos el elemento dentro de un AbsoluteLayout, tenemos a nuestra disposición una Attached Property, la cual nos permite especificar cómo se comportará el botón respecto a su elemento padre. En este caso, la primer propiedad se llama AbsoluteLayout.LayoutBounds, la cual requiere 4 valores:

  • x
  • y
  • ancho
  • alto

Sabiendo esto, podemos agregar valores a la propiedad para modificar cómo se ve el primer botón:

<AbsoluteLayout>
        <Button Text="Absolute"
                AbsoluteLayout.LayoutBounds="50,50,200,100"/>
        <Button Text="Absolute 2" />
    </AbsoluteLayout>
LayoutBounds en Xamarin Forms
LayoutBounds en Xamarin Forms

Hemos especificado que el control, debe desplegarse en la posición 50,50, con un ancho de 200 y un alto de 100, esto sin importar si el dispositivo es un celular o una tableta, es decir, son valores fijos.

Si en dado caso, quisiéramos cambiar este comportamiento, para que dichos valores sean porcentuales y no absolutos, podremos modificar una segunda propiedad, la cual es AbsoluteLayout.LayoutFlags, la cual nos permitirá especificar si queremos hacer eso.

Los valores de la propiedad LayoutFlags son:

  • All
  • HeightProportional
  • PositionProportional
  • XProportional
  • YProportional
  • None
  • SizeProportional
  • WidthProportional

Como puedes observar, cada una de ellas hace referencia, a que podremos usar de forma proporcional ó porcentual, diferentes propiedades del elemento. Por ejemplo, si quisiéramos colocar nuestro control, en una posición centrada horizontal y verticalmente, pero con un ancho y alto fijo de 200 x 100, podriamos colocar lo siguiente:

<AbsoluteLayout>
        <Button Text="Absolute"
                AbsoluteLayout.LayoutBounds=".5,.5,200,100"
                AbsoluteLayout.LayoutFlags="PositionProportional"/>
        <Button Text="Absolute 2" />
    </AbsoluteLayout>
Uso de AbsoluteLayout en Xamarin Forms
Uso de AbsoluteLayout en Xamarin Forms

Hay que notar, que los valores proporcionales están especificados de los valores del 0 al 1, y los valores absolutos no.

Tutorial sobre RelativeLayout en Xamarin Forms

Este Layout, resulta un poco más complejo de utilizar, ya que tendremos que definir un conjunto de reglas que nos permitirán mantener unos elementos posicionados respecto a otros.

Iniciemos con un ejemplo sencillo:

 <RelativeLayout>
        <BoxView Color="Green"
                 x:Name="green"
                 WidthRequest="200"
                 HeightRequest="200"/>
    </RelativeLayout>
RelativeLayout en Xamarin Forms
RelativeLayout en Xamarin Forms

Como parte de un RelativeLayout, tenemos 4 tipos de reglas disponibles:

  • X
  • Y
  • Ancho
  • Alto

Al estar nuestro elemento BoxView dentro de un RelativeLayout, tenemos disponible propiedades que nos permiten crear estas reglas. Si escribimos la propiedad que te he mencionado en Visual Studio, veremos que nos aparecen las opciones:

Opciones de RelativeLayout en Xamarin Forms
Opciones de RelativeLayout en Xamarin Forms

Supongamos que lo que deseamos es centrar el BoxView horizontalmente, por lo que optaremos con utilizar la regla XConstraint:

RelativeLayout.XConstraint=""

Lo siguiente que hay que hacer, es colocar un par de llaves dentro de las comillas, lugar donde indicaremos la regla:

RelativeLayout.XConstraint="{}"

La regla estará definida por el tipo ConstraintExpression, con un conjunto de atributos que definirán dicha regla:

RelativeLayout.XConstraint=
                 "{
                    ConstraintExpression
                    Type=RelativeToParent,
                    Property=Width,
                    Factor = 1,
                    Constant = 1
                 }"

Analicemos un poco esta regla. En primer lugar, indicamos que será una ConstraintExpression.

El atributo Type, determina qué tipo de regla será, es decir, cuál va a ser el elemento del cual dependeremos para posicionarnos en X, en este caso, será el elemento padre, que es en este caso toda la página, por lo que utilizaremos sus propiedades para ver dónde nos ubicaremos.

El atributo Property, nos servirá para indicar cuál propiedad queremos utilizar del elemento padre para tomar su valor, y que nos sirva de guía para ubicarnos.

En un momento explicamos Factor y Constant. Con lo que hemos hecho arriba, tendremos lo siguiente desplegado:

RelativeLayout vacío en Xamarin Forms
RelativeLayout vacío en Xamarin Forms

Parece que no funciona, ¿cierto? La verdad, es que los elementos están ahí, pero no estamos usando Factor y Constant correctamente.

Te explico, para utilizar este par de propiedades, hay que considerar la siguiente fórmula:

(Value * Factor) + Constant

Para hacer la conversión a nuestro ejemplo de la fórmula, pensemos que el ancho del formulario es de 500 unidades, entonces, sustituyendo los valores de la fórmula, quedaría:

(500 * 1) + 1 = 501

¿Has visto el problema? Si no, el problema radica en que estamos ubicando el elemento una unidad fuera de la pantalla, por lo que no lo estamos desplegando.

Conociendo la fórmula, podemos hacer el cambio correspondiente, como sabemos que cualquier número multiplicado por .5 nos da su mitad, entonces cambiaremos el factor por .5:

                 RelativeLayout.XConstraint=
                 "{
                    ConstraintExpression
                    Type=RelativeToParent,
                    Property=Width,
                    Factor = 0.5,
                    Constant = 1
                 }"
Relative Layout en Xamarin Forms
Relative Layout en Xamarin Forms

Perfecto, con esto ya es visible nuestro elemento, pero si recuerdas, queríamos tenerlo centrado. Lo que haremos entonces, será cambiar el valor de Constant por el valor del ancho del -(BoxView / 2) para centrarlo correctamente:

  RelativeLayout.XConstraint=
                 "{
                    ConstraintExpression
                    Type=RelativeToParent,
                    Property=Width,
                    Factor = 0.5,
                    Constant = -100
                 }"
                 />
RelativeLayout en Xamarin
RelativeLayout en Xamarin

Grid en Xamarin Forms

Este contenedor, nos va a permitir definir filas y columnas para posicionar dentro, elementos, ya sean controles ó bien otros layouts.

Supongamos que tenemos la siguiente definición:

   <Grid>
        <Button Text="Hola"/>
        <Button Text="Adiós"/>
    </Grid>
Grid en Xamarin Forms
Grid en Xamarin Forms

Si quisiéramos dividir nuestro contenedor en 4 partes iguales, y posicionar cada botón en un espacio diferente, hay que dividirlo en filas y columnas.

Para crear un conjunto de Filas, tendremos que hacer uso de la propiedad Grid.RowDefinitions:

<Grid>
        <Grid.RowDefinitions>
        </Grid.RowDefinitions>
        <Button Text="Hola"/>
        <Button Text="Adiós"/>
    </Grid>

Y dentro, definiremos tantas filas como deseemos:

<Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

En este caso hemos definido 2 filas. Ya con este cambio, podremos ver que la interfaz gráfica ha cambiado:

Grid Xamarin Forms
Grid Xamarin Forms

Si lo que deseamos es cambiar el tamaño de cada una de las filas, podremos hacerlo a través del atributo Height:

 <Grid.RowDefinitions>
            <RowDefinition Height=""></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

Tenemos 3 posibles formas de llenar el valor de Height:

Con un valor fijo: Si aplicamos un valor como “200” por ejemplo, fijaremos un tamaño a la fila, sin posibilidad de que cambie mientras la aplicación corre.

<RowDefinition Height="200"></RowDefinition>
Xamarin Forms Grid Tutorial
Xamarin Forms Grid Tutorial

Auto: Si aplicamos este valor, la fila se ajustará únicamente al contenido de la fila, como en el siguiente ejemplo:

<RowDefinition Height="Auto"></RowDefinition>
Xamarin Forms en XAML
Xamarin Forms en XAML

Con una estrella: Si aplicamos un valor seguido de una estrella, indicaremos que deseamos que la fila ocupe todo el espacio que tenga disponible.

<RowDefinition Height="*"></RowDefinition>
Grid Xamarin Forms
Grid Xamarin Forms

En este caso, como dividimos las filas en 2, ocuparemos todo el espacio de la mitad superior.

Si lo que deseamos es trabajar con algo parecido a un porcentaje, podremos colocar un valor antes de la estrella:

<RowDefinition Height=".5*"></RowDefinition>
Grilla en Xamarin Forms
Grilla en Xamarin Forms

Es bueno considerar que el valor que tiene que ir antes de la estrella, es un número entre 0 y 1, para simular un porcentaje.

Podemos aplicar los mismos conceptos para las columnas de una Grilla, sólo que en ese caso, utilizaremos las definición de ColumnDefinitions, seguida por elementos ColumnDefinition:

<Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

En nuestro caso como deseamos cortar en 4 partes iguales la grilla, nos quedará lo siguiente:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Text="Hola"/>
        <Button Text="Adiós"/>
    </Grid>

Posicionando elementos en un Grid en Xamarin Forms

Para llevar a cabo el posicionamiento de controles en una grilla, lo que haremos será acceder a la propiedad Grid.Row ó Grid.Column, de acuerdo a lo que necesitemos. En nuestro ejemplo, como deseamos colocar el botón de hola en el primer cuadrante, vamos a indicar:

 <Button Text="Hola"
                Grid.Column="0"
                Grid.Row="0"/>

Y vamos a colocar el segundo botón en el cuarto cuadrante:

   <Button Text="Adiós"
                Grid.Column="1"
                Grid.Row="1"/>

Con lo que nos quedará lo siguiente:

Grid en Xamarin Forms ejemplo
Grid en Xamarin Forms ejemplo

Ejemplo de Grid en Xamarin Forms

Uno de los ejemplos más comunes cuando hablamos de Grids en Xamarin Forms, es el ejemplo de una calculadora, y es que es una app que se presta para este tipo de layout.

Si queremos una definición de una calculadora, tendremos que colocar el siguiente código:

<ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="plainButton"
                   TargetType="Button">
                <Setter Property="BackgroundColor"
                        Value="#eee" />
                <Setter Property="TextColor"
                        Value="Black" />
                <Setter Property="BorderRadius"
                        Value="0" />
                <Setter Property="FontSize"
                        Value="40" />
            </Style>
            <Style x:Key="darkerButton"
                   TargetType="Button">
                <Setter Property="BackgroundColor"
                        Value="#ddd" />
                <Setter Property="TextColor"
                        Value="Black" />
                <Setter Property="BorderRadius"
                        Value="0" />
                <Setter Property="FontSize"
                        Value="40" />
            </Style>
            <Style x:Key="orangeButton"
                   TargetType="Button">
                <Setter Property="BackgroundColor"
                        Value="#E8AD00" />
                <Setter Property="TextColor"
                        Value="White" />
                <Setter Property="BorderRadius"
                        Value="0" />
                <Setter Property="FontSize"
                        Value="40" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    
        <Grid x:Name="controlGrid"
              RowSpacing="1"
              ColumnSpacing="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="150" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label Text="0"
                   Grid.Row="0"
                   HorizontalTextAlignment="End"
                   VerticalTextAlignment="End"
                   TextColor="White"
                   FontSize="60"
                   Grid.ColumnSpan="4" />
            <Button Text="C"
                    Grid.Row="1"
                    Grid.Column="0"
                    Style="{StaticResource darkerButton}" />
            <Button Text="+/-"
                    Grid.Row="1"
                    Grid.Column="1"
                    Style="{StaticResource darkerButton}" />
            <Button Text="%"
                    Grid.Row="1"
                    Grid.Column="2"
                    Style="{StaticResource darkerButton}" />
            <Button Text="div"
                    Grid.Row="1"
                    Grid.Column="3"
                    Style="{StaticResource orangeButton}" />
            <Button Text="7"
                    Grid.Row="2"
                    Grid.Column="0"
                    Style="{StaticResource plainButton}" />
            <Button Text="8"
                    Grid.Row="2"
                    Grid.Column="1"
                    Style="{StaticResource plainButton}" />
            <Button Text="9"
                    Grid.Row="2"
                    Grid.Column="2"
                    Style="{StaticResource plainButton}" />
            <Button Text="X"
                    Grid.Row="2"
                    Grid.Column="3"
                    Style="{StaticResource orangeButton}" />
            <Button Text="4"
                    Grid.Row="3"
                    Grid.Column="0"
                    Style="{StaticResource plainButton}" />
            <Button Text="5"
                    Grid.Row="3"
                    Grid.Column="1"
                    Style="{StaticResource plainButton}" />
            <Button Text="6"
                    Grid.Row="3"
                    Grid.Column="2"
                    Style="{StaticResource plainButton}" />
            <Button Text="-"
                    Grid.Row="3"
                    Grid.Column="3"
                    Style="{StaticResource orangeButton}" />
            <Button Text="1"
                    Grid.Row="4"
                    Grid.Column="0"
                    Style="{StaticResource plainButton}" />
            <Button Text="2"
                    Grid.Row="4"
                    Grid.Column="1"
                    Style="{StaticResource plainButton}" />
            <Button Text="3"
                    Grid.Row="4"
                    Grid.Column="2"
                    Style="{StaticResource plainButton}" />
            <Button Text="+"
                    Grid.Row="4"
                    Grid.Column="3"
                    Style="{StaticResource orangeButton}" />
            <Button Text="0"
                    Grid.ColumnSpan="2"
                    Grid.Row="5"
                    Grid.Column="0"
                    Style="{StaticResource plainButton}" />
            <Button Text="."
                    Grid.Row="5"
                    Grid.Column="2"
                    Style="{StaticResource plainButton}" />
            <Button Text="="
                    Grid.Row="5"
                    Grid.Column="3"
                    Style="{StaticResource orangeButton}" />
        </Grid>
Ejemplo Calculadora Xamarin Forms
Ejemplo Calculadora Xamarin Forms

ScrollView en Xamarin Forms

Este contenedor, nos permitirá hacer scrolling ó deslizarnos si el contenido lo requiere. Es uno de los contenedores más fáciles de utilizar.

Supongamos que tenemos el siguiente código:

<StackLayout>
        <Button HeightRequest="200"></Button>
        <Button HeightRequest="200"></Button>
        <Button HeightRequest="200"></Button>
        <Button HeightRequest="200"></Button>
        <Button HeightRequest="200"></Button>
    </StackLayout>
ScrollView en Xamarin Forms
ScrollView en Xamarin Forms

El problema radica, en que no hay forma de ver el quinto botón, ya que la pantalla se queda corta para desplegarlo.

Si deseamos agregar la funcionalidad de Scrolling, podremos hacerlo agregando el contenido que deseamos convertir en deslizable, dentro de un ScrollView. De esta forma, quedaría así:

 <ScrollView>
        <StackLayout>
            <Button HeightRequest="200"></Button>
            <Button HeightRequest="200"></Button>
            <Button HeightRequest="200"></Button>
            <Button HeightRequest="200"></Button>
            <Button HeightRequest="200"></Button>
        </StackLayout>
    </ScrollView>
Scroll View en Xamarin Forms
Scroll View en Xamarin Forms

Como puedes apreciar, en la parte de la derecha aparece un ScrollView, que nos permitirá deslizarnos a través del contenido que antes no era visible.

Deja un comentario

Tu dirección de correo electrónico no será publicada.