Crafting Cross-Platform .NET MAUI Experiences with Blazor Hybrid & AI

In the rapidly evolving landscape of cross-platform development, .NET MAUI (Multi-platform App UI) has emerged as Microsoft's unified framework for building native mobile and desktop apps with C# and XAML. When combined with Blazor Hybrid and AI capabilities, it creates a powerful ecosystem for developing sophisticated, intelligent applications that run seamlessly across iOS, Android, macOS, and Windows.

This article explores how to leverage Blazor Hybrid within .NET MAUI applications and integrate AI features to create truly next-generation cross-platform experiences.

Understanding .NET MAUI and Blazor Hybrid

What is .NET MAUI?

.NET MAUI is Microsoft's evolution of Xamarin.Forms, providing a unified framework for building native mobile and desktop apps with a single codebase. MAUI allows developers to use C# and XAML to create applications that run natively on iOS, Android, macOS, and Windows. It offers native UI controls for each platform, ensuring high performance and a consistent user experience across devices. MAUI is now considered the standard for .NET cross-platform development, with significant improvements in .NET 8 and .NET 9 [[1]](https://www.avidclan.com/blog/blazor-hybrid-with-dot-net-maui-build-cross-platform-web-and-native-apps-in-2025/).

What is Blazor Hybrid?

Blazor Hybrid combines the best of both worlds:

Blazor: A framework for building interactive web UIs using C# and Razor syntax instead of JavaScript.
Native Platforms: The ability to run these web UIs within native applications.

In a Blazor Hybrid app, Blazor components run on .NET in the native application process (not WebAssembly), while the UI is rendered to an embedded WebView control. This approach allows developers to:

Reuse web UI components in native applications.
Access native platform features directly from C# code.
Share business logic across web and native platforms.
Leverage the rich Blazor component ecosystem.

This model enables a single C# codebase to target multiple platforms, reducing development time and cost while improving maintainability [[1]](https://www.avidclan.com/blog/blazor-hybrid-with-dot-net-maui-build-cross-platform-web-and-native-apps-in-2025/).

Setting Up a .NET MAUI Blazor Hybrid Project

To get started, ensure you have the latest .NET SDK (8 or higher) and Visual Studio 2025 with the MAUI workload installed.

Create a new .NET MAUI Blazor Hybrid application:

dotnet new maui-blazor -n MauiBlazorAI

This command scaffolds a project with the following structure:

MauiProgram.cs: The entry point for the application.
wwwroot/: Contains web assets like CSS, JavaScript, and images.
Pages/: Contains Blazor components.
Platforms/: Platform-specific code for iOS, Android, macOS, and Windows.

Understanding the Project Structure

The key components of a MAUI Blazor Hybrid application include:

BlazorWebView: A MAUI control that hosts Blazor content.
MauiApp: The application host that configures services and initializes the app.
Shared Razor Components: UI components that can be reused across platforms.

Example MainPage.xaml:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:b="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"
             xmlns:local="clr-namespace:MauiBlazorAI"
             x:Class="MauiBlazorAI.MainPage">

    <b:BlazorWebView HostPage="wwwroot/index.html">
        <b:BlazorWebView.RootComponents>
            <b:RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </b:BlazorWebView.RootComponents>
    </b:BlazorWebView>

</ContentPage>

Building Rich UIs with Blazor Components in MAUI

One of the key advantages of using Blazor Hybrid in MAUI is the ability to leverage the rich ecosystem of Blazor components and libraries.

Adding Blazor Component Libraries

Add a reference to a popular Blazor component library like MudBlazor:

dotnet add package MudBlazor

Configure the library in MauiProgram.cs:

using MudBlazor.Services;

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        });

    builder.Services.AddMauiBlazorWebView();
    builder.Services.AddMudServices();

    return builder.Build();
}

Creating a Rich Dashboard UI

Example dashboard page using MudBlazor components:

@page "/dashboard"
@using MudBlazor

