MAUI

The .NET Multi-platform App UI (MAUI) framework allows creating cross-platform desktop and mobile applications. In this article you will find out how you can use Radzen Blazor Studio to speed up your MAUI development. Be sure to check the prerequisites and known limitations

Prerequisites

Radzen Blazor Studio provides design time support for .NET MAUI Blazor hybrid apps. First make sure you follow the getting started instructions from the official Microsoft documentation. You should be able to create and run a MAUI Blazor app from Visual Studio or command line first before trying it with Radzen Blazor Studio. This will ensure all mobile platform SDK (Android, iOS etc.) are correctly installed and configured.

Limitations

• You can open existing MAUI Blazor hybrid apps. Radzen Blazor Studio doesn’t currently allow you to create new MAUI apps. This is our MAUI roadmap.
• Adding a data source isn’t currently support (but is also a planned feature).
• Deployment (to a device or app store) is not available. You can deploy from Visual Studio or command line by following the Microsoft documentation.
• Debugging is also not available. You can debug your MAUI app from Visual Studio.

Tutorial

In this step-by-step tutorial you will create a new MAUI application from the command line, add the Radzen.Blazor components to it and use Radzen Blazor Studio to extend it.

Create the application

1. Open a command prompt (or terminal) window. Run dotnet new maui-blazor -o MyMauiBlazorApp. Alternatively create the MAUI Blazor application from Visual Studio.
2. Go to the MyMauiBlazorApp directory by running cd MyMauiBlazorApp.

Add Radzen.Blazor nuget package

1. Add the Radzen.Blazor nuget package by running dotnet add package Radzen.Blazor
2. Start Radzen Blazor Studio and open MyMauiBlazorApp.csproj. The design time build will take some time when you open the application for the first time. Proceed with the next steps.
3. Open wwwroot\index.html to add a theme and register the Radzen.Blazor javascript file.
   • Paste <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css" /> before <link rel="stylesheet" href="css/app.css" />.
   • Paste <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script> after <script src="_framework/blazor.webview.js" autostart="false"></script>.
   • Save index.html.
4. Open _Imports.cshtml and add @using Radzen and @using Radzen.Blazor. Save _Imports.cshtml.
5. Open Components\Layout\MainLayout.razor. Paste <RadzenComponents /> before <div class="page">. Save MainLayout.razor.
6. Open MauiProgram.cs. Add using Radzen;. Paste builder.Services.AddRadzenComponents(); after builder.Services.AddMauiBlazorWebView();. Save MauiProgram.cs.

Add RadzenButton component

1. Open Components\Pages\Home.razor. Switch to split design mode.
2. Paste @inject NotificationService NotificationService after @page "/".
3. Drag and drop a RadzenButton component from the toolbox. Check here for more info how to add components with Radzen Blazor Studio.
4. Handle its Click event. Check here for more info how to handle events in Radzen Blazor Studio.
5. Display a notification by adding a Notify statement. Set Severity to Success and Detail to "Hi from MAUI!".

Run the application

To run the application you can press the Run button in the top right corner. This will use the default target framework for your application (for Windows users is net8.0-windows10.0.19041.0). You can change the target framework from the Run dropdown. Be sure to use a framework which you have the required libraries and emulators installed for.

Android

To run the app on the Android emulator you have to specify the Android SDK location in the Radzen Blazor Studio settings (accessible from the button in the bottom left corner). On Windows it usually is C:\Program Files (x86)\Android\android-sdk.

iOS

To run the app on the iOS simulator you would need to be running Radzen Blazor Studio on macOS that has the simulator installed with a compatible device image.

Troubleshooting

If your MAUI application fails to build or display in design time make sure that it builds for the target framework from command line. To test that run dotnet build -f <framework> where <framework> is the desired target framework.

• Android dotnet build -f net8.0-android
• iOS - dotnet build -f net8.0-ios
• Windows dotnet build -f net8.0-windows10.0.19041.0 -p:WindowsPackageType=None

To run the MAUI application from command line build it first and then use

• Android dotnet build -t:Run -f net8.0-android
• iOS - dotnet build -t:Run -f net8.0-ios
• Windows dotnet build -t:Run -f net8.0-windows10.0.19041.0 -p:WindowsPackageType=None

If the command line build fails make sure you have all prerequisites installed correctly.

TIP: You can change the default target framework by updating the <TargetFrameworks>net8.0-android;net8.0-ios;net8.0-maccatalyst</TargetFrameworks> element in the .csproj file of your app. The first framework listed there is the default one. You can also remove unwanted frameworks by deleting them from TargetFrameworks.