0
164
VistasCustom Window With (min,max,close buttons) In Electron.Net App with Asp.net or Blazor
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.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
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.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta