.NET 6 Gets Blazor WebView Controls for WPF, WinForms提到.NET 6 Preview 3为WPF和WinForms提供了BlazorWebView。有点好奇BlazorWebView到底是什么。

有个Github项目https://github.com/jspuij/TwokaB为以下平台创建了BlazorWebview:

- Xamarin Android (running on the Mono runtime)
- Xamarin iOS (running on the Mono runtime)
- Xamarin Mac (running on the Mono runtime)
- WPF (running on the .NET Core runtime)

相关文档在https://jspuij.github.io/BlazorWebView.Docs/pages/index.html。

从项目介绍上看，此BlazorWebview的功能已经并入https://github.com/xamarin/MobileBlazorBindings，并在https://devblogs.microsoft.com/aspnet/hybrid-blazor-mobile-blazor-bindings-july-update/中可见。

同时该项目还提到，其灵感来自于Steve Sanderson的博客文章：Meet WebWindow, a cross-platform webview library for .NET Core

Meet WebWindow, a cross-platform webview library for .NET Core

制作了一个WebWindow可以用于.NET Core console app。

文中还是有不少例子的。

Exploring lighter alternatives to Electron for hosting a Blazor desktop app

对Electron做了介绍：2014年开源，自带Chromium，NodeJS，提供了一套跨平台API。

Blazor on Electron的一个试验项目： https://github.com/aspnet/AspLabs/tree/master/src/ComponentsElectron。不运行于WebAssembly之中，而是以.NET Core的runtime作为运行时。

Blazor on pure webview的一个试验项目：https://github.com/steveSandersonMS/BlazorDesktop。采用系统自带的Webview以及.NET runtime。.NET项目的好处是可以很容易设置为standalone或者framework-dependent。后者的体积会非常小。

小结

Incremental DOM

Blazor所作的事，简单地说是管理DOM状态。当所管理的状态发生变化时，将差异部分应用到真实的DOM上。根据https://blazor-university.com/components/render-trees/，Blazor有自己的RenderTree，既像Virtual DOM，又像Incremental DOM。

从谷歌的这个项目https://github.com/google/incremental-dom看来，Incremental DOM没有居中的树形数据结构，而是直接在前线操作DOM树。（Think of it as ASM.dom）。但https://blazor-university.com/components/render-trees/提到了Incremental DOM和谷歌的这个项目可能不是一个东西。

Blazor采用的是局部更新，如果通过浏览器的Inspector修改了DOM，Blazor的更新会失败。

其他参考：

Blazor的应用形式

现在Blazor有几种应用形式。感觉其中最重要的差别在于Blazor所依赖的.NET运行时在何处提供：

  • BlazorWebAssembly
    • .NET运行时采用Mono，部署在浏览器中，通过SignalR与前端交互
  • BlazorServer
    • .NET运行时采用CoreCLR，部署在云端，通过JS interop与前端交互
  • BlazorDesktop
    • .NET运行时采用App自带的CLR，通过Webview interop与前端交互

（本篇完）

2022-10-14 Host a Blazor web app in a .NET MAUI app using BlazorWebView

.NET MAUI应用支持BlazorWebView控件。Razor组件跑在.NET的进程中，但把web UI发送到webview中。

BlazorWebView有下列辖属

  • HostPage，定义了Blazor应用的根页面
  • RootComponents，指定了需要添加到页面的根组件，具有下面辖属
    • Selector，是一个CSS选择器，指定在页面中的哪个位置放置组件
    • ComponentType，给出根组件的类型
    • Parameters， 给出传递给根组件的参数

BlazorWebView还定义了下面的事件：

  • BlazorWebViewInitializing，初始化之前触发，可以用于自定义一些设置
  • BlazorWebViewInitialized，初始化之后，渲染之前触发，
  • UrlLoading，超链接被点击的时候触发

Create a .NET MAUI Blazor app

可以直接在VS中的.NET MAUI Blazor app创建工程。

    <BlazorWebView HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

Add a BlazorWebView to an existing app

添加RazorSDK到csproj：

<Project Sdk="Microsoft.NET.Sdk.Razor">

添加Razor组件到Pages以及Shared。

添加静态内容到wwwroot。

可选添加_Imports.razor。

添加BlazorWebView到XAML。

添加BlazorWebView到MAUI：

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        builder.Services.AddMauiBlazorWebView();
#if DEBUG
        builder.Services.AddMauiBlazorWebViewDeveloperTools();
#endif
        // Register any app services on the IServiceCollection object
        // e.g. builder.Services.AddSingleton<WeatherForecastService>();

        return builder.Build();
    }
}

（更新完）

2022-10-23更新

（更新完）