在 .NET Core + WebView2 项目中禁用 Windows 缩放：解决失真和图像放大的指南

windows

2024-03-03 20:57:49

在 .NET Core + WebView2 项目中禁用 Windows 缩放：一个详尽的指南

问题：缩放带来的失真和图像放大

在 .NET Core 和 WebView2 项目中，启用 Windows 缩放会导致程序失真和图像放大。这可能会破坏用户体验，尤其是在显示敏感的图像或布局时。

解决方法：禁用系统缩放

为了解决这个问题，我们可以禁用 Windows 缩放，同时仍然允许网站控制自己的缩放。以下是实现这一目标的分步指南：

1. 创建自定义 ZoomLevelController

创建一个名为 CustomZoomLevelController 的新类，该类继承自 ZoomLevelController。在该类中，覆盖 HandleZoomLevelChanged 方法并阻止系统缩放：

public class CustomZoomLevelController : ZoomLevelController
{
    public override void HandleZoomLevelChanged(CoreWebView2 sender, CoreWebView2ZoomLevelChangedEventArgs args)
    {
        // 阻止系统缩放
        args.ZoomLevel = sender.ZoomFactor;
    }
}

2. 配置 WebView2 设置

在 CoreWebView2 的初始化代码中，将自定义的 ZoomLevelController 分配给 ZoomLevelController 属性：

webView2.ZoomLevelController = new CustomZoomLevelController();

3. 禁用放大手势

默认情况下，WebView2 启用放大手势。为了禁用它，可以设置 IsZoomEnabled 属性为 false：

webView2.IsZoomEnabled = false;

4. 启用网站自定义缩放

如果希望允许网站控制自己的缩放，可以启用 IsWebMessageZoomEnabled 属性：

webView2.IsWebMessageZoomEnabled = true;

代码示例

using Microsoft.Web.WebView2.Core;
using System;

public class MainWindow
{
    public CoreWebView2 webView2;

    public MainWindow()
    {
        // 初始化 WebView2
        webView2 = new CoreWebView2();

        // 创建自定义 ZoomLevelController
        var zoomController = new CustomZoomLevelController();
        webView2.ZoomLevelController = zoomController;

        // 禁用放大手势
        webView2.IsZoomEnabled = false;

        // 启用网站自定义缩放
        webView2.IsWebMessageZoomEnabled = true;

        // 加载 URL
        webView2.Navigate("https://example.com");
    }
}