如何使用 CSS 拖动样式在 Webview2 + WPF 中创建无框架、可拖动的 window
How to create a frameless, draggable window in Webview2 + WPF using CSS drag styles
我正在将 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 样式似乎没有被看到或其他什么。
如何让这些样式生效?
WebView2 不支持 webkit-app-region: drag
样式。您需要自己手动实现可拖动区域,如 GitHub issue.
中所述
如果您愿意,可以open a feature request on our WebView2Feedback project。
我正在将 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 样式似乎没有被看到或其他什么。
如何让这些样式生效?
WebView2 不支持 webkit-app-region: drag
样式。您需要自己手动实现可拖动区域,如 GitHub issue.
如果您愿意,可以open a feature request on our WebView2Feedback project。