Telerik UI for .NET MAUI in Uno Platform Mobile Apps

If you’re developing mobile apps with .NET MAUI, you may already be familiar with the Progress Telerik UI for .NET MAUI library of controls and how it is an excellent resource for creating apps quickly. Now that productivity extends to Uno Platform.

With Uno Platform releasing their .NET MAUI Embedding feature, you can easily access and use Progress Telerik controls to enhance your Uno Platform iOS, Android and Windows applications.

This blog post will explain how to integrate Telerik UI controls into your .NET MAUI projects and how it can accelerate your development, and provide one more option for migration of older Xamarin Forms apps to .NET, in addition to .NET MAUI itself, of course.

Progress Telerik offers more than 60 controls for .NET MAUI development, and this sample shared at the Uno Platform GitHub repository uses the following components:

1. Accordion: This control is highly interactive, allowing you to expand and collapse various sections of your application. This helps to better manage the application’s interface and make it more user-friendly.
2. Badge View: This control is beneficial when working with tabs or lists. It offers an efficient way to manage and display a large amount of data.
3. Calendar: The .NET MAUI Calendar is an input control that allows single or multiple date selection and displaying dates in different views.
4. DataGrid: A common tool in line-of-business applications, the Data Grid control is very popular. It even re-renders in landscape mode for better visibility. The Telerik controls can work with bindings between Uno Platform and .NET MAUI.
5. Charts: The library offers a variety of charts, including some more suited to enterprise needs.
6. PDF Viewer: A highly requested feature in mobile application development, Telerik’s PDF Viewer control has zoom capabilities and allows for document resizing.
7. Gauge Control: Particularly useful when displaying values for IoT applications, this control animates random numbers to demonstrate its capabilities.

Getting Started Building Telerik UI into Your Uno Platform Mobile Application

There are two distinct approaches for getting started: the more visual wizard approach or the command line. We’ll break down each method step by step, making it easy for you to get started with .NET MAUI Embedding and integrating Telerik UI controls into your Uno Platform application.

Approach 1: Uno Platform Template Wizard for Visual Studio

1. Start with Visual Studio:

• Open Visual Studio and select the Blank or Default template for your Uno Platform application.
• Click the “Customize” button because the .NET MAUI Embedding feature is not included by default in predefined configurations.

2. Choose the Startup Platforms:

• .NET MAUI Embedding is only compatible with iOS, Android, MacCatalyst and Windows platforms.
• In the “Platforms” section, ensure that only these platforms are selected to enable the .NET MAUI Embedding feature.

3. Select .NET MAUI Embedding as a Feature:

• In the “Features” section, check the box for “.NET MAUI Embedding” before proceeding.

4. Create Your Application:

• With the configurations in place, click the “Create” button.

Approach 2: Command Line

1. Create a New Uno Platform Application:

• To begin, open your command line interface and create a new Uno Platform application using the unoapp template.
• We recommend starting with the Blank template (-preset blank) and adding .NET MAUI Embedding support (-maui) to your project.
• Execute the following command:

dotnet new unoapp -preset blank -maui -o MauiEmbeddingApp

2. Add Telerik UI Package:

• To integrate Telerik UI controls, first add a reference to the Telerik.UI.for.Maui NuGet package. You can always check the documentation on how to get started with the NuGet.
• Make sure to add this reference specifically to the MauiEmbeddingApp.MauiControls project.

3. Update AppBuilderExtensions:

• Within the MauiEmbeddingApp.MauiControls project, locate the AppBuilderExtensions class.
• Modify the UseMauiControls extension method to include the UseTelerik method. (This enables the seamless integration of Telerik.UI controls into your application.)

Additional Consideration:

In both approaches, you’ll find a .NET MAUI class library (e.g., SimpleMauiApp.MauiControls) alongside the typical Uno Platform application structure.

Within the MauiControls class library, you can:

• Add references to third-party .NET MAUI control libraries.
• Incorporate services or execute registration/initialization methods for third-party libraries.
• Define the .NET MAUI controls you want to display within your application.

There you have it, two distinct paths to kick-start your Uno Platform mobile application with .NET MAUI Embedding. Whether you prefer the command line’s precision or Visual Studio’s wizardry, you’re now equipped to embark on your development journey.

For more information on using Telerik’s controls in an Uno Platform application via .NET MAUI Embedding, please visit the documentation here.

A Few Things to Note

• This blog covers the case in which developers can use Telerik .NET MAUI controls to create apps only for platforms that .NET MAUI reaches. This approach cannot be used to reuse the same controls across other target platforms that .NET MAUI does not run, such as Web/WebAssemby or Linux.
• The .NET Embedding feature is enabled by the open-source Uno Platform and not Progress Telerik. Therefore, it is a feature that this OSS project enables and unlocks for .NET MAUI users, and it is currently not an officially supported platform by Progress Telerik.

Happy coding!