Gradientes en Xamarin Forms

Como desarrolladores de Xamarin.Forms en algunas ocasiones necesitamos que los controles se vean de una manera diferente, afortunadamente para nosotros, el equipo de Xamarin ha visto estas necesidades y nos ofrece ahora una manera de renderizar y modificar la apariencia de los controles nativamente para cada plataforma. En este post les mostraré de una manera muy sencilla como usar los renders personalizados para crear un Label con gradiente.

Dentro de la solución en la que estés trabajando, en el proyecto portable crearemos una clase que herede de un control Label, además de declarar dos propiedades: TextColor1 y TextColor2. Nuestro Label con gradiente sera llenado de una forma linear usando estas propiedades.

Muy bien todo esta bastante fácil, ahora deberemos configurar los renderizados de manera nativa, comencemos con iOS.

Renderizado en iOS

Todos los renderizados son específicos de la plataforma y son naturalmente localizados dentro de los proyectos de plataforma(Demo.Android y Demo.iOS). Usando el atributo de ExportRenderer, vamos a decirle a Xamarin Forms que use a GradientLabelRenderer para renderizar el control GradientLabel. Debemos de hacer herencia con nuestro renderer desde LabelRenderer porque solo queremos extender o modificar ese control ya existente. Cuando el control se dibuje, nosotros crearemos una imagen de gradiente y se la aplicaremos como si fuera la propiedad TextColor usando el metodo llamado: UIColor.FromPatternImage. También hay que tener en cuenta que deberemos sobreescribir el método OnElementPropertyChanged.

Una vez que tengamos las propiedades de enlace dentro del proyecto portable, este método sera automáticamente invocado cuando las propiedades de TextColor1 y TextColor2 se cambien.

Perfecto, la plataforma iOS esta correctamente configurada.

Renderizado en Android

Ahora haremos el renderizado para el proyecto de Android. Aquí la propiedad de LinearGradient es usada como sombreado. También podemos llamar el método llamado Control.Invalidate() para asegurarnos de que el control se dibuje correctamente cuando el color es cambiado.

Listo, para usar nuestro control modificado lo único que debemos hacer esto dentro de nuestra vista (XAML).

Una parte importante dentro de las aplicaciones son las animaciones, éstas atraen al usuario y hace que las interfaces sean amigables y entretenidas.

Por ello pondré una sección especial justo aqui abajo.

Animación

Para esta sección agregaremos un botón a nuestra vista donde tenga el control personalizado, dentro de dicho control agregaremos el evento Clicked() para animar nuestro label, deberá quedar algo así tu vista:

Y en el backend deberás tener algo como ésto:

Eso es todo lo que tenemos que hacer para tener un label personalizado con gradiente. Solo falta que pruebes tu aplicación para que veas como quedo.