如何在Maui Blazor应用中使用CommunityToolkit.Maui DrawingView

因为DrawingView是原生MAUI控件，无法直接在Blazor Razor页面中像普通HTML元素一样使用，需要通过原生组件包装器来在Blazor中托管它，以下是具体实现步骤：

1. 确认依赖初始化 #

确保你的项目已安装CommunityToolkit.Maui 2.0版本，并且在MauiProgram.cs中完成Toolkit初始化：

builder.UseMauiApp<App>().UseMauiCommunityToolkit();

2. 创建DrawingView的Razor包装组件 #

新建一个Razor组件（比如命名为DrawingViewWrapper.razor），用来托管原生DrawingView控件：

@using CommunityToolkit.Maui.Views
@using Microsoft.AspNetCore.Components.WebView.Maui
@using Microsoft.Maui.Graphics

<NativeComponent>
    <DrawingView 
        BackgroundColor="LightGray"
        WidthRequest="200"
        HeightRequest="200"
        IsMultiLineModeEnabled="true"
        LineColor="@LineColor"
        LineWidth="@LineWidth"
        HorizontalOptions="Center"
        @ref="_drawingView" />
</NativeComponent>

@code {
    private DrawingView _drawingView;

    // 暴露可配置参数给父页面
    [Parameter]
    public Color LineColor { get; set; } = Colors.Red;

    [Parameter]
    public float LineWidth { get; set; } = 1;

    // 暴露交互方法，比如导出绘制内容
    public async Task<byte[]> ExportDrawingAsPng()
    {
        if (_drawingView?.Drawing == null)
            return Array.Empty<byte>();
        
        var drawingImage = await _drawingView.Drawing.AsImageAsync();
        using var stream = new MemoryStream();
        await drawingImage.SaveAsync(stream, ImageFormat.Png);
        return stream.ToArray();
    }
}

3. 在Blazor页面中使用包装组件 #

在你的Razor页面（比如Index.razor）中直接引用这个包装组件即可：

@page "/"

<h3>Maui Blazor DrawingView 演示</h3>

<DrawingViewWrapper 
    @ref="drawingWrapper"
    LineColor="Colors.Blue"
    LineWidth="2" />

<button @onclick="ExportDrawing">导出绘制内容</button>

@code {
    private DrawingViewWrapper drawingWrapper;

    private async Task ExportDrawing()
    {
        var pngBytes = await drawingWrapper.ExportDrawingAsPng();
        // 此处可根据需求处理导出的字节数据，比如保存到本地
        Console.WriteLine($"导出图像大小：{pngBytes.Length} 字节");
    }
}

关键说明 #

• NativeComponent是Maui Blazor提供的特殊标签，用来包裹原生MAUI控件，是连接Blazor和原生控件的核心桥梁。
• 通过@ref可以获取原生DrawingView实例，进而调用其API（比如清除画布、获取绘制路径等）。
• 如果需要绑定原生控件的事件（如DrawingLineCompleted），可在包装组件中通过代码订阅事件，或使用@on{EventName}语法绑定处理方法。

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