WPF 使用 Blazor WebView2 技巧

MainWindow 窗口使用 Blazor WebView2：

            <Border Margin="0,0,0,0"
                Background="Transparent"
                BorderThickness="0"
                CornerRadius="0,0,0,0">
                <Grid>
                    <blazor:BlazorWebView x:Name="webView" HostPage="{Binding URL, Mode=OneWay}" Services="{DynamicResource services}" Margin="0,0,0,0" Width="0" Height="0">
                        <blazor:BlazorWebView.RootComponents>
                            <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
                        </blazor:BlazorWebView.RootComponents>
                    </blazor:BlazorWebView>
                    <Image x:Name="LoaddingImage" Width="680" Source="/loadding.png" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Grid>
            </Border>

笔者这里加上了一个 Logo 图片。这是因为 WebView 加载页面/地址 需要一段时间，碰到性能差的机器，可能会导致白屏一段时间，因此可以加上 Logo 或者加载中的图片，这样会更加友好。

在 MainWindow 启动后，检查系统是否安装了 WebView2。如果没有安装，则跳转到下载安装地址或官网。

            try
            {
                var version = CoreWebView2Environment.GetAvailableBrowserVersionString();
            }
            catch (Exception ex)
            {
                try
                {
                    Process.Start(new ProcessStartInfo
                    {
                        FileName = "https://www.whuanle.cn",
                        UseShellExecute = true
                    });
                }
                catch { }
            }

            var window = this;
            var blazorWebView = window.BlazorWebView;

然后定义 BlazorWebview 初始化事件，初始化时，自定义设置 WebView 数据目录位置等。

            blazorWebView.BlazorWebViewInitializing += (s, e) =>
            {
            // 自定义 WebView 数据存放目录
                e.UserDataFolder = "D://aaa";
                blazorWebView.WebView.CoreWebView2InitializationCompleted += (s, e) =>
                {
                // 每次启动程序时，清理 WebView 即浏览器缓存
                blazorWebView.WebView.CoreWebView2.Profile.ClearBrowsingDataAsync(CoreWebView2BrowsingDataKinds.DiskCache);
                // 当在 WebView 中打开地址时，允许部分非 https://0.0.0.0:443 的地址在程序内打开，否则这些地址会使用浏览器打开
                    blazorWebView.UrlLoading += (s, e) =>
                    {
                        foreach (var item in new string[]{})
                        {
                            if (e.Url.IsBaseOf(item) || e.Url.ToString().StartsWith(item.ToString()))
                            {
                                e.UrlLoadingStrategy = UrlLoadingStrategy.OpenInWebView;
                                break;
                            }
                        }
                    };
                };
            };

最后，当 BlazorWebview 已经加载完成时，去掉 Logo，显示页面。

        // 配置 blazor 加载页面事件
        private void WebViewLoadedHander()
        {
            var window = this;
            window.Dispatcher.InvokeAsync(() =>
            {
                window.BlazorWebView.Width = double.NaN;
                window.BlazorWebView.Height = double.NaN;

                window.LoaddingImage.IsEnabled = false;
                window.LoaddingImage.Visibility = Visibility.Hidden;
            });
        }