带电子控制的无框窗口(Windows)

Question

我希望我的应用程序没有标题栏但仍然可以关闭,可拖动,可最小化,可最大化和可调整大小,如常规窗口.我可以在OS X中执行此操作,因为有一个titleBarStyle叫做hidden-inset我可以使用的选项 ,但遗憾的是它不适用于Windows,这是我正在开发的平台.我将如何在Windows中执行此类操作？

这是我正在谈论的一个例子.

Answer 1

假设您不想要窗口镶边,可以通过移除Electron周围的框架并使用html/css/js填充其余部分来实现此目的.我写了一篇文章,在我的博客上实现了你想要的东西:http://www.mylifeforthecode.com/making-the-electron-shell-as-pretty-as-the-visual-studio-shell/.入门代码也在这里托管:https://github.com/srakowski/ElectronLikeVS

总而言之,在创建BrowserWindow时需要传递frame:false:

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

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

 <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中绑定最大/最小/关闭函数:

(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:

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常见的那样拖动它.无拖动应用于按钮,以便它们不会导致拖动.

Answer 2

我受到Shawn的文章和Hyper Terminal等应用程序的启发,想出如何将Windows 10风格的外观完全复制为无缝标题栏,并编写本教程.

它包括Shawn提到的调整大小问题的修复,并且还在最大化和恢复按钮之间切换,即使例如通过将窗口拖动到屏幕顶部来最大化窗口也是如此.

快速参考

• 标题栏高度: 32px
• 标题栏标题字体大小: 12px
• 窗口控制按钮:46px宽,32px高
• 窗口控制按钮资源来自字体Segoe MDL2 Assets,大小:10px
  • 最小化: 
  • 最大化: 
  • 恢复: 
  • 关: 
• 关闭按钮背景颜色
  • 正常: #E81123
  • 按下(:active):#F1707A