How to Add a .NET MAUI Datagrid Control to an Uno Application

ComponentOne is Now Compatible with Uno Platform and .NET 9!

With the release of the ComponentOne 2024 v2 Maintenance Release #2, the ComponentOne MAUI controls (version 8.0.20242.1023) are now available and fully compatible with the Uno Platform for .NET 8 and .NET 9! This compatibility opens up new possibilities for developers looking to create powerful and versatile cross-platform mobile applications.

In this blog, we’ll cover the steps below to add a .NET MAUI FlexGrid control from ComponentOne to a new Uno Platform application:

1. Download Uno Platform
2. Create a New Uno Platform Application
3. Install the Latest ComponentOne Version
4. Setup ComponentOne FlexGrid for MAUI

Ready to Get Started? Download ComponentOne Today!

Download Uno Platform

To get started, you’ll need to download Uno Platform. You can do this either through the Visual Studio extension or directly from the Uno Platform website. The installation process is straightforward, allowing you to quickly integrate Uno Platform into your development environment.

Quick Start with Uno Platform

Create a New Uno Platform Application

Once you have Uno Platform installed, create a new Uno Platform application in Visual Studio by selecting the “Uno Platform App” project template. For this example, we will be using .NET 8.

Be sure to select the desired platforms and ensure that the .NET MAUI Embedding option is selected within the Extensions option. In this example, we will be unselecting the Web Assembly platform option.

Install the Latest ComponentOne Version

Next, you’ll need to install the 8.0.20242.1023 version (or newer) from the ComponentOne Control Panel or through NuGet. This build includes the latest updates for ComponentOne MAUI controls, allowing it to be compatible with Uno Platform and .NET 8 (or .NET 9).

Setup ComponentOne FlexGrid for MAUI

Follow the instructions to set up the ComponentOne MAUI controls in your application. We will focus on the ComponentOne MAUI FlexGrid control, which offers a robust and flexible grid solution for your data visualization needs. The setup process is detailed in the Quick Start guide available on the ComponentOne website, providing step-by-step instructions to get you up and running quickly.

Quick Start | MAUI | ComponentOne

1. Register the Control

.RegisterFlexGridControls()

2. Set the Content

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="UnoFlexGrid.MauiControls.EmbeddedControl"  
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"             
             HorizontalOptions="Fill"
             VerticalOptions="Fill"> 

<c1:FlexGrid x:Name="grid" AutoGenerateColumns="False">
    <c1:FlexGrid.Columns>
        <c1:GridColumn Binding="FirstName" />
        <c1:GridColumn Binding="LastName" />
        <c1:GridColumn Binding="City"/>
        <c1:GridColumn Binding="Country"/>
        <c1:GridColumn Binding="Active"/>
    </c1:FlexGrid.Columns>
</c1:FlexGrid>

3. Bind the Data

var data = Customer.GetCustomerList();
grid.ItemsSource = data;

public static List<Customer> GetCustomerList()
{
    {
        return new List<Customer>
        {
            new Customer { FirstName = "John", LastName = "Doe", City = "Redmond"},
            new Customer { FirstName = "Jane", LastName = "Doe", City = "Seattle"},
            new Customer { FirstName = "Sammy", LastName = "Doe", City = "Bellevue"},
            new Customer { FirstName = "John", LastName = "Smith", City = "London"},
            new Customer { FirstName = "Jane", LastName = "Smith", City = "Oxford"},
            new Customer { FirstName = "Sammy", LastName = "Smith", City = "Cambridge"},
            new Customer { FirstName = "John", LastName = "Brown", City = "Toronto"},
            new Customer { FirstName = "Jane", LastName = "Brown", City = "Vancouver"},
            new Customer { FirstName = "Sammy", LastName = "Brown", City = "Montreal"}
        };
    }
}

4. Build and Run

Ready to try it out? Download ComponentOne Today!

Conclusion

With these steps, you’ll be well on your way to creating powerful, cross-platform applications using the latest ComponentOne MAUI controls and the Uno Platform. Stay tuned for more updates and tutorials on how to make the most of these exciting tools!