Build together, debug together. Join the community on Discord.→

Using Maui Community Toolkit in Uno Platform via .NET MAUI Embedding

Uno Platform
September 13, 2023

The MAUI Community Toolkit is a valuable resource for developers building with .NET MAUI, offering a collection of Animations, Behaviors, Converters, and Custom Views. Now, thanks to the power of .NET MAUI Embedding, these controls are available to use within an Uno Platform iOS, Android, macOS, and Windows application.

Let’s dive deeper into how this integration works and the benefits it brings to Uno Platform developers.

Did you know that you can access the code sample for this tutorial in Uno.Samples? It's a great resource for getting hands-on experience with the concepts we're discussing. Give it a try and see how you can apply what you've learned so far!

Understanding .NET MAUI Embedding

To integrate .NET MAUI controls into an Uno Platform application, you’ll need two main components: the .NET MAUI class library and the MauiHost control.

The MauiHost control, which is a part of the Uno.Extensions.Maui.WinUI package serves as a crucial element in this integration process. It is incorporated into any Uno page or control to enable the embedding of a .NET MAUI control within it. The key to specifying which type of .NET MAUI control will be added as a child to the MauiHost control lies in the Source property of the MauiHost.

When you add a .NET MAUI control as a child to the MauiHost, it automatically inherits the data context of the MauiHost control. In simpler terms, the DataContext property on the MauiHost is effectively linked or synchronized with the BindingContext of the .NET MAUI control, ensuring seamless data communication between the two.

Building Your First Uno Platform App with .NET MAUI Embedding

The integration of .NET MAUI Embedding in the Uno Platform gives developers an exciting opportunity to leverage the .NET MAUI Community Toolkit’s rich library of controls in their Uno Platform applications. If you’re curious to start building with this newfound compatibility, here’s a step-by-step guide to get you started.

Step 1: Create a New Application

If your new to Uno Platform, you can start by following our Get Started tutorial to make sure you meet all prerequisites, finalize your environment and install the correct solution templates.

To get started, open your terminal and create a new application using the unoapp template with .NET MAUI Embedding enabled. We’ll use the Blank template for this example:

				
					dotnet new unoapp -preset blank -maui -o MauiEmbeddingApp

This command creates a new project named MauiEmbeddingApp with the Blank template and .NET MAUI Embedding support.

Step 2: Add CommunityToolkit.Maui NuGet Package

The next step is to add a reference to the CommunityToolkit.Maui NuGet package to the MauiEmbeddingApp.MauiControls project. This package provides a set of useful controls and utilities for your .NET MAUI application.

Step 3: Update the AppBuilderExtensions Class

In the MauiEmbeddingApp.MauiControls project, locate the AppBuilderExtensions class. This class is responsible for configuring your application. We need to update it to make use of the CommunityToolkit.Maui package.

Here’s what the updated AppBuilderExtensions class should look like:

				
					using CommunityToolkit.Maui;

namespace MauiEmbeddingApp
{
    public static class AppBuilderExtensions
    {
        public static MauiAppBuilder UseMauiControls(this MauiAppBuilder builder) 
        {
            return builder
                .UseMauiCommunityToolkit()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("MauiEmbeddingApp/Assets/Fonts/OpenSansRegular.ttf", "OpenSansRegular");
                    fonts.AddFont("MauiEmbeddingApp/Assets/Fonts/OpenSansSemibold.ttf", "OpenSansSemibold");
                });
        }
    }
}

With this updated class, you are now ready to take advantage of the MAUI Community Toolkit in your Uno Platform apps, which provides a wide range of controls to further enhance your application’s functionality and appearance.

For more detailed instructions and an example of how to add the DrawingView control, please refer to our documentation.

Next Steps

To upgrade to the latest release of Uno Platform, please update your packages to 4.10 via your Visual Studio NuGet package manager! If you are new to Uno Platform, following our official getting started guide is the best way to get started. (5 min to complete)