Getting Started with .NET MAUI Blazor Hybrid App

18 Jun 20263 minutes to read

This section explains how to create and run a .NET MAUI Blazor Hybrid application using the Blazor Spreadsheet Editor component.

Prerequisites

To use the .NET MAUI project templates, install the Mobile development with .NET workload for Visual Studio. For installation details, see the Microsoft documentation: Install .NET MAUI.

Create a new Blazor MAUI App in Visual Studio

Create a Blazor MAUI App using Visual Studio via Microsoft Templates.

Install Blazor Spreadsheet NuGet Packages

To add Syncfusion Blazor Spreadsheet component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install:

Alternatively, you can utilize the following package manager command to achieve the same.

Install-Package Syncfusion.Blazor.Spreadsheet -Version 34.1.29
Install-Package Syncfusion.Blazor.Themes -Version 34.1.29

Add import namespaces

After the packages are installed, open the ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.Spreadsheet namespaces.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Spreadsheet

Register Blazor Service

Register the Blazor Service in the ~/MauiProgram.cs file.

....
using Syncfusion.Blazor;

....

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        ....
        builder.Services.AddSyncfusionBlazor();
        ....
    }
}

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet in the <head> and the script at the end of the <body> in the ~wwwroot/index.html file as shown below:

<head>
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

<body>
    ....
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

NOTE

Check out the Blazor Themes topic to explore supported ways (such as static assets, CDN, and CRG) to apply themes in your Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in your Blazor application.

Add Blazor Spreadsheet component

Add the Blazor Spreadsheet component in any Razor file. In this example, the Spreadsheet component is added to the ~/Home.razor page under the ~/Components/Pages folder.

@page "/"
@using Syncfusion.Blazor.Spreadsheet

<SfSpreadsheet>
    <SpreadsheetRibbon></SpreadsheetRibbon>
</SfSpreadsheet>

Run on Windows

In the Visual Studio toolbar, click the Windows Machine to build and run the app. Ensure the run profile is set to Windows Machine before starting the app.

Maui Tool

After the application launches, the output will appear as shown below:

Blazor Spreadsheet

Run on Android

To run the Spreadsheet on Android using the Android emulator, follow these steps:

Refer here to install and launch Android emulator.

NOTE

If any errors occur while using the Android Emulator, see Troubleshooting Android Emulator.

Blazor Spreadsheet running in the Android emulator

To learn how to open workbooks, bind data, or save files in the Spreadsheet component, see Open and Save.

NOTE

View Sample In GitHub.. Looking for the full Blazor Spreadsheet Editor component overview, features, pricing, and documentation? Visit the Blazor Spreadsheet Editor page

See Also