Feb 17, 20223 min read

How to Reuse Xamarin.Forms Custom Renderers in .NET MAUI

Nowadays, we see many devices working across multiple platforms, from Android and iOS to Windows and macOS. To develop multiple applications for a single purpose for all these platforms is very time-consuming. To address this need, Microsoft provides a UI framework called Xamarin.Forms that has recently evolved into a new framework called .NET MAUI. As an evolution of Xamarin.Forms, .NET MAUI has many significant advantages over its predecessor. Some of these advantages are elaborated on in the blog 5 Advantages of .NET MAUI Over Xamarin.

As we know, .NET MAUI uses handler architecture whereas Xamarin.Forms uses renderer architecture. But don’t worry, .NET MAUI is still compatible with renderers. If you have a big project with complex custom renderers implemented and you have no idea to migrate them into handlers, then this blog post is for you.

Here, we will see how easy it is to migrate your existing Xamarin.Forms custom renderers into a .NET

MAUI project.

Prerequisites for .NET MAUI

Ensure you have Visual Studio 2022 (Preview 2 or newer) with the required workloads to run the .NET MAUI project. For more information, refer to the .NET MAUI Installation documentation.

Create a Xamarin.Forms custom renderer

Custom renderers are used to ensure consistency in the appearance of elements like styles, background colors, text formats across platforms by customizing the Xamarin controls.

Step 1: First, let’s create a Xamarin.Forms Button component which we will customize with a simple custom renderer.

Refer to the following code example in which we have created a custom button class named MyButton.

using Xamarin.Forms;
namespace CustomRenderer
{
public class MyButton : Button
{
}
}

Step 2: Now, create a custom renderer for the created MyButton class as shown in the following code example.

Xamarin.Forms.Platform.Android;
using Xamarin.Forms;
using CustomRenderer;
using CustomRenderer.Android;
using Android.Content;

[assembly: ExportRenderer(typeof(MyButton), typeof(MyButtonRenderer))]
namespace CustomRenderer.Android
{
class MyButtonRenderer : ButtonRenderer
{
public MyButtonRenderer(Context context) : base(context)
{
}

protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);

if (Control != null)
{
Control.SetBackgroundColor(global::Android.Graphics.Color.LightBlue);
}
}
}
}

Migrate the Xamarin.Forms custom renderer to a .NET MAUI project

Follow these steps to migrate the Xamarin.Forms custom renderer to a .NET MAUI project:

Step 1: Use the .NET upgrade assistant for .NET MAUI to migrate your Xamarin.Forms projects to .NET MAUI. You can also create a new .NET MAUI project. Here, we are going to create a new .NET MAUI project named MAUIProjectWithRenderer.

MAUI Project With Renderer

Step 2: Then, create the required class files to copy and paste the renderer code from the Xamarin.Forms project. Create them under the required platform-specific folders.

Refer to the following screenshot.

Renderer Files Added to the Platform-Specific Folders

Step 3: Now, copy and paste the code of the custom renderer from the Xamarin.Forms project to the newly created files.

Step 4: Next, remove all the Xamarin.Forms references and add the relevant .NET MAUI references in their places. For example:

Reference to be removed

using Xamarin.Forms.Platform.Android;
using Xamarin.Forms;

Reference to be added

using Microsoft.Maui.Controls;
using Microsoft.Maui.Controls.Platform;
using Microsoft.Maui.Controls.Compatibility.Platform.Android.AppCompat;

The code after performing these changes will appear as follows:

using Android.Content;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Controls.Platform;
using Microsoft.Maui.Controls.Compatibility.Platform.Android.AppCompat;
namespace CustomRenderer.Android
{
class MyButtonRenderer : ButtonRenderer
{
public MyButtonRenderer(Context context) : base(context)
{
}protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);if (Control != null)
{
Control.SetBackgroundColor(global::Android.Graphics.Color.LightBlue);
}
}
}
}

Step 5: Then, remove the ExportRenderer method. Since the assembly coupling and decoupling do not act like the traditional method, we have to register the renderer in the project’s StartUp file.

Exported renderer should be removed from the MyButtonRenderer class.

// [assembly: ExportRenderer(typeof(MyButton), typeof(MyButtonRenderer))]

appBuilder.ConfigureMauiHandlers(handlers => 
{ 
handlers.AddCompatibilityRenderer(typeof(MyButton), typeof(MyButtonRenderer)); });

Note: The previous steps are for the Android platform. You can follow a similar procedure for iOS and other platforms too.

Step 6: Now, we have successfully moved the customer renderer into the .NET MAUI project. Finally, create an instance for the control and then run it to check.

Refer to the following code example.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MAUIProjectWithRenderer.MainPage"
xmlns:button="clr-namespace:CustomRenderer"
BackgroundColor="{DynamicResource PageBackgroundColor}">
<Grid>
<button:MyButton Text="I AM A BUTTON CUSTOM RENDERER FROM MAUI"
VerticalOptions="Center"
HorizontalOptions="Center"
WidthRequest="300"
HeightRequest="50"/>
</Grid>
</ContentPage>

After executing these steps, we will get the final output as shown in the following screenshot.