7 características notables de Xamarin forms en el 2020

Este año 2020, ha sido un parteaguas en el mundo de .NET con la presentación de .NET 5, ya que la plataforma se está dirigiendo a una unificación de sus tecnologías, lo que permitirá crear más aplicaciones en un menor tiempo, existiendo una mayor integración entre ellas.

Sin duda, Xamarin Forms también ha tenido varias mejoras importantes en este año 2020, con la introducción de features que permitirán crear mejores interfaces y experiencias de usuario, resultando en aplicaciones sorprendentes en el próximo 2021.

Esta publicación, forma parte del Segundo Calendario de Adviento organizado por mi buen amigo Luis Beltrán, a quien agradezco darme la oportunidad de formar parte del mismo.

Sin más, veamos estas características tan interesantes.

¡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

Shapes y Paths en Xamarin Forms

Sin duda, esta característica fue una de las más notables lanzadas en este año 2020, que permitirá a los developers crear aplicaciones aún más sorprendentes en este año 2021.

Y es que una figura o shape, es un tipo de View que permite dibujar figuras en una pantalla. Aunque pueda parecer o sonar muy sencillo, esto abre un abanico de posibilidades infinita, ya que de ahora en adelante, vamos a poder crear elementos como elipses, líneas, paths, polígonos, polilíneas y rectángulos.

Esto traducido al español, quiere decir que vamos a poder crear interfaces de usuario más complejas, como por ejemplo, crear fondos divididos en secciones, ó listas con fondos complejos para dividir la información.

Un ejemplo de esto, es por ejemplo, que escribiendo el siguiente código:

<Path Aspect="Uniform"
      Stroke="Yellow"
      StrokeThickness="1"
      Fill="Red"
      BackgroundColor="LightGray"
      HorizontalOptions="Start"
      HeightRequest="100"
      WidthRequest="100">
    <Path.Data>
        <!-- Path data goes here -->
    </Path.Data>  
</Path>

Ya la comunidad ha empezado a crear aplicaciones asombrosas, lo que demuestra el potencial de estas nuevas características:

Gradients y Brushes en Xamarin Forms

Otra de las grandes mejoras de Xamarin Forms respecto a la parte visual para nuestras aplicaciones. Con esta característica, ya podemos integrar degradados en nuestras aplicaciones basadas en Xamarin Forms.

Por ejemplo, podemos colocarle a un elemento Frame un degradado para pasar de esto:

A esto:

Sin duda, una mejora visual bastante novedosa, que combinada con los Shapes y Paths, permitirán la creación de aplicaciones visuales sorprendentes.

Embedded Fonts en Xamarin Forms

Con esta nueva característica de Xamarin Forms, se simplifica muchísimo el poder utilizar fuentes personalizadas en tus aplicaciones basadas en Xamarin Forms.

Antes, era necesario agregar la fuente en cada proyecto específico, para después crear una referencia con la definición de la ruta de la fuente desde el proyecto Xamarin Forms, lo que a veces podía complicar las cosas o nos hacía perder algo de tiempo descubriendo la sintaxis correcta para el uso de cada fuente.

Ahora, tan sólo debemos agregar la fuente en el proyecto net standard y utilizar el método “ExportFont”, especificando el nombre del archivo:

using Xamarin.Forms;

[assembly: ExportFont("CuteFont-Regular.ttf")]

Con esto, simplemente especificaremos el nombre de la FontFamily donde queramos utilizar la fuente:

<Label Text="Hello Embedded Fonts" FontFamily="CuteFont-Regular"/>

VisualStateManager Target en Xamarin Forms

Con esta nueva característica, es posible actualizar una serie de controles de nuestra aplicación, cuando se detecte un cambio, especificando el control target y la propiedad. Un ejemplo de esto, lo podemos ver en este ejemplo:

