使用 Asp.net 或 Blazor 在 Electron.Net 应用程序中使用（最小、最大、关闭按钮）自定义 Window

Question

我已将 Asp.Net Core / Blazor 应用程序转换为 Electron 应用程序。但我需要无框架 Windows 以便我可以自定义我的应用程序 Window

我正在使用此代码使其无框架

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

现在我在这里创建了一个自定义 Html 文件

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

但我不明白如何为这些按钮添加功能，请帮助我解决问题。

Answer 1

使用最新版本的 ElectronNet From Here Or From Nuget 然后

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

然后在你的Layout.Cshtml创建三个按钮

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

并使用JavaScript代码

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

构建应用程序即它。

使用 Asp.net 或 Blazor 在 Electron.Net 应用程序中使用（最小、最大、关闭按钮）自定义 Window

Custom Window With (min,max,close buttons) In Electron.Net App with Asp.net or Blazor

javascript

electron.net