【WebView2】（二）WinForm 引入 WebView2 显示 Web 内容

小渣渣

需求：使用 VS 2022 新建一个 .NET Framework 4.7.2 的 WinForm 项目，引用 Microsoft.Web.WebView2 SDK 包，使用 WebView2 控件显示和渲染 Web 应用。Microsoft Edge WebView2 控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。 WebView2 控件使用 Microsoft Edge 作为绘制引擎，以在本机应用中显示 web 内容。

回顾：

【WebView2】（一）初识 Microsoft Edge WebView2 技术
https://www.itsvse.com/thread-10361-1-1.html

WebView2 运行时

如果您的 Windows 系统没有安装 WebView2 运行时（Windows 11 系统默认已经安装），第一次需要手动下载，地址：https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/

新建 WinForm 项目

打开 VS 2022 新建一个 .NET Framework 4.7.2 的 WinForm 项目，创建后需要引用 Microsoft.Web.WebView2 包，nuget 命令如下：

登录可见。

在工具箱中，找到 WebView2 Windows Forms Control 下的 WebView2 控件拖动到 Form1 窗体，如下图：



提示：默认情况下，在 Visual Studio 2017 中， WebView2 不会显示在工具箱中。 若要使 WebView2 在工具箱中显示，请选择 “工具 > 选项 > 常规 ”>并将 自动填充工具箱设置设置为 True。

设置 webView21 控件 Dock： Fill，Source：https://www.itsvse.com/，如下图：



启动项目，可以看到 WinForm 应用程序成功加载和显示 Web 内容，如下图：



WinForm 应用程序大小

大家最关心的其中一个问题就是应用程序的大小，新建一个 WinForm 应用程序引用 WebView2 SDK 后，几乎没写任何代码后的程序大小为：1.36M，如下图：




显示 WebView2 运行时版本

如何通过 .NET 程序获取系统是否安装 WebView2 运行时或者 WebView2 运行时的版本呢？代码如下：

登录可见。

调用 GetAvailableBrowserVersionString() 方法异常，就代表没有安装 WebView2 运行时。


关于分发应用和 WebView2 运行时，参考：https://learn.microsoft.com/zh-cn/microsoft-edge/webview2/concepts/distribution

启用开发者工具

通过需要将 Web 应用和 WinForm 进行联调的过程中，有时候需要看 dom 元素或者网络资源请求，如何启用开发者工具呢？

可以启动后在 webview2 控件使用 F12 方法打开 DevTools 开发者工具，或者使用如下代码打开：

登录可见。

如下图：



禁用右击菜单和开发者工具

在实际的生产环境中，我们将应用程序客户端部署到客户机器上面的时候，不希望用户能够右击（刷新、查看网页源代码等操作），并且禁用开发者工具和网页缩放控制，代码如下：

登录可见。

Microsoft.Web.WebView2.Core API 文档：https://learn.microsoft.com/zh-cn/dotnet/api/microsoft.web.webview2.core?view=webview2-dotnet-1.0.1343.22
Microsoft.Web.WebView2.WinForms API 文档：https://learn.microsoft.com/zh-cn/dotnet/api/microsoft.web.webview2.winforms?view=webview2-dotnet-1.0.1343.22

源码下载：

游客，如果您要查看本帖隐藏内容请回复

（完）

飞鱼

学习一下

落月天涯

大佬辛苦，拜读一下

小白学编程

跟大佬学习下

naipizhong

学习一下