.NET MAUI - Renders and Mapper

Advanced Guide to Renderers and Mappers in .NET MAUI

.NET MAUI introduced a new architecture that replaced traditional Xamarin.Forms Renderers with Handlers and Mappers. This shift has improved performance, modularity, and customization capabilities of UI components across platforms.

Join our exclusive WhatsApp group for Xamarin and .NET MAUI developers to connect with experts, share insights, and get help with your projects. Whether you're a beginner or an experienced developer, this group is the perfect place to enhance your skills and collaborate with the community.

Please, support my blog by clicking on our sponsors ad!

Whether you're upgrading an existing Xamarin project or starting fresh with MAUI, understanding how to use and customize handlers will give you complete control over native rendering—and help you crack real-world interview questions.

In this blog, we’ll explore:

• The difference between Renderers and Mappers
• Creating reusable handler mappings
• Applying multiple custom handlers in a single class
• A complete example with Picker and DatePicker
• Using FormHandler for better code organization
• Interview questions to test your knowledge

🧠 Renderers vs Mappers in .NET MAUI

One of the key differences between Xamarin.Forms and .NET MAUI is how UI components are rendered and customized. Renderers have been replaced with Handlers and Mappers in .NET MAUI, improving performance, organization, and flexibility. Let’s take a closer look at these two concepts:

Feature	Renderers (Xamarin.Forms)	Mappers (NET MAUI)
What they are	Renderers are responsible for creating platform-specific views for controls.	Mappers are used to customize platform-specific behavior for controls.
Customization	Customizations are done by subclassing and overriding methods for each platform.	Customizations are done via Mapper.AppendToMapping(), providing cleaner control.
Performance	Generally slower due to a heavier rendering pipeline.	More efficient, with a lighter, faster handler pipeline.
Code organization	Requires separate classes for each control’s renderer (e.g., ButtonRenderer, EntryRenderer).	Centralized mapping for controls using handlers, making the code more organized.
Platform-specific code	Platform-specific code is scattered across renderers for each control.	Platform-specific code is centralized in the mapper.
Usage	You create individual renderers for each control.	You can use a single mapper to customize multiple controls.
Extensibility	Difficult to add new controls without additional renderers.	Easily extendable with additional handlers and mappers in one place.

As you can see, Mappers in .NET MAUI provide a much more modular and efficient approach to customizing controls for different platforms. Instead of working with separate renderers for each platform and control, you can manage everything centrally in a single class via handlers and mappers.

2. Customizing the Picker and DatePicker Controls

Let’s walk through how you can create custom handlers for two common controls in .NET MAUI: Picker and DatePicker. We will make both controls borderless on Android and iOS using handlers and mappers.

Step 1: Create Custom Handlers for Picker and DatePicker

We can customize native controls through handlers using Mappers. Mappers allow us to modify control properties per platform, such as background color, border styles, or text sizes.

        public static class FormHandler
        {
            // Method to create a borderless Picker handler
            public static void BorderlessPickerHandler()
            {
                Microsoft.Maui.Handlers.PickerHandler.Mapper.AppendToMapping("BorderlessPicker", (handler, view) =>
                {
    #if ANDROID
                    // Android: Make Picker background transparent and text size 17f
                    handler.PlatformView.Background = null;
                    handler.PlatformView.SetBackgroundColor(Android.Graphics.Color.Transparent);
                    handler.PlatformView.BackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(Colors.Transparent.ToAndroid());
                    handler.PlatformView.TextSize = 17f;
    #elif IOS
                    // iOS: Set background and border properties for Picker
                    handler.PlatformView.BackgroundColor = UIKit.UIColor.Clear;
                    handler.PlatformView.Layer.BorderWidth = 0;
                    handler.PlatformView.BorderStyle = UIKit.UITextBorderStyle.None;
                    handler.PlatformView.Font = UIKit.UIFont.SystemFontOfSize(17f);
    #endif
                });
            }

            // Method to create a borderless DatePicker handler
            public static void BorderlessDateHandler()
            {
                Microsoft.Maui.Handlers.DatePickerHandler.Mapper.AppendToMapping("CustomDatePicker", (handler, view) =>
                {
    #if ANDROID
                    // Android: Make DatePicker background transparent and text size 17f
                    handler.PlatformView.Background = null;
                    handler.PlatformView.SetBackgroundColor(Android.Graphics.Color.Transparent);
                    handler.PlatformView.BackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(Colors.Transparent.ToAndroid());
                    handler.PlatformView.TextSize = 17f;
    #elif IOS
                    // iOS: Set background and border properties for DatePicker
                    handler.PlatformView.BackgroundColor = UIKit.UIColor.Clear;
                    handler.PlatformView.Layer.BorderWidth = 0;
                    handler.PlatformView.BorderStyle = UIKit.UITextBorderStyle.None;
                    handler.PlatformView.Font = UIKit.UIFont.SystemFontOfSize(17f);
    #endif
                });
            }

            // Method to call both handler methods together
            public static void ControlHandler()
            {
                BorderlessPickerHandler();  // Apply borderless Picker settings
                BorderlessDateHandler();    // Apply borderless DatePicker settings
            }
        }
    

