Блог

Главная - Вопросы по программированию - Как создать бескаркас, перетаскиваемое окно в Webview2 WPF с использованием стилей перетаскивания CSS

Как создать бескаркас, перетаскиваемое окно в Webview2 WPF с использованием стилей перетаскивания CSS

#wpf #electron #draggable #webview2

Вопрос:

Я переношу электронное приложение в WPF Webview2.

В моем приложении Electron у меня есть бескаркасные окна. Создание настраиваемой перетаскиваемой панели заголовка равносильно добавлению свойства CSS в div то, что я хочу, чтобы оно было перетаскиваемым: -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 не видны или что-то в этом роде.

Как я могу сделать так, чтобы эти стили имели эффект?

Ответ №1:

WebView2 не поддерживает этот webkit-app-region: drag стиль. Вам нужно будет самостоятельно реализовать перетаскиваемые области вручную, как описано в этом выпуске GitHub.

Если вы хотите, вы можете открыть запрос на функцию в нашем проекте WebView2Feedback.

Метки: ,