Phinter Atieno for Syncfusion, Inc.

Posted on Sep 15 • Originally published at syncfusion.com on Sep 11

Build Fast, Beautiful Apps with .NET MAUI Blazor Hybrid

#maui #netdevelopment #blazor #desktopdevelopment

TL;DR: Have you ever wanted to build a desktop app that delivers a truly native experience, while still using your favorite web development tools? With .NET MAUI Blazor Hybrid, you get the best of both worlds: native performance and web flexibility, all in one powerful framework. This guide shows you how to integrate rich UI components like RichTextEditor and AutoComplete, giving your app a polished, modern look without sacrificing performance. It is perfect for developers diving into Blazor Hybrid App Development with real-world UI needs.

In the app development world, the combination of .NET MAUI (Multi-platform App UI) and Blazor Hybrid is a game-changer. By merging native performance with the flexibility of web technologies, this powerful duo enables developers to build efficient, cross-platform applications with ease.

With .NET MAUI Blazor Hybrid, you can build cross-platform desktop apps that combine the best of both worlds. In this guide, we’ll walk through setting up a hybrid app and enhancing it with rich UI components.

Blazor Hybrid and MAUI: Key benefits

Choosing Blazor Hybrid with MAUI offers significant benefits, including:

Unified development experience: Develop your entire app in C#, promoting consistency across the entire development process.
Efficient performance: Native optimizations ensure that your apps run smoothly.
Rich ecosystem and community support: Benefit from the strong ecosystems of both the .NET and JavaScript communities.
Future-proofing applications: As technology evolves, Blazor Hybrid + MAUI’s flexibility ensures that your applications are adaptable to future devices and platforms.
Scalability: Scale your apps as needed without making major codebase changes.

In this blog, we’ll see how to integrate the Blazor Rich Text Editor and MAUI AutoComplete to create a simple email UI in a Blazor Hybrid app. Let’s dive into the steps to create a MAUI Blazor Hybris app.

Step 1: Create a Blazor Hybrid app

Follow these steps to create your first Blazor Hybrid app with .NET MAUI.

OpenVisual Studio and click Create a new project.
In the project templates list, select .NET MAUI Blazor Hybrid App.
Enter a name for your project. Choose a folder location where the project files will be saved.
Confirm your project setup. Choose the appropriate .NET framework version, either.NET 8.0 or .NET 9.0, depending on your target framework requirements.

Step 2: Add a Blazor RichTextEditor

In the NuGet Package Manager, search for Syncfusion.Blazor.RichTextEditor and install it.

Step 3: Registering Syncfusion Blazor service

Add the Syncfusion namespace: Open your project’s Imports.razor. Add the Syncfusion.Blazor namespace to ensure your application knows where to find the components: Imports.razor

@using Syncfusion.Blazor

2.Register the Syncfusion Service: Open the MauiProgram.cs file. Register the Syncfusion service so it integrates with your MAUI and Blazor app:

MauiProgram.cs

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

Step 4: Adding stylesheet and script references

To ensure that your RichTextEditor component renders correctly, it’s crucial to add the necessary style sheet and script references to your project. Here’s how you can do this using Static Web Assets in the < head> section of your wwwroot/index.html file:

index.html

<head>
    . . .
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript" />
    . . .
</head>

Note: Check out the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing 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.

Step 5: Integrating the Rich Text Editor

To integrate the Rich Text Editor component into your application, you can embed it within any Razor file, such as Home.razor. Here’s how you can do it:

Add the Syncfusion Namespace to your Razor file: First, ensure your Razor file includes the Syncfusion. Blazor.RichTextEditor namespace. This is essential for using the Rich Text Editor component.
Embed the Rich Text Editor Component: Within the Razor file, you can now add the RichTextEditor component to facilitate rich text input. Here is a simple example:

Home.razor

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <p>Rich Text Editor allows you to insert images from an online source and a local computer where you want to insert the image in your content.</p>
    <p><b>Get started Quick Toolbar to click on the image</b></p>
    <p>It is possible to add a custom style to the selected image inside the Rich Text Editor through the quick toolbar.</p>
    ...
</SfRichTextEditor>

Step 6: Launch the application

To launch the Rich Text Editor component, build and run the project.

Blazor Rich Text Editor component

