电子控件中的无框窗口（Windows） [英] Frameless window with controls in electron (Windows)

问题描述

我希望我的应用没有标题栏，但仍像常规窗口一样可关闭，可拖动，最小化，最大化和可调整大小。我可以在OS X中执行此操作，因为存在 titleBarStyle 选项称为 hidden-inset 我可以使用，但不幸的是它不适用于Windows，这是平台我正在开发的。我该如何在Windows中执行类似的操作？

I want my app to have no title bar but still be closeable, draggable, minimizable, maximizable and resizable like a regular window. I can do this in OS X since there is a titleBarStyle option called hidden-inset that I can use but unfortunately it's not available for Windows, which is the platform that I'm developing for. How would I go about doing something like this in Windows?

这是我在说的一个例子。

推荐答案

假设您不需要窗口镶边，则可以通过删除Electron周围的框架并用填充其余部分来实现此目的。 html / css / js。我写了一篇文章，可以满足您在我的博客上所寻找的内容： http://mylifeforthecode.github.io/making-the-electron-shell-as-pretty-as-the-visual-studio-shell/ 。入门代码也托管在这里： https://github.com/srakowski/ElectronLikeVS

Assuming you don't want window chrome, you can accomplish this by removing the frame around Electron and filling the rest in with html/css/js. I wrote an article that achieves what you are looking for on my blog here: http://mylifeforthecode.github.io/making-the-electron-shell-as-pretty-as-the-visual-studio-shell/. Code to get you started is also hosted here: https://github.com/srakowski/ElectronLikeVS

总而言之，您需要传递框架：创建浏览器窗口时为false：

To summarize, you need to pass frame: false when you create the BrowserWindow:

mainWindow = new BrowserWindow({width: 800, height: 600, frame: false});

然后为标题栏创建并添加控制按钮：

Then create and add control buttons for your title bar:

 <div id="title-bar">
      <div id="title">My Life For The Code</div>
      <div id="title-bar-btns">
           <button id="min-btn">-</button>
           <button id="max-btn">+</button>
           <button id="close-btn">x</button>
      </div>
 </div>

绑定js中的max / min / close函数：

Bind in the max/min/close functions in js:

(function () {

      var remote = require('remote'); 
      var BrowserWindow = remote.require('browser-window'); 

     function init() { 
          document.getElementById("min-btn").addEventListener("click", function (e) {
               var window = BrowserWindow.getFocusedWindow();
               window.minimize(); 
          });

          document.getElementById("max-btn").addEventListener("click", function (e) {
               var window = BrowserWindow.getFocusedWindow(); 
               window.maximize(); 
          });

          document.getElementById("close-btn").addEventListener("click", function (e) {
               var window = BrowserWindow.getFocusedWindow();
               window.close();
          }); 
     }; 

     document.onreadystatechange = function () {
          if (document.readyState == "complete") {
               init(); 
          }
     };

})();

样式化窗口可能很棘手，但是使用webkit中特殊属性的关键用途。这是一些最小的CSS：

Styling the window can be tricky, but the key use to use special properties from webkit. Here is some minimal CSS:

body {
 padding: 0px;
 margin: 0px; 
}

#title-bar {
 -webkit-app-region: drag;
 height: 24px; 
 background-color: darkviolet;
 padding: none;
 margin: 0px; 
}

#title {
 position: fixed;
 top: 0px;
 left: 6px; 
}

#title-bar-btns {
 -webkit-app-region: no-drag;
 position: fixed;
 top: 0px;
 right: 6px;
}

请注意以下几点：

-webkit-app-region: drag;
-webkit-app-region: no-drag;

-webkit-app-region：在标题栏区域上拖动将使其可以像在Windows中一样拖动它。不拖动将应用于按钮，这样它们就不会引起拖动。

-webkit-app-region: drag on your 'title bar' region will make it so that you can drag it around as is common with windows. The no-drag is applied to the buttons so that they do not cause dragging.

这篇关于电子控件中的无框窗口（Windows）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！