古风,武道至尊帝临小说,官场小说排行榜

.NET界面組件WinFormedge

freeflydom

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

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

項目簡介

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

功能

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

窗體樣式

WinFormedge 目前提供了標準窗體樣式、無標題欄窗體樣式及透明窗體三種類型的窗體：

標準窗體樣式

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

無標題欄窗體樣式

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

透明窗體樣式

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

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

背景樣式

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

交互功能

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

窗體命令

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

app-command="minimize" - 最小化窗體
app-command="maximize" - 最大化/恢復窗體
app-command="fullscreen" - 全屏/恢復窗體
app-command="close" - 關閉當前窗體

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

<div app-command="close">關閉</div>

移動無邊框窗體

當使用無標題欄或者透明窗體時，WinFormedge 提供了能夠幫助窗體實現(xiàn)點擊移動的 app-region 屬性，這個屬性是一個 CSS 的屬性，具有兩個屬性值 drag 和 no-drag，將這個 CSS 屬性應用到合適的元素上即可實現(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)標記上不同的 class 類名：

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

通過以上幫助樣式，設計人員能夠為窗體在不同窗體狀態(tài)時編寫對應的 CSS 樣式代碼。

前端事件

WinFormedge 提供了一些前端事件，允許開發(fā)者在窗體狀態(tài)變化時執(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ā)者訪問窗體的相關信息和操作。該對象包含以下屬性和方法：

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

安裝和使用

安裝

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

PM> Install-Package WinFormedge

入門

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

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

使用 WinFormedge 應用程序初始化流程替換默認初始化代碼

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

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

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

創(chuàng)建 AppStartup 類

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

您必須實現(xiàn) OnApplicationStartup 方法來創(chuàng)建應用程序的主窗口。當該方法返回由 StartupSettings 類生成的值時，F(xiàn)ormedgeApp 類將創(chuàng)建應用程序主窗口；若方法返回 null，則應用程序將直接關閉。

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í)行一些操作，例如用戶登錄、用戶設置等，以決定使用哪個窗口啟動應用程序。此外，如果條件不滿足，您還可以通過返回 null 來終止應用程序。

創(chuàng)建 MainWindow 類

MyWindow 類是應用程序的主窗口，繼承自 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 已準備就緒
    }
    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)
    {
        // 配置主窗口設置
        var win = opts.UseDefaultWindow();
        win.ExtendsContentIntoTitleBar = true;
        win.SystemBackdropType = SystemBackdropType.MicaAlt;
        return win;
    }
}

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

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

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

運行應用程序

項目倉庫

Github: https://github.com/XuanchenLin/WinFormedge
Gitee: https://gitee.com/linxuanchen/WinFormedge

目前 WinFormedge 項目已在 Github 和 Gitee 進行托管，并使用 MIT 開源協(xié)議開放源代碼，歡迎各位 .NET 開發(fā)者安裝體驗。

歡迎到倉庫的 Issues 頁面發(fā)表建議或意見，同時也歡迎任何有意義的 PR。

?轉自https://www.cnblogs.com/linxuanchen/p/18924815

該文章在 2025/9/9 10:19:34 編輯過

關鍵字查詢

正在查詢...

點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。

點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務費用、相關報表等業(yè)務管理，結合碼頭的業(yè)務特點，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。