How can I display both a XAML view and a Razor component within a Blazor page?

Question

I have a Blazor page (Home.razor) where I want to display a heading from the Razor component and also include a XAML view that displays a message, such as "Hello from XAML". How can I achieve this integration so that both the Razor and XAML content are rendered together on the same page?

Home Razor page

@page "/my-blazor-page"

<h3>Hello from Blazor</h3>
<XAMLPage>

XAMLPage

<StackLayout>
    <Label Text="Hello from XAMLPage"
           VerticalOptions="CenterAndExpand" 
           HorizontalOptions="CenterAndExpand" 
           FontSize="24"
           TextColor="Black"/>
</StackLayout>

Answer 1

You can't add XAML components in a Razor page as that is all HTML and CSS. However, you can do the opposite through a BlazorWebView. Then you can add a Blazor component and mix that with other .NET MAUI controls.

You can also mix .NET MAUI XAML pages together with your Razor pages in the form of a popup, bottom sheet or just navigate there as a full page.

I go over this in more detail in this video.