How to use .Net MAUI controls in a .Net Blazor MAUI app-CodePudding

I am new to .Net MAUI but fairly experienced with Blazor. I am starting this new project and I'm intending to get the benefits of MAUI.

My issue is, I'd like to use some native controls from MAUI, an example is the Bottom Sheet, but I don't know how to use these controls in Blazor.

Is there a way to use MAUI's controls in the .Net Blazor MAUI app?

CodePudding user response：

You can´t use MAUI components (xaml) inside the blazor pages. BUT, if needed, you can have a XAML view mixing the blazorwebview with other MAUI elements. I do that to read QR codes: I have in the Main view a Fragment that have a MAUI QR reader, that I make visible only when a button in the Blazor page is pressed, I even place that MAUI Fragment overlaying the Blazor view.

Something else you should know is that you can communicate from MAUI to Blazor, and vice versa, by using a common object injected with the DI facilities. This object would have Methods and Events to allow this communication.

CodePudding user response：

You can use the MAUI components in xaml pages. Then you can embed BlazorWebView controls as needed.

here is the MainPage.xaml with the embedded BlazorWebView:

<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:MauiBlazorApp"
             x:Class="MauiBlazorApp.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

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

</ContentPage>