I'm migrating an Electron application to WPF Webview2.
In my Electron app, I have frameless windows. Creating a custom, draggable titlebar amounts to adding a CSS property on the div
that I want to be draggable: -webkit-app-region: drag
Example below:
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>
In my Webview2 app, I have:
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();
}
The window correctly appears without the border, but the custom titlebar is not draggable. It seems like the CSS styles aren't being seen or something.
How can I make those styles have an effect?
CodePudding user response:
WebView2 doesn't support the webkit-app-region: drag
style. You'd need to implement draggable regions yourself manually as described in this GitHub issue.
If you'd like you can open a feature request on our WebView2Feedback project.