国产麻豆一精品一av一免费,欧美极度丰满熟妇hd,日本一区二区三区爆乳

.NET界面組件WinFormedge

當(dāng)前位置：點(diǎn)晴教程→知識管理交流 →『技術(shù)文檔交流』

freeflydom

2025年9月9日 10:19 本文熱度 309

經(jīng)過幾個月的爆肝，目前 WinFormedge 項(xiàng)目已經(jīng)基本可用并已上傳至 NuGet 源。同時(shí)附帶的示例程序也開發(fā)完成并隨 WinFormedge 源代碼一并開源。歡迎各位以 Win10/11 為主要生產(chǎn)環(huán)境的 .NET 開發(fā)人員安裝體驗(yàn)。

項(xiàng)目簡介

WinFormedge 是一個基于 Microsoft WebView2 的開源 .NET 庫，開發(fā)者能夠使用 HTML、CSS 和 JavaScript 創(chuàng)建現(xiàn)代化、具有豐富視覺吸力的 WinForms 應(yīng)用程序。此項(xiàng)目的靈感源于由本人維護(hù)的另外一個 .NET WinForm 界面組件 NanUI，與之不同的是 NanUI 基于 Chromium Embedded Framework (CEF) 作為 Web 的渲染引擎，而 WinFormedge 使用了 WebView2 作為渲染引擎，因此 WinFormedge 在目標(biāo)為 Windows 10/11 的設(shè)備上部署時(shí)無需打包龐大的 CEF 運(yùn)行時(shí)文件，極大地減少了應(yīng)用程序分發(fā)包的大小。

功能

WinFormedge 的目標(biāo)是為 .NET 桌面開發(fā)人員提供功能強(qiáng)大且使用便捷的界面組件，目標(biāo)針對 WinForm 框架，因此使用 WinFormedge 界面框架能夠在為 WinForm 項(xiàng)目帶來全新界面體驗(yàn)的同時(shí)也保留了 .NET 的強(qiáng)大功能。

窗體樣式

WinFormedge 目前提供了標(biāo)準(zhǔn)窗體樣式、無標(biāo)題欄窗體樣式及透明窗體三種類型的窗體：

標(biāo)準(zhǔn)窗體樣式

標(biāo)準(zhǔn)窗體樣式與 WinForm 的標(biāo)準(zhǔn)窗體相同，支持最小化、最大化、關(guān)閉等操作。不同的是，整個客戶區(qū)將以開發(fā)者設(shè)計(jì)的 Web 頁面所覆蓋，當(dāng)然也可以如下圖所示直接使用現(xiàn)有的 Web 站點(diǎn)。

無標(biāo)題欄窗體樣式

無標(biāo)題欄窗體去除了系統(tǒng)標(biāo)題欄，允許開發(fā)者使用整個窗口區(qū)域這能為界面的設(shè)計(jì)帶來極大的靈活性。如圖所展示的 WinFormedge 示例程序，窗體移除了系統(tǒng)標(biāo)準(zhǔn)標(biāo)題欄區(qū)域，使用整個 HTML 頁面來展現(xiàn)軟件的界面。

透明窗體樣式

透明窗體允許開發(fā)者創(chuàng)建完全透明的窗體，適用于需要特殊視覺效果的應(yīng)用程序。下圖所展示的窗體，在 Windows 系統(tǒng)中使用 HTML 模擬了 macOS Yosemite 的窗體風(fēng)格，因?yàn)槭褂昧?WinFormedge 的透明窗體，因此從窗體的圓角效果、投影效果等等都完全使用 HTML 和 CSS 來實(shí)現(xiàn)。

通過調(diào)整背景的 Alpha 通道也能實(shí)現(xiàn)更多酷炫的透明和半透明效果。

背景樣式

此外，WinFormege 還內(nèi)置了多種窗體背景的樣式，包括傳統(tǒng)的純色背景、透明背景、類似 Win7 的高斯模糊背景以及 Win11 的 Mica 背景等。開發(fā)者可以根據(jù)需要選擇合適的背景樣式，配合 WebView2 的頁面設(shè)計(jì)以實(shí)現(xiàn)不同的視覺效果。

交互功能

為了簡化 Web 前端與 WinForm 的功能交互，WinFormege 提供了多種內(nèi)置的命令及 CSS 幫助類以減少開發(fā)者的開發(fā)難度，這些功能包括：

窗體命令

窗體命令 app-command 屬性是 WinFormedge 擴(kuò)展的 HTML 元素屬性，通過在標(biāo)準(zhǔn)的 HTML 元素上添加這個元素屬性以方便地實(shí)現(xiàn)窗體的最小化、最大化、全屏及關(guān)閉操作。

app-command="minimize" - 最小化窗體
app-command="maximize" - 最大化/恢復(fù)窗體
app-command="fullscreen" - 全屏/恢復(fù)窗體
app-command="close" - 關(guān)閉當(dāng)前窗體

