如何在WPF + Webview2中使用CSS拖拽样式实现无框可拖动窗口

核心原因 #

-webkit-app-region: drag是Electron框架内置的专属扩展能力，WebView2默认未对该CSS属性提供原生支持，因此无法直接触发WPF无框窗口的拖动行为。

解决方案 #

我们可以通过JS前端事件监听 + WPF宿主交互的方式兼容原有逻辑，无需修改前端的CSS定义：

步骤1：前端添加事件监听逻辑

在前端公共JS（或所有使用自定义标题栏的页面）中添加如下代码，识别可拖动区域并通知宿主触发拖动：

// 页面加载完成后遍历所有元素绑定拖动事件
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('*').forEach(el => {
    const style = getComputedStyle(el);
    // 匹配标记为可拖动的元素
    if (style.webkitAppRegion === 'drag') {
      el.addEventListener('mousedown', e => {
        // 仅响应鼠标左键按下
        if (e.button !== 0) return;
        // 跳过标记为不可拖动的子元素
        if (e.target.closest('[style*="-webkit-app-region: no-drag"]')) return;
        // 调用WPF端注册的方法触发窗口拖动
        window.chrome.webview.hostObjects.sync.windowOps.startDrag();
        e.preventDefault();
      })
    }
  })
})

步骤2：WPF端实现交互类与注入逻辑

首先定义供JS调用的COM可见交互类：

using System.Runtime.InteropServices;
using System.Windows;

[ComVisible(true)]
public class WindowOperations
{
    private readonly Window _targetWindow;
    
    public WindowOperations(Window targetWindow)
    {
        _targetWindow = targetWindow;
    }

    /// <summary>
    /// 触发窗口拖动
    /// </summary>
    public void StartDrag()
    {
        _targetWindow.DragMove();
    }
}

然后修改你原有的新窗口创建逻辑，注入交互对象：

public static async void CoreWebView2_NewWindowRequested(object sender, CoreWebView2NewWindowRequestedEventArgs e)
{
    var deferral = e.GetDeferral();

    var win = new Window();
    win.WindowStyle = WindowStyle.None; // 移除默认边框

    var webView = new WebView2();
    win.Content = webView;
    
    await webView.EnsureCoreWebView2Async(MainWindow.Webview.CoreWebView2.Environment);
    // 注入宿主交互对象供JS调用
    webView.CoreWebView2.AddHostObjectToScript("windowOps", new WindowOperations(win));
    
    e.NewWindow = webView.CoreWebView2;
    win.Show();
    deferral.Complete();
}

额外说明 #

如果你的可拖动区域内存在按钮、输入框等需要交互的子元素，只需要保留原有-webkit-app-region: no-drag的CSS定义即可，上述JS逻辑会自动跳过这些元素的拖动触发。

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