Este documento habla sobre los custom renderers en Xamarin.Forms. Explica qué son los custom renderers y cuándo son necesarios (por ejemplo, para usar controles nativos o personalizar la apariencia de controles existentes). Luego, detalla los pasos para crear un custom renderer: 1) crear un control en Xamarin.Forms, 2) crear un renderer para cada plataforma, 3) agregar un atributo de exportación, y 4) consumir el control. Finalmente, incluye demos sobre cómo crear renderers y agregar propiedades personalizadas.

1. Custom Renderers Made Simple

2. Vicente Guzman
 Aspectos claves del desarrollo
 ¿Que es un Custom Renderer?
 ¿Cuándo son necesarios?
 ¿Por que crear un render?
Agenda
Rendy Del Rosario
 Creando un Custom Renderer paso a paso
 DEMO
 Ciclo de vida de un Custom Renderer
 Controles Nativos
 DEMO

3. Vicente G. Guzman Lucio
Senior Software Engineer
 luciomsp@geeks.ms
 @LucioMSP
Sobre mí

4. Aspectos claves del desarrollo móvil
Native User Interfaces Native API Access Native Performance

5.  ¿Puedo personalizar la apariencia o el comportamiento de un control existente?
 ¿Puedo utilizar controles nativos de cada plataforma con Xamarin.Forms?
 ¿Podemos crear o modificar elementos visuales de Xamarin.Forms?
Principales dudas…

6. ¿Qué es un Custom Renderer?
Poderosa herramienta que nos permite
personalizar y crear nuevas controles.
Un Custom Renderer proporciona un
enfoque potente para personalizar la
apariencia y el comportamiento de los
controles Xamarin.Forms

7. Controles Nativos

8. Controles Nativos

9.  Elementos especificos de la plataforma
 Decoraciones de texto
 Sombras
 Bordes
¿Cuándo son necesarios?

10. Para utilizar controles nativos de cada plataforma
ó (visto desde otra perspectiva)
para crear una visualización específica para cada plataforma
Entonces…. ¿por qué crear un Renderer?

11. Rendy Del Rosario
Twitter: @rdelrosario
FB: RendyDelRosario
http://xamboy.com/

12. 1-Crea un control custom de Xamarin.Forms
2-Crea el custom renderer del control por cada plataforma
3-Agrega el atributo ExportRenderer para especificar cual control usará este renderer
4-Consume el control en Xamarin.Forms
Creando un Custom Renderer paso a paso

13. 1- Crea un control de Xamarin.Form
Crea una subclase del control de Xamarin Forms.

14. 2- Crea el custom renderer del control por cada plataforma

15. 2.1- Sobreescribe el método OnElementChanged del control nativo y escribe
dentro de este la lógica para personalizar el control.
2- Crea el custom renderer del control por cada plataforma

16. 3- Agrega el atributo ExportRenderer para especificar cual control usará este renderer.

17. 4- Consume el control customizado en Xamarin Forms
Agregar el NameSpace del control en tu XAML, con una variable (en este caso local)
Usa la variable : Nombre del control, para acceder al control

18. DEMO
Creando tu primer Control Custom

19. Ciclo de vida de un Custom Renderer
Este método se llama cuando el control de Xamarin.Forms es creado

20. Principales propiedades
- Acceso al control original de Forms
- Acceso al control nativo

21.  Un BindableProperty es un tipo especial de propiedad, donde el valor de la
propiedad es agregado al control. Esta puede ser accedida desde Xaml o
CodeBehind.
Propiedades Customizadas

22. DEMO
Agregar una propiedad a nuestro Renderer Actual

23. Controles Nativos

24. 1- Crea tu control custom en el proyecto de Forms
2- Crea una subclase de la clase ViewRenderer <T1, T2> que procesa el control
personalizado.
3- Sobreescribe el método OnElementChanged y Asigna el control Nativo
4- Agrega el atributo ExportRenderer para especificar cual control usará este
renderer.
5- Consume el control en Xamarin.Forms
Creando un Control nativo Paso a Paso

25. 1- Crea tu control custom en el proyecto de Forms

26. 2- Crea una subclase de la clase ViewRenderer <T1, T2> que procesa el
control personalizado por plataforma

27. 3- Sobreescribe el método OnElementChanged y Asigna el control Nativo

28. 4- Agrega el atributo ExportRenderer para especificar cual
control usará este renderer

29. 5- Consume el control en Xamarin.Forms
XAML
CODE
BEHIND

30. DEMO / Creación de un renderer nativo de un dibujador

31. Buenas Prácticas

32.  Xamarin- Documentación oficial
https://developer.xamarin.com/guides/xamarin-forms/application-
fundamentals/custom-renderer/
 Xamarin University: Custom Renderers in Xamarin.Forms
https://www.youtube.com/watch?v=55r1wHdOLBo
Referencias recomendadas

33. Gracias! Preguntas?
Vicente Guzman
luciomsp@geeks.ms
vicenteguzman.mx
@LucioMSP
Rendy Del Rosario
FB: RendyDelRosario
http://xamboy.com/
@rdelrosario