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

tyky79it  于 2023-03-16  发布在  Electron
关注(0)|答案(2)|浏览(221)

我正在将一个电子应用程序迁移到WPF + Webview2。
在我的电子应用程序中,我有无框架窗口,创建一个自定义的、可拖动的标题栏相当于在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();
}

窗口显示正确,没有边框,但是自定义标题栏不可拖动。看起来CSS样式没有被看到或什么的。
我怎样才能使这些样式产生效果?

pb3s4cty

pb3s4cty1#

WebView2不支持webkit-app-region: drag样式。你需要自己手动实现可拖动区域,如GitHub issue中所述。
如果你愿意,你可以open a feature request on our WebView2Feedback project

wko9yo5t

wko9yo5t2#

顺便说一句,对于任何经历过和我一样痛苦的人来说,WebView2现在确实支持这一点:https://github.com/MicrosoftEdge/WebView2Feedback/issues/2243#issuecomment-1448819425
您只需要传入附加参数--enable-features=msWebView2EnableDraggableRegions

相关问题