If you want the Rich Text Editor to display alone on your output screen, you must modify your MainLayout.razor file. Simply remove any sidebar and top row elements that are currently there. This will ensure that the Rich Text Editor takes up the whole display area, providing a focused user experience as shown in the below code example.

@inherits LayoutComponentBase

<div class="page">
    @* <div class="sidebar">
        <NavMenu />
    </div> *@

    <main>
        @* <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div> *@

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

Combining Blazor and MAUI Components:

To create a basic email UI using MAUI’s AutoComplete alongside the Blazor RichTextEditor, you’ll need to follow these steps:

Install the NuGet package: Begin by installing the Syncfusion.Maui.Inputs NuGet package. This package is necessary to utilize MAUI’s AutoComplete feature as part of your email user interface.
Register the Handler: You must register the handler for the Syncfusion Maui core within your cs file. This is essential for setting up the components correctly. MauiProgram.cs

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

3.Implement MAUI AutoComplete in MainPage.Xaml: You will use the MAUI AutoComplete component to manage inputs for fields like To, Cc, Bcc, and Subject.
4.Use the Blazor RichTextEditor: For the email body, use the Blazor RichTextEditor component, which you can integrate into your Blazor WebView element.

Here’s an example of setting this up in MainPage.xaml.

<ContentPage 
    ...
    xmlns:inputs="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
             x:Class="BlazorMauiHybridApp.MainPage">

    <Grid RowDefinitions="50,50,50,50,50,Auto">

        <Grid ColumnDefinitions="Auto,*,Auto" Background="Navy" Grid.Row="0">
            <Label Text="Email-Compose" TextColor="White" FontAttributes="Bold" HorizontalOptions="Start" VerticalOptions="Center" Margin="5"/>
            <HorizontalStackLayout Grid.Column="2" HorizontalOptions="End" VerticalOptions="Center">
                <Label Text="ATTACH" TextColor="White" FontAttributes="Bold" Margin="5"/>
                <Label Text="SEND" TextColor="White" FontAttributes="Bold" Margin="5"/>
            </HorizontalStackLayout>
        </Grid>

        <Grid ColumnDefinitions="40, *" Grid.Row="1">
            <Label Text="To" TextColor="Gray" Margin="5" VerticalOptions="Center"/>
            <inputs:SfAutocomplete Grid.Column="1" Margin="5" VerticalOptions="Center"/>
        </Grid>

        <Grid ColumnDefinitions="40, *" Grid.Row="2">
            <Label Text="Cc" TextColor="Gray" Margin="5" VerticalOptions="Center"/>
            <inputs:SfAutocomplete Grid.Column="1" Margin="5" VerticalOptions="Center"/>
        </Grid>

        <Grid ColumnDefinitions="40, *" Grid.Row="3">
            <Label Text="Bcc" TextColor="Gray" Margin="5" VerticalOptions="Center"/>
            <inputs:SfAutocomplete Grid.Column="1" Margin="5" VerticalOptions="Center"/>
        </Grid>

        <inputs:SfAutocomplete Grid.Row="4" Placeholder="Subject" Margin="5" VerticalOptions="Center"/>

        <BlazorWebView x:Name="blazorWebView" Grid.Row="5" HeightRequest="300" HostPage="wwwroot/index.html">
            <BlazorWebView.RootComponents>
                <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
            </BlazorWebView.RootComponents>
        </BlazorWebView>

    </Grid>

</ContentPage>

Basic email UI using MAUI AutoComplete and Blazor Rich Text Editor

GitHub reference

You can download the working example from the GitHub repo.

Conclusion

Thanks for reading! MAUI Blazor Hybrid offers a powerful way to build modern desktop apps using familiar web technologies. By integrating rich UI components and leveraging Blazor WebView, developers can deliver seamless experiences across platforms. Try it out and explore how hybrid development can accelerate your next project.

The latest version of Essential Studio^®, along with the newly modular SDKs for the PDF Viewer, Word Editor, and Spreadsheet Editor, is now available on the license and downloads page. We offer our new users a 30-day free trial to explore all our components’ features and capabilities.

If you need further assistance, contact us via our support forum, support portal, or feedback portal. We’re always here to help you!

Related Blogs

This article was originally published at Syncfusion.com.

DEV Community