用法其實(shí)很簡單，在任意 HTML 元素上加上這個屬性并配置期望的操作類型即可：

<div app-command="close">關(guān)閉</div>

移動無邊框窗體

當(dāng)使用無標(biāo)題欄或者透明窗體時(shí)，WinFormedge 提供了能夠幫助窗體實(shí)現(xiàn)點(diǎn)擊移動的 app-region 屬性，這個屬性是一個 CSS 的屬性，具有兩個屬性值 drag 和 no-drag，將這個 CSS 屬性應(yīng)用到合適的元素上即可實(shí)現(xiàn)對窗體的拖動移動。

如下所示：

<html>
<head>
  <style>
  header{
    app-region:drag;
  }
  </style>
</head>
<body>
<header>My App</header>
<main>
  <h1>Hi~</h1>
  <p>Drag header to move.</p>
</main>
</body>
</html>

HTML 幫助樣式

為了簡化前端頁面開發(fā)人員的工作，WinFormedge 會在頁面的 HTML 根元素上根據(jù)窗體的狀態(tài)標(biāo)記上不同的 class 類名：

window--activated - 窗體激活狀態(tài)
window--deactived - 窗體未激活狀態(tài)
window--fullscreen - 窗體全屏狀態(tài)
window--maximized - 窗體最大化狀態(tài)
window__titlebar--shown - 當(dāng)前窗體具有系統(tǒng)默認(rèn)的標(biāo)題欄
window__titlebar--shown - 當(dāng)前窗體為沒有標(biāo)題欄的窗體

通過以上幫助樣式，設(shè)計(jì)人員能夠?yàn)榇绑w在不同窗體狀態(tài)時(shí)編寫對應(yīng)的 CSS 樣式代碼。

前端事件

WinFormedge 提供了一些前端事件，允許開發(fā)者在窗體狀態(tài)變化時(shí)執(zhí)行 JavaScript 代碼。開發(fā)者通過使用 window.addEventListener 方法來綁定這些事件。目前提供對以下事件的監(jiān)聽：

windowactivated - 窗體已激活
windowdeactivated - 窗體未激活
windowstatechange - 窗體狀態(tài)改變，參數(shù)：state:string = "[normal|maximized|minimized|fullscreen]"
windowresize - 窗體尺寸改變，參數(shù)：x:int, y:int, width:int, height: int
windowmove - 窗體位置改變，參數(shù)：x:int, y:int, screenX:int, screenY: int

這些事件類型是 CustomEvent，因此需要通過事件參數(shù)的 detail 屬性訪問到具體的熟悉值。

前端對象

WinFormedge 提供了一個全局的 window.hostWindow 對象，允許開發(fā)者訪問窗體的相關(guān)信息和操作。該對象包含以下屬性和方法：

hostWindow.activated - 獲取窗體激活狀態(tài)
hostWindow.hasTitleBar - 獲取窗體是否具有標(biāo)題欄
hostWindow.windowState - 獲取窗體當(dāng)前的狀態(tài)
hostWindow.left - 設(shè)置或獲取窗體左邊距
hostWindow.top - 設(shè)置或獲取窗體上邊距
hostWindow.width - 設(shè)置或獲取窗體寬度
hostWindow.height - 設(shè)置或獲取窗體高度
hostWindow.activate() - 激活當(dāng)前窗體
hostWindow.minimize() - 最小化當(dāng)前窗體
hostWindow.maximize() - 切換最大化/還原當(dāng)前窗體
hostWindow.restore() - 還原當(dāng)前窗體
hostWindow.fullscreen() - 切換全屏化當(dāng)前窗體（需要指定 AllowFullscreen 屬性）
hostWindow.toggleFullscreen() - 切換當(dāng)前窗體的全屏狀態(tài)
hostWindow.close() - 關(guān)閉當(dāng)前窗體

安裝和使用

安裝

WinFormedge 已在 github 設(shè)置了自動化 nuget 發(fā)布，您能夠從 nuget 找到最新版的 WinFormedge 包。使用 NuGet 包管理器或者任意 NuGet 管理工具在您的項(xiàng)目中搜索并安裝WinFormedge即可。

PM> Install-Package WinFormedge

入門

首先您需要使用 Visual Studio 2022 使用默認(rèn)的項(xiàng)目模板創(chuàng)建一個 .NET 的 Windows 窗體應(yīng)用程序。

然后根據(jù)以下步驟修改和編寫應(yīng)用程序代碼：

使用 WinFormedge 應(yīng)用程序初始化流程替換默認(rèn)初始化代碼

在 program.cs 文件中，您應(yīng)使用 FormedgeApp 替代 Application 類來初始化 WinForm 應(yīng)用程序。FormedgeApp 類是用于創(chuàng)建 WinFormedge 應(yīng)用程序的構(gòu)建器，提供了配置和運(yùn)行應(yīng)用程序的方法。

