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

Frameless window with controls in electron (Windows)

提问by nakamin

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 titleBarStyleoption called hidden-insetthat 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?

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

Here's an exampleof what I'm talking about.

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

回答by Shawn Rakowski

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

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

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

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

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>

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

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

})();

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

设置窗口样式可能很棘手，但关键是使用 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;
}

Note that these are important:

请注意，这些很重要：

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

-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.

-webkit-app-region: 在你的“标题栏”区域上拖动将使它成为这样，你可以像 Windows 一样拖动它。无拖动应用于按钮，以便它们不会导致拖动。

回答by binaryfunt

I was inspired by Shawn's article and apps like Hyper Terminal to figure out how to exactly replicate the Windows 10 style look as a seamless title bar, and wrote this tutorial.

我受到 Shawn 的文章和 Hyper Terminal 等应用程序的启发，想弄清楚如何将 Windows 10 风格的外观精确复制为无缝标题栏，并编写了本教程。

It includes a fix for the resizing issue Shawn mentioned, and also switches between the maximise and restore buttons, even when e.g. the window is maximised by dragging the it to the top of the screen.

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

Quick reference

快速参考

• Title bar height: 32px
• Title bar title font-size: 12px
• Window control buttons: 46pxwide, 32pxhigh
• Window control button assets from font Segoe MDL2 Assets(docs here), size: 10px
  • Minimise: 
  • Maximise: 
  • Restore: 
  • Close: 
• Window control button colours: varies between UWP apps, but seems to be
  • Dark mode apps (white window controls): #FFF
  • Light mode apps (black window controls): #171717
• Close button colours
  • Hover (:hover): background #E81123, colour #FFF
  • Pressed (:active): background #F1707A, colour #000or #171717

• 标题栏高度： 32px
• 标题栏标题字体大小： 12px
• 车窗控制按钮：46px宽、32px高
• 来自字体的窗口控制按钮资产Segoe MDL2 Assets（此处为文档），大小：10px
  • 最小化： 
  • 最大化： 
  • 恢复： 
  • 关闭： 
• 窗口控制按钮颜色：因 UWP 应用而异，但似乎是
  • 暗模式应用程序（白色窗口控件）： #FFF
  • 浅色模式应用程序（黑色窗口控件）： #171717
• 关闭按钮颜色
  • 悬停（:hover）：背景#E81123，颜色#FFF
  • 按下 ( :active)：背景#F1707A、颜色#000或#171717

Note: in the tutorial I have switched to PNG icons with different sizes for pixel-perfect scaling, but I leave the Segoe MDL2 Assets font characters above as an alternative

注意：在教程中，我已切换到具有不同大小的 PNG 图标以实现像素完美缩放，但我保留了上面的 Segoe MDL2 Assets 字体字符作为替代

回答by Amine Beihaqi

i use this in my apps:

我在我的应用程序中使用它：

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>