Embedding ComponentOne MAUI Controls in Uno Platform Applications

September 13 2023

Earlier this month, Uno Platform announced support for 3rd party UI controls, including GrapeCity’s ComponentOne controls. We’re excited to officially share that you can now use ComponentOne MAUI controls in an Uno application version 4.10 and .NET 7+. Continue reading for more details.

About Uno Platform

The Uno Platform is a .NET productivity platform for creating desktop, web, and mobile applications. Not only can Uno be targeted as a replacement for MAUI (which supports native Android, iOS, macOS, and WinUI), but Uno can target additional modules for WebAssembly, WPF, Linux, and more, all with a single code base.

Uno enables you to build virtually the same, beautiful application across many platforms - complete with an optional server project, Material or Fluent themes, and an MVVM or MVUX template to get coding quickly.

We wrote a more detailed article about Uno a while back that still holds up today. You can read it here - What's the Difference Between MAUI and Uno, and What Do They Mean for .NET Developers?

Regarding the UI, Uno’s toolbox is aligned with the latest .NET WinUI controls and supports the complete toolset for every supported platform. This is where 3rd party libraries, like ComponentOne, come into play as you inevitably need to expand upon the base control kit.

Using ComponentOne Controls in Uno

The latest version of the Uno Platform supports the ability to add ComponentOne MAUI controls among other 3rd party libraries. You can get started with Uno and ComponentOne controls with the official Uno resources below:

Alternatively, you can follow these visual steps once you have configured Visual Studio for Uno development.

1. Create a new Uno Platform App project in Visual Studio.

Create an New Uno Platform project

2. Name your project and click Create.

3. In the Uno Platform Project Template Wizard, choose to Customize the Default app.

Uno Customize App

4. On the Framework page, select .NET 7.

5. On the Platforms page, select ONLY Android, iOS, macOS, and Windows. Currently, MAUI Embedding only works for an Uno Application with this target set.

6. On the Features page, select MAUI Embedding.

Uno MAUI Embedding

7. Click Create.

8. After completing the project setup, add a reference to the ComponentOne MAUI NuGet packages to the *.MauiControls project.

If you want to use the FlexGrid, add a reference to C1.MAUI.Grid. If you want to use the Calendar, add a reference to C1.MAUI.Calendar.

9. In the AppBuilderExtensions class, update the UseMauiControls extension method to call either, or both, the RegisterFlexGridControls or RegisterCalendarControls methods.

using C1.Maui.Grid;
using C1.Maui.Calendar;

namespace MauiEmbeddingApp;

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

These instructions may change with future updates, so always check the Uno Platform documentation if you get stuck.

Working with FlexGrid in Uno Platform

Once you’ve added the ComponentOne control libraries to your Uno application, you are ready to work with the control. The control’s API and behavior work the exact same as in MAUI. The benefits of using FlexGrid over a simple datagrid control include the following:

High performance for large data sets - FlexGrid is designed to aid large data sets with features like grouping, aggregation, paging, and on-demand scrolling with virtual mode
Easily customize and format cells - One of the main strengths of FlexGrid is its flexibility to customize every aspect of the appearance of the entire grid and individual cells
Familiar and easy-to-use API - The same .NET datagrid that thousands of developers have used for decades has been developed natively for MAUI, thus Uno Platform MAUI embedding, along with other versions, including WPF, WinUI, and Blazor

Uno MAUI