How to use .Net MAUI controls in a razor component in .Net MAUI Blazor app

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.

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>

TL;DR You can get access to some native dialog controls from the Application class provided out of the box.

public async Task<bool> DisplayConfirm(string title, string message, string accept, string cancel)
{
    return await Application.Current.MainPage.DisplayAlert(title, message, accept, cancel);
}

So I was referred to this YouTube video that does exactly what I wanted to do. Have a look: https://www.youtube.com/watch?v=gTLEIe0SWpI

.NET MAUI apps are native on each mobile/desktop platform - they welcome Blazor/web content through modern WebViews. .NET MAUI native components can be mix & matched with Blazor content - essentially a BlazorWebView hosted inside a XAML page renders web content. Nothing stopping developers from rendering native UI through XAML mixed in with Blazor UI - there are .NET MAUI UI components that can help. One can also drive more of the app UI through Blazor and share code between web/native apps.

You can use the Native .NET MAUI controls inside XAML. Next to those, you can have a BlazorWebView control that hosts the Blazor part of your page.

You can use one of the approaches listed on https://stackoverflow.com/a/77440099/1114918 to communicate across the Blazor / XAML boundary.