首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使用CSS拖动样式在Webview2 + WPF中创建无框架的可拖动窗口

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

Stack Overflow用户
提问于 2021-10-18 17:41:45
回答 1查看 221关注 0票数 0

我正在将一个电子应用程序迁移到WPF + Webview2。

在我的Electron应用中,我有无边框的窗口。创建一个自定义的、可拖动的标题栏相当于在我希望成为可拖动的div上添加一个CSS属性:-webkit-app-region: drag

示例如下:

main.js:

代码语言:javascript
运行
复制
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:

代码语言:javascript
运行
复制
<button onclick="window.open('index2.html')">Open Frameless Window</button>

index2.html:

代码语言:javascript
运行
复制
<div style="-webkit-app-region: drag; background-color:green">Toolbar</div>
<div>Body</div>

在我的Webview2应用程序中,我有:

代码语言:javascript
运行
复制
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样式之类的东西。

我怎样才能让这些风格有效果呢?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-10-18 18:35:00

WebView2不支持webkit-app-region: drag样式。您需要手动实现可拖动区域,如此GitHub issue中所述。

如果你愿意,你可以使用open a feature request on our WebView2Feedback project

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69620333

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档