<MudContainer MaxWidth="MaxWidth.Large" Class="mt-4">
    <MudText Typo="Typo.h3" Class="mb-4">Smart Home Dashboard</MudText>
    <MudGrid>
        <MudItem xs="12" sm="6" md="3">
            <MudPaper Elevation="2" Class="pa-4" Style="height: 150px;">
                <MudText Typo="Typo.h5">Temperature</MudText>
                <MudText Typo="Typo.h3">72°F</MudText>
                <MudText Typo="Typo.body2">Living Room</MudText>
            </MudPaper>
        </MudItem>
        
    </MudGrid>
    <MudDivider Class="my-6" />
    <MudText Typo="Typo.h4" Class="mb-4">Recent Activity</MudText>
    <MudList>
        <MudListItem>
            <MudText>Front door opened at 8:30 AM</MudText>
        </MudListItem>
        
    </MudList>
</MudContainer>

@code {
    private bool lightsOn = true;
}

Bridging Native and Web: Accessing Native Features from Blazor

Blazor Hybrid in MAUI allows direct access to native platform features from your Blazor components.

Creating a Native Service

Example service for device features:

public interface IDeviceService
{
    Task<string> GetDeviceInfo();
    Task<bool> TakePicture(string fileName);
    Task<GeoLocation> GetCurrentLocation();
}

public class DeviceService : IDeviceService
{
    // Implementation as in the original article
}

builder.Services.AddSingleton<IDeviceService, DeviceService>();

Use the service in a Blazor component:

@page "/device-features"
@inject IDeviceService DeviceService

<MudContainer>
    <MudText Typo="Typo.h3" Class="mb-4">Device Features</MudText>
    
</MudContainer>

@code {
    private string deviceInfo;
    private string photoPath;
    private GeoLocation location;
    // Methods for interacting with the service
}

Integrating AI Capabilities

You can integrate AI in two main ways:

1. On-device ML using ML.NET 2. Cloud-based AI using Azure Cognitive Services

On-Device Sentiment Analysis with ML.NET

Add the required packages:

dotnet add package Microsoft.ML
dotnet add package Microsoft.ML.FastTree

Create a sentiment analysis service and register it as shown in the original article.

Example Blazor page for sentiment analysis:

@page "/sentiment-analysis"
@inject SentimentAnalysisService SentimentService

<MudContainer>
    <MudText Typo="Typo.h3" Class="mb-4">Sentiment Analysis</MudText>
    
</MudContainer>

@code {
    private string userInput = "";
    private SentimentPrediction prediction;
    // AnalyzeSentiment method
}

Cloud-Based Image Analysis with Azure Cognitive Services

Add the required package:

dotnet add package Microsoft.Azure.CognitiveServices.Vision.ComputerVision

Create and register an image analysis service as in the original article.

Example Blazor page for image analysis:

@page "/image-analysis"
@inject ImageAnalysisService ImageService
@inject IDeviceService DeviceService

<MudContainer>
    <MudText Typo="Typo.h3" Class="mb-4">Image Analysis</MudText>
    
</MudContainer>

@code {
    private string imagePath;
    private ImageAnalysisResult analysisResult;
    // Methods for taking picture and analyzing image
}

Performance Optimization and Best Practices

To ensure your .NET MAUI Blazor Hybrid application runs smoothly across all platforms, consider these best practices:

Minimize JavaScript Interop

Excessive JS interop can impact performance. Use it sparingly and batch calls when possible.

Use Virtualization for Large Lists

Blazor's built-in virtualization renders only visible items, improving performance:

<Virtualize Items="@largeDataSet" Context="item">
    <MudListItem>
        <MudText>@item.Name</MudText>
    </MudListItem>
</Virtualize>

Implement Lazy Loading

Load components and data only when needed to reduce initial load time.

Use State Management Effectively

Implement proper state management to avoid unnecessary re-renders.

Optimize WebView Performance

Configure the WebView for optimal performance, enabling JavaScript interface only if needed.

Conclusion

.NET MAUI with Blazor Hybrid and AI capabilities represents a powerful combination for building sophisticated cross-platform applications. By leveraging Blazor's component model within native applications and integrating AI features, developers can create intelligent, responsive experiences that work seamlessly across multiple platforms.

The ability to write once and deploy everywhere, while still accessing native platform features and implementing advanced AI capabilities, makes this stack particularly compelling for modern application development. As the ecosystem continues to evolve, we can expect even more powerful tools and libraries to emerge, further enhancing the developer experience and enabling even more sophisticated applications.

References: