无框 window 电子控制 (Windows)

Question

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

以上是我所说的例子。

Answer 1

假设你不想要 window chrome，你可以通过移除 Electron 周围的框架并用 html/css/js 填充其余部分来完成此操作。我在我的博客上写了一篇文章来实现你正在寻找的东西：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

总而言之，您需要在创建 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中的max/min/close函数中绑定：

(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(); 
          }
     };

})();

设置 window 的样式可能很棘手，但关键是要使用来自 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：在您的 'title bar' 区域上拖动即可，这样您就可以像 windows 一样四处拖动它。 no-drag 应用于按钮，因此它们不会导致拖动。

Answer 2

我受到 Shawn 的文章和 Hyper Terminal 等应用程序的启发，弄清楚如何精确复制 Windows 10 样式外观作为无缝标题栏，并写下 this tutorial （请注意：截至 2022 年，本教程在 Electron 方面有些过时）.

它包括对 Shawn 提到的调整大小问题的修复，并且还在最大化和恢复按钮之间切换，即使在例如通过将 window 拖动到屏幕顶部可以最大化它。

快速参考

标题栏高度：32px
标题栏标题font-size：12px
Window 控制按钮：46px 宽，32px 高
Window 控制按钮资源来自字体 Segoe MDL2 Assets (docs here)，大小：10px
最小化：
最大化：
恢复：
关闭：
Window 控制按钮颜色：因 UWP 应用而异，但似乎是
深色模式应用（白色 window 控件）：#FFF
轻量模式应用（黑色 window 控件）：#171717
关闭按钮颜色
悬停（:hover）：背景#E81123，颜色#FFF
已按下 (:active)：背景 #F1707A、颜色 #000 或 #171717

注意：在本教程中，我已切换到具有不同大小的 PNG 图标以进行 pixel-perfect 缩放，但我保留上面的 Segoe MDL2 Assets 字体字符作为替代

Answer 3

我在我的应用程序中使用这个：

const { remote } = require("electron");
var win = remote.BrowserWindow.getFocusedWindow();

var title = document.querySelector("title").innerHTML;
document.querySelector("#titleshown").innerHTML = title;

var minimize = document.querySelector("#minimize");
var maximize = document.querySelector("#maximize");
var quit = document.querySelector("#quit");

minimize.addEventListener("click", () => {
  win.minimize();
});

maximize.addEventListener("click", () => {
  win.setFullScreen(!win.isFullScreen());
});

quit.addEventListener("click", () => {
  win.close();
});

nav {
  display: block;
  width: 100%;
  height: 30px;
  background-color: #333333;
  -webkit-app-region: drag;
  -webkit-user-select: none;
  position: fixed;
  z-index: 1;
}

nav #titleshown {
  width: 30%;
  height: 100%;
  line-height: 30px;
  color: #f7f7f7;
  float: left;
  padding: 0 0 0 1em;
}

nav #buttons {
  float: right;
  width: 150px;
  height: 100%;
  line-height: 30px;
  background-color: #222222;
  -webkit-app-region: no-drag;
}

nav #buttons #minimize,
nav #buttons #maximize,
nav #buttons #quit {
  float: left;
  height: 100%;
  width: 33%;
  text-align: center;
  color: #f7f7f7;
  cursor: default;
}

nav #buttons #minimize:hover {
  background-color: #333333aa;
}
nav #buttons #maximize:hover {
  background-color: #333333aa;
}
nav #buttons #quit:hover {
  background-color: #ff0000dd;
}

main {
  padding-top: 30px;
  overflow: auto;
  height: calc(100vh - 30px);
  position: absolute;
  top: 30px;
  left: 0;
  padding: 0;
  width: 100%;
}

<html>
  <head>
      <meta charset="UTF-8">
      <title>Hello World!</title>
  </head>
  <body>
    <nav>
      <div id="titleshown"></div>
      <div id="buttons">
          <div id="minimize"><span>&dash;</span></div>
          <div id="maximize"><span>&square;</span></div>
          <div id="quit"><span>&times;</span></div>
      </div>
    </nav>
    <main>
      <div class="container">
          <h1>Hello World!</h1>
      </div>
    </main>
  </body>
</html>

Answer 4

运行遇到这个问题，我的解决方案是保留框架但将标题设置为空白，即

document.querySelector("title").innerHTML ="";

这解决了我的问题，即我得到了一个 window，它可以关闭、最大化或最小化而没有标题。

无框 window 电子控制 (Windows)

Frameless window with controls in electron (Windows)

windows

titlebar

electron

快速参考