How to interact BlazorWebView and Windows Forms

Question

I want to send data from a Windows Form to BlazorWebView and recieve notifications from the webview back to the Form. How to do this? In .Net6 Windows Forms App.

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

The trick with the BlazorWebView Control (I'm calling it BWV from now on to save typing) is to not think of it as a standard WinForms/WPF control, and think of it as a ASP.NET Blazor App. So you are interacting with a Web App and not your usual WinForm or MAUI controls.

Sending Data

Sending Data back and forward is handled via standard Dependency Injection as you do in ASP.NET, so set up a class with the data you want to pass between the WinForms App and the BWV and inject it.

Create a Class with the data you want to pass between Your WinForms/Maui App and BWV:

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

Instantiate it and add it as a singleton in you WinForms/Mai App

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");

Inject it into your .razor page(s) for use.

@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++;
    }

}

Likewise - use the instantiated class in your WinForms C# code

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

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

Sending Notifications

This can be done using Razor Page Parameters and use Actions or Events.

An example of something I use is just a simple EventCallBack from the Razor page, so in the Razor Page have a parameter like this:

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

In your c# code create a task

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

Now pass that task as a parameter to the Razor page. Note I am using a Razor component here for simplicity, but you can pass parameters to BWV, of type IDictionary<string, object?>?, which represents an optional dictionary of parameters to pass to the root component.

<MyRazorControl Callback="Refresh"/>

And you can invoke it from within the Razor Page

<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();
    }

}