LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

【Web开发】NanUI 通过CEF(Chromium 渲染引擎)使用 HTML5、CSS3 和 JavaScript 快速创建具有现代用户界面的 WinForm 应用程序

admin
2026年1月28日 9:45 本文热度 19

前言

今天给大家分享一个强大的 .NET 开源框架,它利用 Web 技术(HTML5、CSS3、JavaScript)为 WinForm 应用程序构建现代化的用户界面:NanUI。

如果你正在寻找一个用于创建具有现代用户界面的 WinForm 应用程序的框架,NanUI 是一个不错的选择。

项目介绍

NanUI 是一个基于 .NET 平台的开源(MIT License)框架,旨在帮助开发者使用 HTML5、CSS3 和 JavaScript 构建具有现代感的 WinForm 应用程序用户界面。它底层依托于 Xilium.CefGlue 这是 Chromium Embedded Framework(CEF)在 .NET 环境下的官方绑定实现,通过嵌入完整的 Chromium 渲染引擎,使 WinForm 应用能够呈现 Web 技术驱动的富交互界面。

基本原理

官方介绍:

CEF 多进程架构

WinFormium 基于 CEF 的 .NET 实现 CefGlue 项目进行拓展,因此也遭循 CEF 的多进程架构模型。

处理窗口创建、UI和网络访问的主要进程称为“浏览器”进程(也成为主进程)。这通常是与主应用程序相同的进程,并且大部分应用程序逻辑将在浏览器进程中运行。

页面渲染和 JavaScript 执行发生在单独的“渲染”进程中,一些应用程序逻辑,例如 JavaScript 绑定和 DOM 访问等操作在渲染进程中运行,默认进程模型将为每个唯一的来源(方案+域,即 URL) 生成一个新的渲染进程,其他进程将根据需要产生,例如处理加速合成的 GPU 进程。

默认情况下,主应用程序的可执行文件将被多次执行作为上述几种种类的进程。如果主应用程序可执行文件很大且逻辑很多的情况下,加载时间将很长,并目多次启动该可执行文件作为子进程还会占用过多内存,在这种情况下可以使用单独的可执行文件作为其子进程以加快应用程序的启动时间并减少内存的占用。有关详细信息,请参阅《使用子进程》部分。

CEF生成的独立进程之间使用 IPC 进行通信,在浏览器和渲染进程中实现的应用程序逻辑可以通过来回发送异步消息进行通信,渲染进程中的 JavaScriptIntegration 可以调用位于浏览器进程中的异步API, Winformium 已经对进程间通信的过程进行了封装,原则上您不要手动处理进程间通信的过程。如果您需要在浏览器进程和渲染进程之间进行通信,请自行搜索 CEF 进程间通信的相关内容。

关于 CEF 版本

Winformium 内置了CEF 核心,因此与其相关的 CEF 版本是固定的。如果使用 Nuget 安袭 Winformium 包,用户无法自主选择 CEF 版本,如果您需要使用特定版本的CEF 服本,您可以手动替换 Winformum 项目源码中 CefGlue的相关文件并编译 Winformium 框架。

基本原理概括:

  • Chromium Embedded Framework (CEF) 是一个开源项目,一个用于将基于 Chromium 的浏览器嵌入其他应用程序的简单框架。
  • 它提供稳定的 C/C++ API,支持多进程架构(Browser 进程 + Renderer/GPU 等子进程),具备完整的 HTML5 渲染、JavaScript 执行、网络请求、安全沙箱等能力。
  • NanUI 并未直接调用 CEF 的 C 接口,而是基于 Xilium.CefGlue 这是一个高质量的 .NET 封装库,将 CEF 的 C++ API 转换为 C# 可调用的托管接口。

环境要求

开发环境

  • Visual Studio 2019 或更高版本。
  • NET Framework 4.6.2 或更高版本 / .NET 6.0 或更高版本。

部署环境

  • .NET Framework 4.6.2 或更高版本。
  • .NET 6.0 需要 Windows 7 Service Pack 1 或更高版本。
  • .NET 7.0/8.0/9.0 需要 Windows 10 或 Windows 11。
  • Microsoft Windows 7 Service Pack 1 或更高版本。

项目源代码

快速使用

创建一个 WinForm 应用程序

首先我们快速创建一个名为NanUIExercise Windows 窗体应用程序:

安装 NanUI NuGet 包

安装 NanUI 包 NetDimension.NanUI :

安装 NanUI 所依赖的 Chromium Embedded Framework 依赖包 NetDimension.NanUI.Runtime

创建一个基本的 NanUI 应用程序

Program.cs:

using NetDimension.NanUI;

namespace NanUIExercise
{
    internal static class Program
    {
        /// <summary>
        ///  The main entry point for the application.
        /// </summary>
        [STAThread]
        static void Main()
        {
            var builder = NanUIApp.CreateBuilder();

            builder.UseNanUIApp<MyFirstAPP>();

            var app = builder.Build();

            app.Run();
        }
    }
}

创建一个类继承 AppStartup 来配置应用程序:

using Microsoft.Extensions.DependencyInjection;
using NetDimension.NanUI;

namespace NanUIExercise
{
    public class MyFirstAPP : AppStartup
    {
        protected override MainWindowCreationAction? UseMainWindow(MainWindowOptions opts)
        {
            // 设置应用程序的主窗体
            return opts.UseMainFormium<MyWindow>();
        }

        protected override void ProgramMain(string[] args)
        {
            // Main函数中的代码应该在这里,该函数只在主进程中运行。这样可以防止子进程运行一些不正确的初始化代码。
            ApplicationConfiguration.Initialize();
        }

        protected override void ConfigurationChromiumEmbedded(ChromiumEnvironmentBuiler cef)
        {
            // 在此处配置 Chromium Embedded Framwork
        }

        protected override void ConfigureServices(IServiceCollection services)
        {
            // 在这里配置该应用程序的服务
        }
    }
}

创建一个类实现 Formium,用于配置应用程序的主窗口:

using NetDimension.NanUI;
using NetDimension.NanUI.Forms;

namespace NanUIExercise
{
    public class MyWindow : Formium
    {
        public MyWindow()
        {
            Url = "https://juejin.cn/";
        }

        protected override FormStyle ConfigureWindowStyle(WindowStyleBuilder builder)
        {
            // 此处配置窗口的样式和属性,或留空以使用默认样式

            var style = builder.UseSystemForm();

            style.TitleBar = false;

            style.DefaultAppTitle = "My First NanUI App";

            return style;
        }
    }
}

运行效果查看:

项目源码地址

更多项目实用功能和特性欢迎前往项目开源地址查看👀,别忘了给项目一个Star支持💖。


该文章在 2026/1/28 11:12:08 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2026 ClickSun All Rights Reserved