前言

在 Windows 平臺開發(fā)中，WinForm 憑借其穩(wěn)定性和易用性長期占據(jù)重要地位。然而，傳統(tǒng) WinForm 的界面設(shè)計受限于原生控件庫，難以實現(xiàn)現(xiàn)代化、動態(tài)化的交互效果。

隨著 Web 技術(shù)的普及，開發(fā)開始探索將 HTML5、CSS3 和 JavaScript 引入桌面應(yīng)用開發(fā)的可能性。NanUI 框架正是這一趨勢下的優(yōu)秀代表，它通過 Chromium Embedded Framework (CEF) 將 Web 技術(shù)無縫集成到 WinForm 中，為大家提供全新的界面開發(fā)范式。

項目介紹

NanUI 是一個基于 .NET 平臺的開源框架，其核心目標是通過 HTML5、CSS3 和 JavaScript 開發(fā) WinForm 應(yīng)用程序的用戶界面。

該框架基于 Xilium.CefGlue（CEF 的 .NET 實現(xiàn)），可以使用熟悉的 Web 技術(shù)設(shè)計界面，同時通過 C# 實現(xiàn)業(yè)務(wù)邏輯。這種"前端 Web 化、后端 .NET 化"的架構(gòu)模式，既保留了 WinForm 的穩(wěn)定性，又賦予了界面設(shè)計的靈活性。

項目功能

NanUI 的核心功能可概括為三個方面：

1、Web 技術(shù)集成

通過 Chromium 內(nèi)核渲染 HTML 頁面，支持所有現(xiàn)代 Web 標準（包括 CSS3 動畫、WebGL 等）。

2、雙向通信機制

C# 與 JavaScript 的雙向調(diào)用接口，實現(xiàn)業(yè)務(wù)邏輯與界面交互的無縫銜接。

3、窗口樣式定制

支持完全自定義窗口邊框、標題欄和菜單，可創(chuàng)建無邊框、透明化等特殊效果。

項目特點

• 跨版本兼容性

支持 Windows 7 SP1 及以上系統(tǒng)，覆蓋絕大多數(shù) Windows 用戶群體。

• 輕量化替代方案

對于 CEF 體積敏感的場景，推薦基于 WebView2 的 WinFormedge 框架（僅 36MB 壓縮包）。

• 現(xiàn)代化開發(fā)體驗

開發(fā)可使用 React、Vue 等前端框架開發(fā)界面，結(jié)合 Vite 等工具實現(xiàn)熱更新。

• 豐富的擴展生態(tài)

集成 SkiaSharp（2D 圖形庫）、Vortice.Windows（DirectX 封裝）等第三方庫，增強圖形處理能力。

• 企業(yè)級支持

完整的 NuGet 包管理，支持 Azure CDN 和華為云鏡像加速依賴下載。

項目技術(shù)

NanUI 的技術(shù)棧呈現(xiàn)"分層架構(gòu)"特征：

項目環(huán)境

開發(fā)環(huán)境

• .NET Framework 4.6.2 或更高版本 / .NET 6.0 或更高版本

• Visual Studio 2019 或更高版本（強烈建議使用 VS2022）

部署環(huán)境

• Microsoft Windows 7 Service Pack 1 或更高版本

• .Net Framework 4.6.2 或更高版本

• .NET 6.0 需要 Windows 7 Service Pack 1 或更高版本

• .NET 7.0/8.0/9.0 需要 Windows 10 或 Windows 11

這是一個 僅限 Windows 的框架，所以它目前不能在 Linux 或者 MacOS 環(huán)境運行。

支持的最低 Windows 版本是 Windows 7 Service Pack 1，并且 Windows 7 不支持某些功能（例如 DirectComposition 離屏渲染）。

項目使用

開發(fā)流程如下：

1、創(chuàng)建 WinForm 項目并安裝 NanUI NuGet 包（NetDimension.NanUI + NetDimension.NanUI.Runtime）。

2、在 Program.cs 中初始化 NanUI 應(yīng)用上下文：

var builder = NanUIApp.CreateBuilder();
builder.UseNanUIApp<MyApp>();
var app = builder.Build();
app.Run();

3、定義應(yīng)用啟動類（MyApp）配置主窗口：

class MyApp : AppStartup {
    protected override MainWindowCreationAction? UseMainWindow(MainWindowOptions opts) {
        return opts.UseMainFormium<MyWindow>();
    }
}

4、創(chuàng)建 Formium 子類（MyWindow）加載 Web 內(nèi)容：

class MyWindow : Formium {
    public MyWindow() {
        Url = "https://example.com"; // 或本地 HTML 文件路徑
    }
}

項目效果

無邊框窗體樣式

透明窗體樣式

系統(tǒng)窗體樣式

在某企業(yè)資源管理系統(tǒng)重構(gòu)案例中，使用 NanUI 將傳統(tǒng) WinForm 界面升級為 Web 風(fēng)格后，用戶滿意度提升 40%，開發(fā)周期縮短 30%。

項目源碼

GitHub：https://github.com/NetDimension/NanUI

Gitee：https://gitee.com/NetDimension/NanUI?

總結(jié)

NanUI 重新定義了 WinForm 開發(fā)的可能性邊界。對于需要兼顧穩(wěn)定性與創(chuàng)新性的企業(yè)應(yīng)用，它提供了"前端革命、后端堅守"的理想平衡點。

雖然存在 CEF 體積較大、Windows 7 部分功能受限等缺點，但其開放的架構(gòu)和活躍的社區(qū)正在持續(xù)優(yōu)化這些問題。隨著 .NET 8 和 WebView2 的普及，NanUI 生態(tài)有望進一步擴展，成為跨平臺桌面開發(fā)的重要選項。

關(guān)鍵詞

#NanUI、#WinForm、#HTML5、#CEF、#開源框架、#WebView2、Xilium.CefGlue、NuGet、#依賴注入、#跨平臺

閱讀原文：點擊此處