Depura tus Layouts de Xamarin Forms fácilmente

Cuando empezamos nuestro camino como desarrolladores Xamarin Forms, es común que tengamos problemas con las propiedades asignadas a nuestros controles.

Suele suceder, que asignamos algunas propiedades, que pareciera, no son respetadas por el framework. Para ayudarnos a solventar esta problemática, vamos a conocer un plugin, que nos permitirá depurar nuestros Layouts basados en Xamarin Forms.

¡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!

¡Mira el Máster en Xamarin Forms!

Video sobre la depuración de Layouts en Xamarin Forms

¿Qué tipo de problemas de Layout en Xamarin Forms podremos resolver?

Vamos a poner un par de ejemplos. Imagina que desarrollas una aplicación sencilla, y que defines la siguiente interfaz gráfica.

    <ContentPage.Content>
        <StackLayout>
            <Label
                HorizontalOptions="Start"
                HorizontalTextAlignment="Center"
                Text="Welcome to Xamarin.Forms!"
                VerticalOptions="Center" />
        </StackLayout>
    </ContentPage.Content> 

Si desplegamos la app a nuestro emulador, veremos el siguiente resultado.

Tal vez, podrías preguntarte, ¿Porqué se está desplegando a la izquierda, si hemos asignado la propiedad “HorizontalTextAlignment” en Center? Esta es una pregunta, que nos ayudará a resolver el plugin que instalaremos.

Otro problema, que me ocurrió hace algunos meses, y es que, para quien no sepa, doy asesorías de Xamarin, fue que mi cliente, desarrollo una interfaz gráfica en XAML, que en su dispositivo móvil, funcionaba correctamente. Esta es la interfaz.

Por funcionar correctamente, me refiero, a que cuando se le da click en el botón, se despliega un mensaje correctamente. Sin embargo, el problema que tenía con uno de los usuarios, es que el botón parecía no funcionar, ya que al tratar de presionar el botón, éste simplemente no respondía.

Si quieres replicar la página XAML, este es el contenido.

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <!--  Place new controls here  -->
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="15" />
                <RowDefinition Height="20" />
                <RowDefinition Height="80" />
                <RowDefinition Height="10" />
                <RowDefinition Height="20" />
                <RowDefinition Height="80" />
                <RowDefinition Height="20" />
                <RowDefinition Height="30" />
            </Grid.RowDefinitions>
            <Label
                Grid.Row="1"
                HorizontalTextAlignment="Center"
                Text="Testing"
                VerticalTextAlignment="Center" />
            <BoxView
                Grid.Row="2"
                HeightRequest="300"
                Color="Blue" />
            <Label
                Grid.Row="4"
                HorizontalTextAlignment="Center"
                Text="Testing 2"
                VerticalTextAlignment="End" />
            <BoxView
                Grid.Row="5"
                HeightRequest="300"
                Color="DarkRed" />
            <Button
                Grid.Row="7"
                Margin="10,0,10,0"
                Padding="0"
                Clicked="Button_OnClicked"
                CornerRadius="10"
                FontSize="Micro"
                HeightRequest="500"
                HorizontalOptions="CenterAndExpand"
                Text="Click me!"
                VerticalOptions="Center" />
        </Grid>
    </Grid> 

Instalación y Configuración del plugin que utilizaremos para depurar los Layouts de Xamarin Forms

El plugin que utilizaremos para ayudarnos a resolver problemas con los layouts, se llama DebugRainbows, desarrollado por sthewissen. Para poder utilizarlo en nuestro proyecto, lo buscaremos e instalaremos, en cada uno de nuestros proyectos, tanto en el proyecto .NET Standard, como en los proyectos de Android y iOS.

Install-Package Xamarin.Forms.DebugRainbows 

Una vez instalado el paquete, estaremos listos para iniciar nuestra depuración.

¿Cómo utilizar el paquete DebugRainbows en Xamarin Forms?

Para utilizar el componente, deberemos, en primero lugar, crear un espacio de nombres en la Content Page donde tengamos planeado, previsualizar el modo de depuración (más adelante, veremos cómo aplicar esto a todas las ContentPage).

