如何交互 BlazorWebView 和 Windows 窗体

Question

我想将数据从 Windows 窗体发送到 BlazorWebView 并接收从 Web 视图返回到窗体的通知。这个怎么做？在 .Net6 Windows 窗体应用程序中。

BlazorWebView blazorApp = new BlazorWebView()
{
    Dock = DockStyle.Fill,
    HostPage = "wwwroot/index.html",
    Services = serviceProvider                   
};

blazorApp.RootComponents.Add<App>("#app");

var form1 = new Form1();
form1.Controls.Add(blazorApp);
Application.Run(form1);

Answer 1

BlazorWebView 控件（从现在起我将其称为 BWV 以节省打字）的技巧是不要将其视为标准 WinForms/WPF 控件，而将其视为 ASP.NET Blazor 应用程序。因此，您正在与 Web 应用程序交互，而不是与通常的 WinForm 或 MAUI 控件交互。

发送数据

像在 ASP.NET 中一样，通过标准依赖注入来处理来回发送数据，因此使用要在 WinForms 应用程序和 BWV 之间传递的数据设置一个类并注入它。

使用您想要在 WinForms/Maui 应用程序和 BWV 之间传递的数据创建一个类：

public class AppState
{
    public int Counter { get; set; }
}

实例化它并将其添加为 WinForms/Mai 应用程序中的单例

public partial class Form1 : Form
{
    private readonly AppState _appState = new();

    public Form1()
    {
        var services = new ServiceCollection();
        services.AddWindowsFormsBlazorWebView();
        services.AddSingleton<AppState>(_appState);
        blazorApp.HostPage = "wwwroot\\index.html";
        blazorApp.Services = services.BuildServiceProvider();
        blazorApp.RootComponents.Add<Main>("#app");

将其注入您的 .razor 页面以供使用。

@inject AppState AppState

<h3>Hello, world!</h3>

<p>The current count is <strong>@AppState.Counter</strong></p>

<button @onclick="IncrementCount">Increment</button>
<button @onclick="TriggerException">Throw</button>


@code {
    void IncrementCount()
    {
        AppState.Counter++;
    }

}

同样 - 在 WinForms C# 代码中使用实例化类

private void button1_Click(object sender, EventArgs e)
    {
        MessageBox.Show(
            owner: this,
            text: $"Current counter value is: {_appState.Counter}",
            caption: "Counter");
    }

参见 https://github.com/dotnet/maui/tree/main/src/BlazorWebView/samples/BlazorWinFormsApp

发送通知

这可以使用 Razor 页面参数并使用操作或事件来完成。

我使用的一个示例只是 Razor 页面中的一个简单的 EventCallBack，因此在 Razor 页面中有一个如下参数：

 [Parameter]
public EventCallback Callback { get; set; }

在您的 C# 代码中创建一个任务

public async Task DoSomething()
{
    await Something();
    ... do other things
}

现在将该任务作为参数传递给 Razor 页面。请注意，为了简单起见，我在这里使用 Razor 组件，但您可以将参数传递给 IDictionary? 类型的 BWV，它表示要传递给根组件的可选参数字典。

<MyRazorControl Callback="Refresh"/>

您可以从 Razor 页面中调用它

<button type="button" class="btn btn-primary" @onclick="DoSomething">Do Some Work</button>

@code {

    [Parameter]
    public EventCallback Callback { get; set; }

    private async Task DoSomething()
    {
        await Callback.InvokeAsync();
    }

}