<VisualStateManager.VisualStateGroups>
	<VisualStateGroup Name="ColorStates">
		<VisualState Name="Red">
			<VisualState.Setters>
				<Setter TargetName="TargetLabel1" Property="Label.BackgroundColor" Value="#340002" />
				<Setter TargetName="TargetLabel1" Property="Label.TextColor" Value="#920e0c" />
				<Setter TargetName="TargetLabel1" Property="Label.Text" Value="Red" />
			</VisualState.Setters>
		</VisualState>

		<VisualState Name="Blue">
			<VisualState.Setters>
				<Setter TargetName="TargetLabel1" Property="Label.BackgroundColor" Value="#4a707a" />
				<Setter TargetName="TargetLabel1" Property="Label.TextColor" Value="#94b0b7" />
				<Setter TargetName="TargetLabel1" Property="Label.Text" Value="Blue" />
			</VisualState.Setters>
		</VisualState>
	</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

C# Markup Extensions

Nadie duda que hoy en día, la mayoría de las aplicaciones creadas en Xamarin Forms utilizan XAML para definir la interfaz de usuario. Sin embargo, para aquellos que utilizar C# para este propósito, encontrarán en las c# markup extensions una ayuda bastante buena, ya que son una serie de métodos de extensión, que permiten simplificar tareas comunes a través de la invocación de métodos.

Por ejemplo, si quisiéramos crear un elemento label centrado dentro de un StackLayout en la página central, podríamos hacerlo de la siguiente manera:

public class MainPage : ContentPage
{
    public MainPage() => Build();

    void Build()
    {
        Content = new StackLayout()
        {
            Children = {
                new Label { Text = "Welcome to Xamarin.Forms!" }.CenterExpand()
            }
        };
    }
}

Como puedes apreciar, como parte de la creación del elemento Label, se ejecuta un método llamado “CenterExpand”, que permite centrar vertical y horizontalmente el elemento dentro del StackLayout.

Control RadioButton en Xamarin Forms

Este es un control que considero, hacía falta como parte de los controles de Xamarin Forms. Es un control que estamos acostumbrados a utilizar, si necesitamos un formulario, donde deseamos que el usuario seleccione una sola opción de un conjunto de opciones. Un ejemplo de la creación de este control, es el siguiente:

<StackLayout>
    <Label Text="What's your favorite animal?" />
    <RadioButton Text="Cat" />
    <RadioButton Text="Dog" />
    <RadioButton Text="Elephant" />
    <RadioButton Text="Monkey"
                 IsChecked="true" />
</StackLayout>

Si quisiéramos tener un grupo de RadioButtons, sólo tendríamos que asignar en la propiedad GroupName el mismo nombre:

<Label Text="What's your favorite color?" />
<RadioButton Text="Red"
             TextColor="Red"
             GroupName="colors" />
<RadioButton Text="Green"
             TextColor="Green"
             GroupName="colors" />
<RadioButton Text="Blue"
             TextColor="Blue"
             GroupName="colors" />
<RadioButton Text="Other"
             GroupName="colors" />

Relanzamiento del Xamarin Community Toolkit

El equipo de Xamarin, decidió darle un reinicio a este repositorio, en el cual, la comunidad se encarga de recopilar elementos comunes para el desarrollo con Xamarin Forms, tales como la creación de Toasts, Snackbars y AvatarViews. Lo mejor de todo, es que el equipo de Xamarin está involucrado, lo que le da una mayor certeza a este proyecto, y asegurando que el código se encuentre dentro de los estándares de calidad requeridos para el uso en proyectos complejos.

Algunas de las categorías que forma parte de este toolkit, son:

  • Core
  • Behaviors
  • Converters
  • Effects
  • Extensions
  • ObjectModel
  • Layout
  • Views
  • SampleApp

Este repositorio, sin duda alguna ayudará a los desarrolladores Xamarin para crear aplicaciones más rápidamente, pudiendo optimizar tiempos de desarrollo. No está de más decir, que si tienes código que quieras compartir, que crees que podría ser de utilidad para otros, puedes hacer un pull request al proyecto para que este proyecto sea mejor cada día.

Así es como concluimos con este listado ó Rewind del año 2020 de Xamarin. Espero te sea de utilidad.

¡Saludos!

Deja un comentario

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