无框窗口与电子控件（Windows）

Question

我想我的应用程序没有标题栏，但仍然是可关闭，可拖动，可最小化，最大化和像常规窗口调整大小。我可以在OS X中执行此操作，因为我可以使用titleBarStyle选项hidden-inset，但不幸的是，它不适用于Windows，这是我正在开发的平台。我将如何去在Windows中做这样的事情？

Here's an example我在说什么。

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：

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-区域：关于您的“标题栏”区域的阻力将使它让你可以将它拖到与Windows一样常见。不拖动应用于按钮，以便它们不会导致拖动。