Para inaugurar mi blog, empezaré con un serie de posts explicando los Renderers de Xamarin Forms y lo haré por lo más básico.

Xamarin Forms nos permite cambiar muchas propiedades de sus controles. La mayoría son propiedades que comparten las diferentes plataformas, como el tamaño de una imagen, el texto o la imagen de un botón, el color fuente de un cuadro de texto, etc. Pero cuando queremos cambiar una propiedad de un control que solo está disponible en una plataforma en específico, debemos intervenir su renderer.

Las clases llamadas Renderers, son las que Xamarin Forms usa para dibujar, pintar o renderizar los controles nativos en cada plataforma. Interviniendo estas clases, podremos acceder y modificar las características nativas de un control.

Como ejemplo, modificaremos el control Switch para las tres plataformas (iOS, Windows Phone y Android). En el proyecto portable, crearemos una página y pondremos un control Switch dentro de ella, como lo solemos hacer. Y en cada uno de los proyectos de las plataformas, crearemos una clase que heredará, en este caso, de SwitchRenderer, el renderer que dibuja el Switch.

En el proyecto Portable

Creamos el control Switch. Yo lo haré con XAML:

[code language=”xml” title=”MainPage.xaml” highlight=”4,5″]
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DemoSwitchRenderer.MainPage">
<Switch VerticalOptions="Center"
HorizontalOptions="Center" />
</ContentPage>
[/code]

En cada una de las plataformas

Creamos la clase renderer en el proyecto de la plataforma en la que queremos modificar el control. La llamaremos ExtendedSwitchRenderer y heredamos de SwitchRenderer:

[code language=”csharp” title=”ExtendedSwitchRenderer.cs”]
public class ExtendedSwitchRenderer : SwitchRenderer
{
}
[/code]

Todos los renderers que hereden de VisualElementRenderer, tienen dos propiedades públicas llamadas Element y Control. La primera es el control de Forms, en este caso el Switch, y la segunda es el control nativo, que es el que modificaremos.

En la mayoría de renderers se ejecuta el método OnElementChanged cuando el control se está dibujando, y aprovecharemos ahí para modificar el control nativo.

[code language=”csharp” title=”ExtendedSwitchRenderer.cs”]
public class ExtendedSwitchRenderer : SwitchRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Switch> e)
{
base.OnElementChanged(e);
}
}
[/code]

Añadimos el atributo ExportRenderer a nivel de namespace que recibe dos parámetros Type, el primero es el tipo de control de Xamarin Forms (Switch), y el segundo es el tipo de la clase renderer que creamos (ExtendedSwitchRenderer). Sin este atributo, el control se dibujará como lo hace Forms.

[code language=”csharp” title=”ExtendedSwitchRenderer.cs – iOS”]
[assembly: ExportRenderer(typeof(Switch), typeof(ExtendedSwitchRenderer))]
namespace DemoSwitchRenderer.iOS.Controls
{
[/code]

[code language=”csharp” title=”ExtendedSwitchRenderer.cs – Windows Phone”]
[assembly: ExportRenderer(typeof(Switch), typeof(ExtendedSwitchRenderer))]
namespace DemoSwitchRenderer.WinPhone.Controls
{
[/code]

[code language=”csharp” title=”ExtendedSwitchRenderer.cs – Android”]
[assembly: ExportRenderer(typeof(Switch), typeof(ExtendedSwitchRenderer))]
namespace DemoSwitchRenderer.Droid.Controls
{
[/code]

En iOS

En iOS modificaremos los colores del Switch, ya que el control de Forms no tiene una propiedad para hacerlo. Al control nativo, el UISwitch le vamos a modificar, el color cuando el Switch está encendido y el color del círculo:

[code language=”csharp” title=”ExtendedSwitchRenderer.cs – iOS” highlight=”5,6″]
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Switch> e)
{
base.OnElementChanged(e);

Control.OnTintColor = UIColor.Orange;
Control.ThumbTintColor = UIColor.Black;
}
[/code]

SwitchRenderer iOS

En Windows Phone

En Windows Phone solo modificaremos el color cuando el Switch está encendido. El control nativo de Windows Phone es un Border que tiene como hijo el que vemos en la pantalla que es un ToggleSwitchButton:

[code language=”csharp” title=”ExtendedSwitchRenderer.cs – Windows Phone” highlight=”5,6″]
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Switch> e)
{
base.OnElementChanged(e);

var toggle = (ToggleSwitchButton)Control.Child;
toggle.SwitchForeground = new SolidColorBrush(Colors.Red);
}
[/code]

SwitchRenderer Windows Phone

En Android

Como Android tiene textos en sus dos estados, el control nativo, llamado Switch también, permite cambiar esas dos propiedades. Podemos simular los símbolos de encendido y apagado:

[code language=”csharp” title=”ExtendedSwitchRenderer.cs – Android” highlight=”5,6″]
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Switch> e)
{
base.OnElementChanged(e);

Control.TextOff = "O";
Control.TextOn = "l";
}
[/code]

SwitchRenderer Android

Ya aprendimos lo básico de los Renderers; a alterar las características nativas de los controles de Xamarin Forms. Puedes mirar el código fuente de este post.

GitHub Source Code