Embedding .NET MAUI pages into your .NET Android/iOS application

.NET MAUI is now officially released and a lot of people are probably considering migrating their Xamarin apps. In our case, we have two separate Xamarin.Android and Xamarin.iOS apps, which heavily rely on embedding Xamarin.Forms views into them. For us to migrate, we would first have to migrate the apps themselves to .NET 6, convert the Xamarin.Forms pages to MAUI pages and then embed those. This probably won’t happen right away, but I wanted to share how the embedding works with MAUI/.NET 6 compared to Xamarin.

I’ve provided a GitHub sample at the bottom where I’ve performed the following steps. Note that this code is for demonstration purposes only and might not follow best practices.

UseMaui

We’ll start by following this guide. Note that when you add the UseMaui attribute, the implicit usings for the iOS and Android projects seem to stop working. You’ll have to explicitly add the using statements in each project after this.

There are some minor syntax differences from the mentioned guide. The correct syntax for the MauiAppBuilder is UseMauiEmbedding<TApp>() where TApp is the MAUI Application under the Maui.Controls namespace:

builder.UseMauiEmbedding<Microsoft.Maui.Controls.Application>();

ToPlatform()

When embedding pages in Xamarin, you could convert the page to a UIViewController for iOS or a Fragment/SupportFragment for Android. With MAUI, you can use the shared method ToPlatform(), which returns a UIView on iOS and a View on Android.

var myMauiPage = new MainPage();
var view = myMauiPage.ToPlatform(MauiContext);

You can also return a UIViewController for iOS:

var mauiCtrl = myMauiPage.ToUIViewController(MauiContext);

For Android you can explicitly return a View by using ToContainerView(), although ToPlatform() does exactly that so I’m not sure what exactly the difference is between these two methods.

Here be dragons

There still seems to be some bugs related to embedding so make sure to do some testing before you jump all in on this. For example, the Button control doesn’t work when embedded on Android. I’ve filed a bug on GitHub and hope that this gets resolved. It also seems that the Checkbox control doesn’t get rendered either on any platform.

Final thoughts

I’m glad to see that embedding is still prioritized going forward with MAUI. For those who are still “stuck” on Xamarin.Android/iOS (or now, .NET for Android/iOS), this is great for enabling cross platform views and functionality without having to invest in a full rewrite. I will surely be checking out how much work it will be to port our app over to .NET 6 and use this.

The team seems to already have planned improvements for the embedding experience. I hope this includes a way of easily retrieving the current MauiContext, since you probably want to use embedding outside of your MainActivity/AppDelegate.

As mentioned, here’s the sample on GitHub using embedding on both Android and iOS. Hope this was helpful!