DEV Community

Cover image for How to Add a .NET MAUI Datagrid Control to an Uno Application
MESCIUS inc. profile image Chelsea Devereaux
Chelsea Devereaux for MESCIUS inc.

Posted on • Edited on • Originally published at developer.mescius.com

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

#webdev #devops #dotnet #tutorial

What You Will Need

  • ComponentOne WinUI & MAUI Edition
  • Uno
  • Visual Studio 2022

Controls Referenced

Tutorial Concept
Learn how to add a .NET MAUI Datagrid control to an Uno application.

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

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+! 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

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

Download Uno

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.

New Uno Platform

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.

Uno FlexGrid

Uno FlexGrid_2

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!

Install

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()
Enter fullscreen mode Exit fullscreen mode

Register the Control

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">
Enter fullscreen mode Exit fullscreen mode 
    <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>
Enter fullscreen mode Exit fullscreen mode

Set the Content

3.Bind the Data

    var data = Customer.GetCustomerList();
    grid.ItemsSource = data;
Enter fullscreen mode Exit fullscreen mode

Bind 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"}
            };
        }
    }
Enter fullscreen mode Exit fullscreen mode

4.Build and Run

Build and Run

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!

Top comments (0)