.NET MAUI - Handlers

Introduction

This article explores the concept of .NET MAUI handlers and how they are used in development. Handlers act as a bridge between virtual views and native views on each platform. In simpler terms, they are responsible for instantiating the underlying native view and mapping the cross-platform control API to the native view API. This essentially allows developers to use the same code across different platforms without worrying about the underlying implementation details.

Key concepts of handlers include property mappers and command mappers. These mappers define what actions are taken when a property or command changes. Handlers also support lifecycle events that allow developers to perform actions when a handler is created or changed.

Quick Links:

• Project Setup
• Implementation
• Download Code

Project Setup:

• Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
  
• In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
  
• In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:
  
• In the Additional information window, click the Create button:
  
• Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app
  

Implementation

Here's a simple example for a .NET MAUI Entry handler:

• Conditional Compilation: #if ANDROID and #endif are conditional compilation directives. They ensure the code within them is only compiled for the Android platform and similar to other platforms as well.
• Entry Handler Customization:  This code customizes the appearance of Entry controls with the name "BorderlessEntry".

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

• It uses the EntryHandler.Mapper.AppendToMapping method to register a custom mapping for this specific named control.
• The lambda expression defines what happens when an Entry with the name "BorderlessEntry" is encountered.
• Inside the lambda, it checks if the view is indeed an Entry control.
• Then, depending on the platform (Android, iOS, or Windows), it applies platform-specific styling:
  • On Android, the background color is set to beige.
  • On iOS, the border style is removed to create a borderless look.
  • On Windows, a border thickness of 10 is applied.

This code demonstrates how to customize the appearance of an Entry control in .NET MAUI using handlers. By registering a custom mapping for "BorderlessEntry", you can achieve a platform-specific, borderless look for entries with that specific name. This allows for targeted styling without affecting all Entry controls in your app.

Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

Tweet

Conclusion:

You can customize various other aspects of the Entry control using platform-specific properties and methods within the handler. This approach allows for a more granular control over the appearance of your UI elements on different platforms while maintaining cross-platform compatibility.