Custom Frameless Window With (min,max,close buttons) #747

New Issue

claunia · 2026-01-29T16:47:35Z

claunia commented

2026-01-29 16:47:35 +00:00

Originally created by @mALIk-sHAHId on GitHub (Jan 3, 2022).

I have Converted My Asp.Net Core / Blazor Application To Electron App.
But I NeedFrameless Windows So That I can Customize My Application Window

I am Using this Code To Make It Frameless

 public async void Bootstrap()
    {
        var options = new BrowserWindowOptions
        {
            //Width = 1200,
            //Height = 600,
            //MinWidth = 940,
            //MinHeight = 560,
            Frame = false,

            WebPreferences = new WebPreferences
            {
                ContextIsolation = true,
                DevTools = true,
                WebSecurity = false,
            }
        };
        await Electron.WindowManager.CreateWindowAsync(options);
    }

Now I have create a Custom Html file here

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>My Electron Frameless Window</title>
	<style>
		body {
			padding: 0px;
			margin: 0px;
		}

		#title-bar {
			-webkit-app-region: drag;
			height: 40px;
			text-align: center;
			line-height: 40px;
			vertical-align: middle;
			background-color: #B4C4C7;
			padding: none;
			margin: 0px;
		}

		#title {
			position: fixed;
			top: 0px;
			left: 6px;
			color: white;
		}

		#title-bar-btns {
			-webkit-app-region: no-drag;
			position: fixed;
			top: 0px;
			right: 6px;
		}
	</style>
</head>
<body>
	<div id="title-bar">
		<div id="title">
			<span style="vertical-align: middle;">Menu</span>
			Title Bar
		</div>
		<div id="title-bar-btns">
			<button id="min-btn">-</button>
			<button id="max-btn">+</button>
			<button id="close-btn">x</button>
		</div>
	</div>
	<div style="text-align:center;">
		<h4>Page Data Will Be Loaded Here</h4>

	</div>

</body>
</html>

But I am not understanding how to add functionality to these buttons please help me solve my problem.

Originally created by @mALIk-sHAHId on GitHub (Jan 3, 2022). I have Converted My Asp.Net Core / Blazor Application To Electron App. But I NeedFrameless Windows So That I can Customize My Application Window I am Using this Code To Make It Frameless public async void Bootstrap() { var options = new BrowserWindowOptions { //Width = 1200, //Height = 600, //MinWidth = 940, //MinHeight = 560, Frame = false, WebPreferences = new WebPreferences { ContextIsolation = true, DevTools = true, WebSecurity = false, } }; await Electron.WindowManager.CreateWindowAsync(options); } Now I have create a Custom Html file here   <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Electron Frameless Window</title> <style> body { padding: 0px; margin: 0px; } #title-bar { -webkit-app-region: drag; height: 40px; text-align: center; line-height: 40px; vertical-align: middle; background-color: #B4C4C7; padding: none; margin: 0px; } #title { position: fixed; top: 0px; left: 6px; color: white; } #title-bar-btns { -webkit-app-region: no-drag; position: fixed; top: 0px; right: 6px; } </style> </head> <body> <div id="title-bar"> <div id="title"> <span style="vertical-align: middle;">Menu</span> Title Bar </div> <div id="title-bar-btns"> <button id="min-btn">-</button> <button id="max-btn">+</button> <button id="close-btn">x</button> </div> </div> <div style="text-align:center;"> <h4>Page Data Will Be Loaded Here</h4> </div> </body> </html>  [![enter image description here][1]][1] [1]: https://i.stack.imgur.com/S2ihp.png **But I am not understanding how to add functionality to these buttons please help me solve my problem.**

claunia added the question label 2026-01-29 16:47:35 +00:00

claunia closed this issue

2026-01-29 16:47:35 +00:00

claunia commented

2026-01-29 16:47:36 +00:00

@danatcofo commented on GitHub (Jan 3, 2022):

There are js methods you can call to do this. Grab the reference to the BrowserWindow representing the window and call maximize or minimize etc...

https://www.electronjs.org/docs/v14-x-y/api/browser-window

@danatcofo commented on GitHub (Jan 3, 2022): There are js methods you can call to do this. Grab the reference to the BrowserWindow representing the window and call maximize or minimize etc... https://www.electronjs.org/docs/v14-x-y/api/browser-window

claunia commented

2026-01-29 16:47:36 +00:00

@danatcofo commented on GitHub (Jan 3, 2022):

Make sure remote is enabled in the browser window options on window creation in your dotnet code then...

inside a js file referenced by the html of the window...

const { remote } = window.require('electron');
const win = remote.getCurrentWindow();

win.minimize();
win.maximize();
win.setFullScreen(!win.isFullScreen());
if (win.isClosable()) {
   win.close(); 
} else {
   win.hide();
}

@danatcofo commented on GitHub (Jan 3, 2022): Make sure remote is enabled in the browser window options on window creation in your dotnet code then... inside a js file referenced by the html of the window... ```JavaScript const { remote } = window.require('electron'); const win = remote.getCurrentWindow(); win.minimize(); win.maximize(); win.setFullScreen(!win.isFullScreen()); if (win.isClosable()) { win.close(); } else { win.hide(); } ```

claunia commented

2026-01-29 16:47:37 +00:00

@mALIk-sHAHId commented on GitHub (Jan 8, 2022):

Use Latest Version of ElectronNet From Here Or From Nuget Then

public async void Bootstrap()
{
    var options = new BrowserWindowOptions
    {
       
        Frame = false,

        WebPreferences = new WebPreferences
        {
            ContextIsolation = true,
            DevTools = false,
            WebSecurity = false,
            EnableRemoteModule = true
        }
    };
    await Electron.WindowManager.CreateWindowAsync(options);
}

Then In Your Layout.Cshtml Create Three Button

	<button id="minimize" onclick="minimizeWindow()">Min Window</button>
	<button id="maximize" onclick="maximizeWindow()">Max Window</button>
	<button id="close" onclick="closeWindow()">Close Window</button>

And Use JavaScript Code

const {remote} = require('electron');
const getWindow = () => remote.BrowserWindow.getFocusedWindow();

	function closeWindow () {
		getWindow().close();
	}

	function minimizeWindow () {
		getWindow().minimize();
	}

	function maximizeWindow () {
		const window = getWindow();
		window.isMaximized() ? window.unmaximize() : window.maximize();
	}

Build the App ie It.

@mALIk-sHAHId commented on GitHub (Jan 8, 2022): Use Latest Version of ElectronNet [From Here Or From Nuget][1] Then public async void Bootstrap() { var options = new BrowserWindowOptions { Frame = false, WebPreferences = new WebPreferences { ContextIsolation = true, DevTools = false, WebSecurity = false, EnableRemoteModule = true } }; await Electron.WindowManager.CreateWindowAsync(options); } Then In Your Layout.Cshtml Create Three Button <button id="minimize" onclick="minimizeWindow()">Min Window</button> <button id="maximize" onclick="maximizeWindow()">Max Window</button> <button id="close" onclick="closeWindow()">Close Window</button> And Use JavaScript Code const {remote} = require('electron'); const getWindow = () => remote.BrowserWindow.getFocusedWindow(); function closeWindow () { getWindow().close(); } function minimizeWindow () { getWindow().minimize(); } function maximizeWindow () { const window = getWindow(); window.isMaximized() ? window.unmaximize() : window.maximize(); } Build the App ie It. [1]: https://github.com/ElectronNET/Electron.NET

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/Electron.NET#747