using WinFormedge;
namespace MinimalExampleApp;
internal static class Program
{
    [STAThread]
    static void Main()
    {
        ApplicationConfiguration.Initialize();
        var app = FormedgeApp.CreateBuilder()
            .UseDevTools()
            .UseWinFormedgeApp<MyFormedgeApp>().Build();
        app.Run();
    }
}

當(dāng) FormedgeApp 類創(chuàng)建后，它將自動初始化 WebView2 環(huán)境并運(yùn)行消息循環(huán)。

創(chuàng)建 AppStartup 類

AppStartup 類是 WinFormedge 應(yīng)用程序的入口點(diǎn)，提供了配置應(yīng)用程序的方法。您可以重寫 OnApplicationLaunched 方法以在應(yīng)用程序啟動前執(zhí)行初始化任務(wù)。

您必須實(shí)現(xiàn) OnApplicationStartup 方法來創(chuàng)建應(yīng)用程序的主窗口。當(dāng)該方法返回由 StartupSettings 類生成的值時(shí)，F(xiàn)ormedgeApp 類將創(chuàng)建應(yīng)用程序主窗口；若方法返回 null，則應(yīng)用程序?qū)⒅苯雨P(guān)閉。

using WinFormedge;
namespace MinimalExampleApp;
internal class MyFormedgeApp : AppStartup
{
    protected override bool OnApplicationLaunched(string[] args)
    {
        return true;
    }
    protected override AppCreationAction? OnApplicationStartup(StartupSettings options)
    {
        return options.UseMainWindow(new MyWindow());
    }
}

您可以在 OnApplicationStartup 方法中執(zhí)行一些操作，例如用戶登錄、用戶設(shè)置等，以決定使用哪個窗口啟動應(yīng)用程序。此外，如果條件不滿足，您還可以通過返回 null 來終止應(yīng)用程序。

創(chuàng)建 MainWindow 類

MyWindow 類是應(yīng)用程序的主窗口，繼承自 Formedge 類。您可以使用 Formedge 類創(chuàng)建一個帶有 WebView2 的窗口。

using WinFormedge;
using Microsoft.Web.WebView2.Core;
namespace MinimalExampleApp;
internal class MyWindow : Formedge
{
    public MyWindow()
    {
        MinimumSize = new Size(960, 480);
        Size = new Size(1280, 800);
        AllowFullScreen = true;
        Load += MyWindow_Load;
        DOMContentLoaded += MyWindow_DOMContentLoaded;
        Url = "https://cn.bing.com";
    }
    private void MyWindow_Load(object? sender, EventArgs e)
    {
        // 窗口和 WebView2 已準(zhǔn)備就緒
    }
    private void MyWindow_DOMContentLoaded(object? sender, CoreWebView2DOMContentLoadedEventArgs e)
    {
        // DOM 內(nèi)容已加載完成
        ExecuteScriptAsync(""""
(()=>{
const headerEl = document.querySelector("#hdr");
headerEl.style.appRegion="drag";
})();
        """");
    }
    protected override WindowSettings ConfigureHostWindowSettings(HostWindowBuilder opts)
    {
        // 配置主窗口設(shè)置
        var win = opts.UseDefaultWindow();
        win.ExtendsContentIntoTitleBar = true;
        win.SystemBackdropType = SystemBackdropType.MicaAlt;
        return win;
    }
}

上述代碼創(chuàng)建了一個 Formedge 窗口。通過使用 Url 屬性，您可以設(shè)置窗口的初始 URL。

默認(rèn)窗口屬性可以在構(gòu)造函數(shù)中設(shè)置。對于窗口的特殊樣式屬性，您需要重寫 Formedge 類的 ConfigureHostWindowSettings 方法，并使用其 HostWindowBuilder 參數(shù)來確定將采用哪種窗口樣式，以及配置該窗口具有的特殊樣式。例如，在示例代碼中，通過使用 HostWindowBuilder 參數(shù)的 UseDefaultWindow 方法，您可以指示 Formedge 創(chuàng)建一個默認(rèn)窗口，并設(shè)置其 ExtendsContentIntoTitleBar 屬性以實(shí)現(xiàn)無邊框效果。

當(dāng)窗口和 WebView2 準(zhǔn)備就緒時(shí)，會觸發(fā) Load 事件。您可以使用此事件執(zhí)行任何需要 WebView2 控件準(zhǔn)備就緒的初始化任務(wù)。
當(dāng) DOM 內(nèi)容加載完成并準(zhǔn)備就緒時(shí)，會觸發(fā) DOMContentLoaded 事件。您可以使用此事件執(zhí)行任何需要 DOM 內(nèi)容加載完成的任務(wù)。如示例所示，您可以使用 ExecuteScriptAsync 方法在 WebView2 控件中執(zhí)行 JavaScript 代碼。示例中的 JavaScript 代碼將 header 元素的 appRegion 屬性設(shè)置為 drag，這允許用戶通過點(diǎn)擊并拖動這些矩形上的元素來移動窗口。

運(yùn)行應(yīng)用程序