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.
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
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?
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
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
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
Xamarin.Forms es un toolkit que crea una abstracción sobre la interfaz de usuario de Android, iOS y Windows Phone permitiendo desarrollarla una única vez con código C# o Extensible Application Markup Language (XAML). Permite crear facilmente y con rapidez interfaces de usuario nativas compartidas donde cada elemento visual en Xamarin.Forms son mapeados a elementos nativos y comportamientos propios de cada plataforma.
Preguntas….
En esta sesion vamos a ver que podemos crear nuestras propias abstracciones ya sea modificando alguna de las existentes o partiendo desde prácticamente cero.