如何在Blazor页面中同时显示XAML视图与Razor组件？

要在Blazor页面中同时展示Razor组件和XAML视图，必须基于**.NET MAUI Blazor**项目实现——这是唯一支持Blazor Web组件与原生XAML控件混合渲染的.NET框架。以下是具体步骤：

1. 封装XAML组件 #

将你提供的XAML代码包装为.NET MAUI的ContentView组件：

XAMLPage.xaml #

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppName.Components.XAMLPage">
    <StackLayout>
        <Label Text="Hello from XAMLPage"
               VerticalOptions="CenterAndExpand" 
               HorizontalOptions="CenterAndExpand" 
               FontSize="24"
               TextColor="Black"/>
    </StackLayout>
</ContentView>

XAMLPage.xaml.cs #

namespace YourAppName.Components;

public partial class XAMLPage : ContentView
{
    public XAMLPage()
    {
        InitializeComponent();
    }
}

2. 在Blazor页面中集成XAML组件 #

修改你的Home.razor页面，通过MAUI Blazor的原生互操作能力嵌入XAML视图：

@page "/my-blazor-page"
@using YourAppName.Components
@inject IJSRuntime JSRuntime

<h3>Hello from Blazor</h3>

<!-- 用于挂载XAML组件的容器 -->
<div @ref="xamlContainer"></div>

@code {
    private ElementReference xamlContainer;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 创建XAML组件实例并渲染到指定DOM元素
            var xamlPage = new XAMLPage();
            await JSRuntime.InvokeVoidAsync("renderNativeComponent", xamlContainer, xamlPage);
        }
    }
}

3. 添加JS互操作逻辑 #

在wwwroot/js目录下创建interop.js文件，添加原生组件渲染逻辑：

window.renderNativeComponent = async (element, component) => {
    await window.MauiBlazor.renderComponent(element, component);
};

然后在项目入口的HTML文件（如index.html）中引入该脚本：

<script src="js/interop.js"></script>

简洁替代方案（适用于新版.NET MAUI） #

如果使用的是较新版本的.NET MAUI，可直接使用内置的NativeComponent标签简化代码：

@page "/my-blazor-page"
@using YourAppName.Components

<h3>Hello from Blazor</h3>

<NativeComponent Type="typeof(XAMLPage)" />

注意事项 #

• 必须使用**.NET MAUI Blazor**项目，普通Blazor WebAssembly/Server项目无法直接渲染XAML控件。
• 替换代码中的YourAppName为你的实际项目命名空间。
• XAML组件遵循MAUI原生布局规则，与Blazor的CSS样式互不冲突，可分别调整。

内容的提问来源于stack exchange，提问作者ZCoder