咨询：WPF中WebView2CompositionControl显示Monaco Editor内容模糊问题

问题描述 #

在WPF项目中使用WebView2CompositionControl控件展示Monaco Editor时，出现内容模糊的问题。此前使用WebView2控件时，存在控件始终显示在所有WPF控件最上层的覆盖问题；切换到WebView2CompositionControl后覆盖问题解决，但内容渲染模糊的问题出现，而WebView2控件无此现象。

相关代码 #

HTML代码（Monaco Editor页面）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Editor</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet"
          data-name="vs/editor/editor.main"
          href="./min/vs/editor/editor.main.css"/>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }

        #container {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="./min/vs/loader.js"></script>
<script>
    require.config({paths: {'vs': './min/vs'}});
</script>
<script src="./min/vs/editor/editor.main.js"></script>
<script>
    // Hold a reference to the Monaco editor instance
    let monacoEditor;

    // Function to initialize the editor
    function initializeEditor(content, theme = 'vs-light') {
        require(['vs/editor/editor.main'], function () {
            if (monacoEditor) {
                return;
            }
            
            monacoEditor = monaco.editor.create(document.getElementById('container'), {
                value: content.toString(),
                automaticLayout: true,
                theme: theme,
            });
        });

        // Add a resize listener to resize Monaco Editor dynamically
        window.addEventListener('resize', () => {
            if (monacoEditor) {
                monacoEditor.layout();
            }
        });
    }
</script>
</body>
</html> 

XAML代码

<wpf:WebView2CompositionControl
            x:Name="TextEditorView" />

解决方案 #

1. 适配高DPI缩放 #

WPF的高DPI缩放是导致WebView2CompositionControl渲染模糊的常见原因，需确保控件和应用的DPI设置正确：

• 在窗口初始化时，同步控件的DPI缩放值：

  TextEditorView.DpiScale = VisualTreeHelper.GetDpi(this).DpiScaleX;
  

• 在应用的app.config中添加高DPI支持配置：

  <configuration>
    <application xmlns="urn:schemas-microsoft-com:asm.v3">
      <windowsSettings>
        <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true/PM</dpiAware>
        <dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">PerMonitorV2, PerMonitor</dpiAwareness>
      </windowsSettings>
    </application>
  </configuration>
  

2. 启用WebView2高DPI渲染 #

初始化WebView2CompositionControl时，通过环境配置强制适配当前DPI：

var dpiScale = VisualTreeHelper.GetDpi(this).DpiScaleX;
var env = await CoreWebView2Environment.CreateAsync(null, null, new CoreWebView2EnvironmentOptions
{
    AdditionalBrowserArguments = $"--force-device-scale-factor={dpiScale}"
});
await TextEditorView.EnsureCoreWebView2Async(env);

3. 调整Monaco Editor渲染参数 #

修改Monaco初始化代码，适配设备像素比：

monacoEditor = monaco.editor.create(document.getElementById('container'), {
    value: content.toString(),
    automaticLayout: true,
    theme: theme,
    fontSize: 14 * window.devicePixelRatio, // 根据设备像素比调整字体大小
    lineHeight: 20 * window.devicePixelRatio
});

同时在HTML的<head>中添加viewport元标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

4. 确保控件布局为整数像素 #

避免控件尺寸为非整数像素导致模糊，在XAML中绑定控件尺寸到父容器的实际尺寸：

<wpf:WebView2CompositionControl
    x:Name="TextEditorView"
    Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}}"
    Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Grid}}" />

内容的提问来源于stack exchange，提问作者Michael Trapp