Syncfusion AI Assistant

How can I help you?

Getting Started with .NET MAUI Blazor Hybrid App

27 May 20263 minutes to read

This section explains how to create and run a .NET MAUI Blazor Hybrid application using the Syncfusion® Blazor Spreadsheet 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 Syncfusion® 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 33.2.3
Install-Package Syncfusion.Blazor.Themes -Version 33.2.3

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 Syncfusion® Blazor Service

Register the Syncfusion® 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 Syncfusion® Blazor Spreadsheet component

Add the Syncfusion® 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..

See Also