Vamos a depurar, el primer ejemplo que vimos anteriormente, el del layout sencillo. Para esto, importo el espacio de nombres:

xmlns:rainbows="clr-namespace:Xamarin.Forms.DebugRainbows;assembly=Xamarin.Forms.DebugRainbows" 

Y posteriormente, dentro de la misma definición de la ContentPage, vamos a utilizar la propiedad “ShowColors”, para desplegar, un fondo de color diferente, para cada elemento de nuestra interfaz gráfica. El código, queda de la siguiente manera.

<ContentPage
    x:Class="RainbowDemo.Page1"
    ...
    xmlns:rainbows="clr-namespace:Xamarin.Forms.DebugRainbows;assembly=Xamarin.Forms.DebugRainbows"
    rainbows:DebugRainbow.ShowColors="True">
    ... 

Si en estos momentos, volvemos a ejecutar la aplicación, veremos algo como lo siguiente, sin hacer nada más:

De forma automática, se le ha agregado un fondo a cada elemento de la interfaz gráfica. ¿Cuál es nuestro problema? El problema, está en que el contenido, no está ocupando toda la fila, por lo tanto, al asignar la propiedad “HorizontalTextAlignment” a Center, sí la está respetando, pero colocandola, en el espacio asignado, por la propiedad “HorizontalOptions”.

Para solucionar este primer problema, vamos a indicar que deseamos una alineación horizontal “CenterAndExpand”, y una alineación vertical “CenterAndExpand” también. Podemos eliminar sin problemas la asignación de la propiedad “HorizontalTextAlignment”.

    <ContentPage.Content>
        <StackLayout>
            <Label
                HorizontalOptions="CenterAndExpand"
                Text="Welcome to Xamarin.Forms!"
                VerticalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content> 

Con estos cambios, ya tendremos una alineación justamente en el centro, tanto horizontal como verticalmente.

Habilitando la depuración visual en todas las ContentPage de nuestro proyecto

Antes de resolver el problema del layout más complejo, vamos a aprender a habilitar la depuración visual en todas las ContentPage de nuestro proyecto. Para ello, vamos a ir al archivo App.xaml, y dentro de la etiqueta <Application.Resources>, definiremos lo siguiente.

    <Application.Resources>
        <ResourceDictionary>
            <Style ApplyToDerivedTypes="True" TargetType="ContentPage">
                <Setter Property="rainbows:DebugRainbow.ShowColors" Value="True" />
            </Style>
        </ResourceDictionary>
    </Application.Resources> 

Con esto, de forma automática, se aplicará la depuración visual a cada Content Page del proyecto, además, de todas aquellas páginas que hereden de Content Page.

Depurando Layouts más complejas de Xamarin Forms

Ahora sí, vamos a ver qué problema tenía el usuario de mi cliente. Al habilitar la depuración visual, veamos cómo luce la interfaz gráfica, en un dispositivo de alta resolución.

Ahora, mira cómo se ve en un dispositivo con una resolución más baja.

¿Puedes ver el problema ahora?

Si aún no lo has visto, te lo explico. En la primer imagen, fíjate que tenemos, en el fondo, 2 secciones de color verde, una más clara que la otra. Esto está así, debido a que hemos indicado, que la Grilla principal, estará dividia en 2 filas del mismo tamaño:

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

Ahora, fíjate en la segunda imagen. En este caso, la primer fila, tiene un color verde, y la segunda, un color marrón.

Como parte de la definición XAML, estamos indicando, que el contenido, se va a ubicar en la primer fila, por lo tanto, el botón, al pasar el tamaño de la primer fila, queda “oculto” por la segunda fila. Esta es la razón, por la cual no es posible dar click sobre el botón.

Arreglemos el problema, quitando la definición de filas en nuestro archivo XAML, con lo cual, ya tendremos una única fila ocupando todo el espacio de la página, y con lo cual, podremos dar click en el botón de nuevo.

Espero que te sea de utilidad, para depurar tus aplicaciones visuales.

¡Saludos!