Soenneker.Maui.Blazor.Bridge 4.0.585

Soenneker.Maui.Blazor.Bridge

Effortlessly integrate MAUI components within BlazorWebView, enabling seamless interaction between Blazor and native MAUI UI elements.

Features

• Embed MAUI components directly inside BlazorWebView like HTML elements.
• Maintain a structured overlay system for native elements.
• Provides typed and generic bridges for flexible component integration.

Installation

Install the package via NuGet:

dotnet add package Soenneker.Maui.Blazor.Bridge

Register the interop in CreateMauiApp:

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder.Services.AddMauiBlazorBridgeAsScoped();
}

Layout Setup

To integrate MAUI components within BlazorWebView, modify your MainPage.xaml.
Wrap the BlazorWebView inside a Grid, and include an AbsoluteLayout (OverlayContainer) to host native elements:

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

    
    <AbsoluteLayout x:Name="OverlayContainer" BackgroundColor="Transparent" InputTransparent="True" />
</Grid>

This setup ensures that MAUI-native elements overlay correctly within your BlazorWebView.

Usage

To bridge MAUI elements into Blazor, use either:

• MauiBlazorTypedBridge<T> (Typed binding)
• MauiBlazorGenericBridge (Generic binding)

Example: Embedding a MauiLabel in Blazor

@page "/"

@implements IAsyncDisposable

<MauiBlazorTypedBridge @ref="_bridge" TComponent="MauiLabel" Component="_label"></MauiBlazorTypedBridge>

@code {
    MauiLabel? _label;
    MauiBlazorTypedBridge<MauiLabel>? _bridge;

    protected override void OnInitialized()
    {
        _label = new MauiLabel 
        { 
            Text = "This is a MAUI Label", 
            BackgroundColor = Colors.Transparent, 
            TextColor = Colors.Black 
        };
    }

    public async ValueTask DisposeAsync()
    {
        if (_bridge != null)
            await _bridge.DisposeAsync();
    }
}

This example adds a MauiLabel component inside a Blazor page, allowing it to function within the BlazorWebView.