如何使用 CSS 拖动样式在 Webview2 + WPF 中创建无框架、可拖动的 window

Question

我正在将 Electron 应用程序迁移到 WPF + Webview2。

在我的 Electron 应用程序中，我有无框架 windows。创建一个自定义的、可拖动的标题栏相当于在我想要拖动的 div 上添加一个 CSS 属性：-webkit-app-region: drag

示例如下：

main.js:

const {app, BrowserWindow} = require('electron')

function createWindow () {
  const mainWindow = new BrowserWindow()

  mainWindow.loadFile('index.html')

  mainWindow.webContents.setWindowOpenHandler(_ => {
    return {
      action: "allow",
      overrideBrowserWindowOptions: {
        frame: false
      }
    }
  })
}

app.whenReady().then(() => {
  createWindow()
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

index.html:

<button onclick="window.open('index2.html')">Open Frameless Window</button>

index2.html:

<div style="-webkit-app-region: drag; background-color:green">Toolbar</div>
<div>Body</div>

在我的 Webview2 应用程序中，我有：

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

    var win = new Window();
    win.WindowStyle = WindowStyle.None; // remove the border
    win.Show();

    var w = new WebView2();
    win.Content = w;
    await w.EnsureCoreWebView2Async(MainWindow.Webview.CoreWebView2.Environment);
    
    e.NewWindow = w.CoreWebView2;
    obj.Complete();
}

window正确显示无边框，但自定义标题栏不可拖动。 CSS 样式似乎没有被看到或其他什么。

如何让这些样式生效？

Answer 1

WebView2 不支持 webkit-app-region: drag 样式。您需要自己手动实现可拖动区域，如 GitHub issue.

中所述

如果您愿意，可以open a feature request on our WebView2Feedback project。

如何使用 CSS 拖动样式在 Webview2 + WPF 中创建无框架、可拖动的 window

How to create a frameless, draggable window in Webview2 + WPF using CSS drag styles

wpf

electron

draggable

webview2