Table of Contents for .Net Maui

• What is .NET MAUI and why it’s important
• Applying the MVVM pattern for cleaner architecture
• Working with Renderers and Mappers
• Storing data locally using SQLite and Preferences
• Image Picker from gallery
• Sending push notifications using Firebase
• Publishing your app to Android and iOS stores
• 🌟 Explore More Topics

Explanation:

1. BorderlessPickerHandler: This method customizes the Picker control, making its background transparent and setting the text size to 17f. It uses platform-specific code for Android and iOS to achieve this effect.
2. BorderlessDateHandler: Similarly, this method customizes the DatePicker control, making it borderless with a transparent background. It adjusts the control properties differently for Android and iOS to ensure a consistent appearance across platforms.
3. ControlHandler: This method calls both the BorderlessPickerHandler and BorderlessDateHandler methods, ensuring that both handlers are applied together in one place.

3. Using the FormHandler Class

Now that we have created the handlers for Picker and DatePicker, we can use the FormHandler class to apply the customizations throughout the app.

        public partial class App : Application
        {
            public App()
            {
                InitializeComponent();
                
                // Apply all custom handlers
                FormHandler.ControlHandler();

                MainPage = new MainPage();
            }
        }
    

By calling FormHandler.ControlHandler(), we ensure that both the BorderlessPickerHandler and BorderlessDateHandler are applied to the Picker and DatePicker controls respectively.

4. Benefits of Using Mappers and Handlers

• Performance: Handlers are more lightweight and faster compared to renderers. The handler pipeline reduces overhead, providing better performance for your app.
• Modularity: By centralizing control customizations in mappers, it’s easier to manage and extend functionality. You can add more handlers for different controls in the same class.
• Code Cleanliness: You don’t need to create separate classes for each control. Mappers allow you to manage all your customizations in a single location.
• Cross-Platform Consistency: Mappers allow you to apply platform-specific customizations, ensuring your app maintains a consistent look and feel across different devices.

Interview Questions to Test Your Knowledge

1. What is the difference between Renderers and Mappers in .NET MAUI?
2. How would you create a custom handler for a control in .NET MAUI?
3. What is the purpose of the Mapper.AppendToMapping() method in .NET MAUI?
4. How can you ensure cross-platform consistency when customizing controls in .NET MAUI?
5. Explain how the handler pipeline improves performance in .NET MAUI compared to the renderer pipeline in Xamarin.Forms.
6. Why should you avoid creating separate renderer classes for each control in .NET MAUI?
7. What is the role of FormHandler in the example provided, and how does it contribute to code organization?

Conclusion

With the transition from Renderers to Mappers in .NET MAUI, developers can now customize controls more efficiently and with better performance. By using handlers and mappers, we can centralize platform-specific code, streamline our app's architecture, and improve its responsiveness across multiple platforms.

By understanding how to use these concepts in real-world applications, you’ll be able to write cleaner, more maintainable code—and ace interviews for .NET MAUI roles.

Previous Next