👁 Image
Soenneker.Maui.Blazor.Bridge 4.0.633

👁 alternate text is missing from this package README image
Soenneker.Maui.Blazor.Bridge

👁 alternate text is missing from this package README image
👁 alternate text is missing from this package README image
👁 alternate text is missing from this package README image
👁 alternate text is missing from this package README image

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.