In this session we are going to see in depth the new .NET MAUI handlers, a comparison with the Xamarin.Forms renderers as well as other related aspects such as the possibilities when extending or customizing a handler, performance, etc.

1. #MonkeyConf
.NET MAUI
Handlers

2. SPONSORS

3. Antes de empezar,
¿qué es .NET MAUI?

4. El viaje hacia un único .NET

5. – .De .NET 5 a .NET 6
.NET Framework
Mono / Xamarin
.NET Core.NET
Un SDK, un BCL, herramientas unificadas
Mobile & Desktop Cross-platform UI nativa
UI web Cross-platform
Investigaciones en la nube
Continuar mejorando la velocidad, tamaño, diagnóstico en
servicios Azure
La vision de un .NET

6. UI nativa multiplataforma
Proyecto único, base de código única
Implementar en múltiples dispositivos, móviles y de
escritorio
Evolución de Xamarin.Forms
Dirigido a .NET 6, disponible a finales del próximo año
Crear interfaces de usuario atractivas para cualquier dispositivo
La evolución de Xamarin.Forms
.NET MAUI
.NET Platform

7. .NET MAUI
Proyectos SDK-style
Proyecto único
Soporte CLI
.NET 6 BCL
Multi-paradigma
• Interfaz de usuario compatible con XAML y C#
• Listo para Blazor y C# MVU
DESKTOP MOBILE
Windows
macOS
iOS
Android
.NET MAUI
File | New
• Multi-platform App UI (.NET)
CLI
• dotnet install maui
• dotnet new maui
Namespaces
• System.Maui (previously Xamarin.Forms)
• System.Device (previously Xamarin.

8. Los objetivos de .NET MAUI

9. La arquitectura de .NET MAUI
Las API de Android, iOS, macOS y Windows están unificadas en una API abstracta que permite una experiencia
de desarrollo que permita escribir una vez y ejecutar en cualquier plataforma, al tiempo que proporciona un
acceso total a todos los aspectos de cada plataforma nativa.
App Code interactúa principalmente con .NET
MAUI API (1).
Según sea necesario, App Code puede acceder
directamente las API de la plataforma (2) a través
Handlers, etc.
.NET MAUI accede directamente las API de la
plataforma nativa (3).
Android iOS macOS Windows
Xamarin.Android Xamarin.iOS Xamarin.Mac WinUI
.NET MAUI
App Code
Mono Runtime WinRT
.NET 6 BCL
1
2
3

10. ¿Handlers?

11. .NET MAUI no tiene renderers

12. .NET MAUI usa handlers

13. Glosario de términos

14. ¿Cuáles son los problemas de arquitectura de Xamarin.Forms?
Xamarin.Forms.Button
- Los Renderers estan muy acoplados a componentes Xamarin.Forms
[assembly: ExportRenderer (typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.iOS {
public class MyEntryRenderer : EntryRenderer
- Assembly Scanning es realmente lento
- Realmente dificil de acceder a la plataforma nativa desde código xplat
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
boxView.On<iOS>().UseBlurEffect(BlurEffectStyle.ExtraLight);

15. Xamarin.Forms: Añadir un comportamiento personalizado, podría ser más sencillo
// You need to know to export this renderer and tie it to a core type…
[assembly: ExportRenderer (typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.iOS
{
// You need to know what type to inherit from…
public class MyEntryRenderer : EntryRenderer
{
// You need to know what method to override…
protected override void OnElementChanged (ElementChangedEventArgs<Entry> e)
{
// You need to know when to do your work (before? after?)
base.OnElementChanged (e);
// You need to know that we call the native view “Control”
// Spoiler alert: this varies from platform to platform and
// sometimes it even varies from renderer to renderer!
if (Control != null) {
// Finally! We can change the color!
public class MyEntry : Entry
{
}

16. Los objetivos con .NET MAUI
- Desacoplar los Renderers de Xamarin.Forms
IButton

17. Los objetivos con .NET MAUI
- Mejorar el rendimiento es uno de los objetivos principales
- Desde el proyecto xplat, registre fácilmente cualquier handler personalizado
RegistrarHandlers.Handlers.Register<Xamarin.Forms.Label, LabelHandler>();
#if MONOANDROID
RegistrarHandlers.Handlers.Register<Xamarin.Forms.Label,
Xamarin.Forms.Platform.Android.LabelRenderer>();
RegistrarHandlers.Handlers.Register<Xamarin.Forms.Button,
Xamarin.Forms.Platform.Android.AppCompat.ButtonRenderer>();
#endif
- No hacer assembly scanning

18. Los objetivos con .NET MAUI
- Permitir acceder a código nativo con facilidad
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
boxView.On<iOS>().UseBlurEffect(BlurEffectStyle.ExtraLight);
[assembly: ExportRenderer (typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.iOS {
public class MyEntryRenderer : EntryRenderer
- Eliminar APIs confusas
#if MONOANDROID
ViewHandler.ViewMapper[nameof(IView.BackgroundColor)] = (handler, view) =>
(handler.NativeView as
AView).SetBackgroundColor(Xamarin.Forms.Color.Purple.ToNative());
var textView = crossPlatformLabel.Handler.NativeView as TextView;
#endif

19. Los Renderers actuales
 Fundamentalmente es un control nativo
 Implementa IVisualElementRenderer
public interface IVisualElementRenderer
{
VisualElement Element { get; }
VisualElementTracker Tracker { get; }
AView View { get; }
event EventHandler<VisualElementChangedEventArgs> ElementChanged;
event EventHandler<PropertyChangedEventArgs> ElementPropertyChanged;
SizeRequest GetDesiredSize(int widthConstraint, int heightConstraint);
void SetElement(VisualElement element);
void SetLabelFor(int? id);
void UpdateLayout();
}

20. public interface IViewHandler
{
void SetView(IView view);
void UpdateValue(string property);
void Remove(IView view);
object NativeView { get; }
bool HasContainer { get; set; }
SizeRequest GetDesiredSize(double widthConstraint, double heightConstraint);
void SetFrame(Rectangle frame);
}
public interface IVisualElementRenderer
{
VisualElement Element { get; }
VisualElementTracker Tracker { get; }
AView View { get; }
event EventHandler<VisualElementChangedEventArgs> ElementChanged;
event EventHandler<PropertyChangedEventArgs> ElementPropertyChanged;
SizeRequest GetDesiredSize(int widthConstraint, int heightConstraint);
void SetElement(VisualElement element);
void SetLabelFor(int? id);
void UpdateLayout();
}
IVisualElementRenderer
IViewHandler - .NET
MAUI

21. IView & IViewHandler
public interface IViewHandler
{
void SetView(IView view);
void UpdateValue(string property);
void Remove(IView view);
object NativeView { get; }
bool HasContainer { get; set; }
SizeRequest GetDesiredSize(double widthConstraint, double heightConstraint);
void SetFrame(Rectangle frame);
}
public interface IView
{
Rectangle Frame { get; }
IViewHandler Handler { get; set; }
IView Parent { get; }
void Arrange(Rectangle bounds);
SizeRequest Measure(double widthConstraint, double heightConstraint);
SizeRequest DesiredSize { get; }

22. La estrategia actual con Xamarin.Forms Renderers
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs
e)
{
if (e.PropertyName == Button.TextColorProperty.PropertyName)
UpdateTextColor();
else if (e.PropertyName == VisualElement.IsEnabledProperty.PropertyName)
UpdateEnabled();
else if (e.PropertyName == Button.FontProperty.PropertyName)
UpdateFont();
else if (e.PropertyName == Button.CharacterSpacingProperty.PropertyName)
UpdateCharacterSpacing();
base.OnElementPropertyChanged(sender, e);
}
private void UpdateFont()
private void UpdateTextColor()

23. La estrategia con Handlers en .NET MAUI
public partial class LabelHandler : AbstractViewHandler<ILabel, TextView>
{
protected override TextView CreateView() => new TextView(Context);
public static void MapText(IViewHandler handler, ILabel view) =>
(handler as LabelHandler).TypedNativeView.UpdateText(view);
}
public static class TextViewExtensions
{
public static void UpdateText(this TextView textView, IText text)
{
textView.Text = text.Text;
}
public partial class LabelHandler
{
public static PropertyMapper<ILabel> LabelMapper =
new PropertyMapper<ILabel>(ViewHandler.ViewMapper)
{
[nameof(ILabel.Text)] = MapPropertyText,

24. Los Handlers son “solo” una reorganización
public static class TextViewExtensions
{
public static void UpdateText(this TextView textView, IText text)
{
textView.Text = text.Text;
}
public class LabelRenderer : ViewRenderer<Label, TextView>
{
void UpdateText()
{
textView.Text = text.Text;
}

25. Xamarin.Forms: Personalizar el comportamiento de un control
// You need to know to export this renderer and tie it to a core type…
[assembly: ExportRenderer (typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.iOS
{
// You need to know what type to inherit from…
public class MyEntryRenderer : EntryRenderer
{
// You need to know what method to override…
protected override void OnElementChanged (ElementChangedEventArgs<Entry> e)
{
// You need to know when to do your work (before? after?)
base.OnElementChanged (e);
// You need to know that we call the native view “Control”
// Spoiler alert: this varies from platform to platform and
// sometimes it even varies from renderer to renderer!
if (Control != null) {
// Finally! We can change the color!
public class MyEntry : Entry
{
}

26. Maui: Personalizar el comportamiento de un control
// You don’t need to register a new renderer.
public partial class EntryRenderer
{
// You know what method to call because you named it!
public static void MapBackgroundColor (IViewRenderer renderer, IView view)
{
// You don’t need to call any base methods here or worry about order.
// Every renderer is consistent; you know where the native view is.
var nativeView = (NativeView)renderer.NativeView;
var color = view.BackgroundColor;
if (color != null) {
// Phew! That was easy!
nativeView.BackgroundColor = UIColor.FromRGB (204, 153, 255);
}
}
}
public partial class EntryRenderer {
public static PropertyMapper<IView> ViewMapper = new
PropertyMapper<IView> {
// Add your own method to map to any property
[nameof(IView.BackgroundColor)] = MapBackgroundColor
};
}

27. Maui: Personalizar el comportamiento de un control
#if MONOANDROID
ButtonRenderer.ButtonMapper[nameof(IButton.TextColor)] = (handler, view) =>
{
var nativeView = handler.NativeView as Aview;
// Add your own logic to map the TextColor property
};
#endif

28. Veamos como
funcionan los
Handlers de .NET
MAUI

29. Veamos como hacer el
port de un
Xamarin.Forms Renderer
a un .NET MAUI Handler

30. Pero…

31. Renderer to Handler &
Handler to Renderer
Shims
https://github.com/xamarin/Xamarin.Forms/pull/12546

32. .NET MAUI e inyección de dependencias
.NET MAUI usará el concepto de Host similar a ASP.NET. Esto permitirá usar Containers y providers
para nuestros handlers al igual que permitir configuraciones con archivos appsettings, y otras
posibilidades como gestionar el ciclo de vida de cada plataforma, registrar servicios, logging
extensions etc.
El AppBuilder estará oculto por defecto, pero se podrá sobreescribir y usarlo para extender y registrar
servicios, configurar logging o registrar nuevos handlers.
En .NET MAUI, vamos a usar Microsoft Dependency Injection para permitir registrar custom handlers.
var (host,app) = App.CreateDefaultBuilder()
.RegisterHandler<IButton, CustomHandlers.CustomPinkTextButtonHandler>()
.ConfigureServices(ConfigureExtraServices)
.Init<MyApp>();
var page = app.GetStartup()
https://github.com/xamarin/Xamarin.Forms/pull/12460

33. ¿Y que ocurre con los renderers de Xamarin.Forms?
En Xamarin.Forms se usaba el atributo ExportRenderer para registrar un Renderer. Internamente en Xamarin.Forms, se usa el escaneo de
ensamblados para buscar y registrar los Renderers.
En .NET MAUI, el escaneo de ensamblado no se usará por defecto, y permitiremos registrar un Renderer de esta manera:
Sin embargo, permitiremos en los casos deseados registrar Renderers usando el escaneo de ensamblaje:
var (host,app) = App.CreateDefaultBuilder()
.RegisterRenderer<CustomBoxView, CustomBoxViewRenderer>()
.ConfigureServices(ConfigureExtraServices)
.Init<MyApp>();
var page = app.GetStartup()
var (host,app) = App.CreateDefaultBuilder()
.ConfigureRenderers( options => options.ScanForRendererAttribute = true)
.ConfigureServices(ConfigureExtraServices)
.Init<MyApp>();
var page = app.GetStartup()

34. Usando los Renderers “antiguos” en .NET MAUI
Puedes elegir la que más te convenga en cada caso, pero ten en cuenta
que:
Usando Handlers:
• Requiere "algo de tiempo" para la conversión de código.
• Cada Handler es equivalente a un Fast Renderer además de ser
gestionado de forma diferente por Layouts que tienen un mejor
rendimiento.
• Permita más opciones de extensibilidad.
Usando Renderers:
• No requiere cambios.
• No aprovecha ninguna de las mejoras de los Handlers (rendimiento,
extensibilidad, etc.)

35. Mezclando renderers y
handlers en la misma App
.NET MAUI

36. La arquitectura de .NET MAUI
.NET MAUI utiliza Layouts multiplataforma, interfaces para definir controles, métodos de extension con las
vistas nativas e implementaciones usando vistas nativas. Se utilizan los mismos controles nativos
independientemente de MVVM, MVU, RxUI, Blazor, etc.
Interfaces
System.Maui.Views son interfaces que describen
cada control.
IButton > IText > IView
Handlers
Estos son las abstracciones e implementaciones de
cada control sin conocimiento de MVU o MVVM.
System.Maui.Handlers:
• ButtonHandler.Android.cs
• ButtonHandler.Mac.cs
• ButtonHandler.Standard.cs
• ButtonHandler.Win32.cs
• ButtonHandler.cs
• ButtonHandler.iOS.cs
Patrones
Estas implementaciones de controles añaden soporte a los
patrones de diseño soportados.
System.Maui.Bindables contiene las capacidades relacionadas con
MVVM, y controles con soporte a databinding.

37. El trabajo con .NET MAUI Handlers
• Nueva arquitectura de Renderers
• Nueva metodología
• Nueva organización
• Nueva arquitectura de Layouts
• Eliminar obsoletos
• Eliminar “slow” renderers
• Eliminar pre-AppCompat
• Unificar APIs entre Xamarin.Forms y
Xamarin.Essentials
• Usar
Microsoft.Extensions.DependencyInjection
• Cross-Platform Lifecycle
• Corregir “AndExpand”
• Corregir “MinHeightRequest” & similares
• Usar GlideX
 Migration Tool con try-convert
 Xamarin Native -> .NET 6
 Xamarin.Forms -> .NET MAUI

38. • .NET 5.0 se ha lanzado en Noviembre 2020
• Xamarin.Forms 5.0 en Diciembre 2020
• .NET 6.0 MAUI + soporte a móvil previews con .NET 6 Preview 1
El roadmap de .NET
Dic 2019
.NET Core 3.1
LTS
Nov 2020
.NET 5.0
Nov 2021
.NET 6.0
LTS
Nov 2022
.NET 7.0
Nov 2023
.NET 8.0
LTS

39. Preguntas &
Respuestas

40. Gracias!
Gracias a nuestros Sponsors.
Sin ellos el evento no sería posible.