Customise Controls with Handlers in .Net MAUI

OverView

We all Know that .Net MAUI is the evolution of Xamarin Forms. .Net MAUI provides you set of Cross Platform Control . To customise this controls with their native implementation we use .Net maui Handler architectural concept. .Net Maui Handlers are similar to Xamarin form renderers . For changing one property we need to write tons of code in Xamarin forms renderer .Unlike renderers Handlers provides you easy way to achieve native implementation and better performance.

Every Control in .Net MAUI has its own handler and every handler has its own mapper.Handlers are responsible for instantiating the underlying native view and mapping the cross-platform control API to the native view API.

Mappers

Mappers are a key concept in .NET MAUI handlers, usually providing a property mapper and sometimes a command mapper, which maps the cross-platform control’s API to the native view’s API.This customization, which modifies the native views for the cross-platform control, is achieved by modifying the mapper for a handler with one of the following methods:

• PrependToMapping modifies the mapper for a handler before the .NET MAUI control mappings have been applied.
• ModifyMapping modifies an existing mapping.
• AppendToMapping which modifies the mapper for a handler after the .NET MAUI control mappings have been applied.

These methods are called in a similar way, they only defer in the order in which our modifications are executed.

Customise a Control using Handler

Lets take Entry Control and try to create boderless entry in Andriod, IOS, Windows

Customising all instances of a control

This customisation applies to entry control across application level

public partial class App : Application
{
public App()
{
InitializeComponent();

MainPage = new AppShell();
        Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping("BoderlessEntry", (handler, view) =>
        {
    #if ANDROID
            handler.PlatformView.SetBackgroundColor(Microsoft.Maui.Graphics.Colors.Transparent.ToAndroid());
    #elif IOS
            handler.PlatformView.BorderStyle = UIKit.UITextBorderStyle.None;
    #elif WINDOWS
            handler.PlatformView.BorderThickness = new Microsoft.UI.Xaml.Thickness(0);
    #endif
        });

    }
}

Customising a specific instance of a control

If you want to customize specific entry among all entries in a page .Create CustomBorderlessEntry Class inheriting from entry and then apply customisation as shown below

public class CustomBorderlessEntry:Entry
 {
  
 }

public partial class App : Application
{
public App()
{
InitializeComponent();

MainPage = new AppShell();
        Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping("BoderlessEntry", (handler, view) =>
        {
           if (view is CustomBorderlessEntry)
              {
              #if ANDROID
                      handler.PlatformView.SetBackgroundColor(Microsoft.Maui.Graphics.Colors.Transparent.ToAndroid());
              #elif IOS
                      handler.PlatformView.BorderStyle = UIKit.UITextBorderStyle.None;
              #elif WINDOWS
                      handler.PlatformView.BorderThickness = new Microsoft.UI.Xaml.Thickness(0);
              #endif
                  });
          
              }
        }
}

If you want to remove complier directives( #if ANDROID) .you can write code at platform level.For Andriod in MainActivity.cs, IOS AppDelegate, Windows App.xaml.cs