当应用程序在Windows上全屏时隐藏窗口菜单？

Question

I have an Electron app running on OSX and Windows. When the Windows version is full screen it still shows a menu bar and I would like it not to. Basically I want what happens on OSX: when the app is "full screen" no menu bar or window 'chrome' should appear.

I've tried setAutoHideMenuBar during my window set up but that made no difference. Am I using it wrong or misunderstanding what it is supposted to do?

I've seen some QAs suggestin setMenu(null) but won't that blow out the menu entirely? I do want the menu when in window mode or (on Windows) when the Alt key is pressed.

---

   mainWindow = new BrowserWindow({
        show: false,
        width: 1024,
        height: 768,
        minWidth: 400,
        minHeight: 200,
        resizable: true,
        backgroundColor: '#222',
        center: true,
        setAutoHideMenuBar: true
    });

From the docs :

win.setAutoHideMenuBar(hide)

 hide Boolean 

Sets whether the window menu bar should hide itself automatically. Once set the menu bar will only show when users press the single Alt key.

If the menu bar is already visible, calling setAutoHideMenuBar(true) won't hide it immediately.

From the docs

win.setMenuBarVisibility(visible) Windows Linux

 visible Boolean 

Sets whether the menu bar should be visible. If the menu bar is auto-hide, users can still bring up the menu bar by pressing the single Alt key.

From the docs

win.setMenu(menu) Linux Windows

 menu Menu 

Sets the menu as the window's menu bar, setting it to null will remove the menu bar.

Answer 1

An error on my part and a "go figure"

1. I was misusing the setAutoHideMenuBar command, trying to use it as an option when creating the window. The correct option syntax is autoHideMenuBar: true .

---

app.on('ready', function () {
    mainWindow = new BrowserWindow({
        show: false,
        width: 1024,
        height: 768,
        minWidth: 400,
        minHeight: 200,
        resizable: true,
        backgroundColor: '#222',
        center: true,
        autoHideMenuBar: true
    }); 

---

2. To handle toggling fullscreen, in setting up my menu I used the shortcut

   role: 'togglefullscreen'

While this works and includes the keyboard accelerators, the menu bar always appears and the autoHideMenuBar setting is apparently ignored. I don't understand why. So instead of the shortcut, I use this and the menu bar hides correctly.

            {
                label: 'Toggle Full Screen',
                click: () => { toggleFullscreen();},
                accelerator: 'CmdOrCtrl+f'
            }

---

function toggleFullscreen() {
    if (mainWindow.isFullScreen()) {
        mainWindow.setFullScreen(false);
    } else {
        mainWindow.setFullScreen(true);
    }
}

Answer 2

Use setFullScreen method.

function (item, focusedWindow) {
    if (focusedWindow) {
        focusedWindow.setFullScreen(!focusedWindow.isFullScreen())
    }
}