使用 NanUI 快速创建具有现代用户界面的 WinForm 应用程序

前言

今天大姚给大家分享一个强大的 .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 技术驱动的富交互界面。

基本原理

官方介绍:

基本原理概括:

  • 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 包

安装 NanUINetDimension.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支持💖。

优秀项目和框架精选

该项目已收录到C#/.NET/.NET Core优秀项目和框架精选中,关注优秀项目和框架精选能让你及时了解C#、.NET和.NET Core领域的最新动态和最佳实践,提高开发工作效率和质量。坑已挖,欢迎大家踊跃提交PR推荐或自荐(让优秀的项目和框架不被埋没🤞)。

相关推荐
xiaoxue..5 小时前
TailwindCSS:从“样式民工”到“UI乐高大师”的逆袭
前端·css·ui
(initial)7 小时前
B-02. Shared Memory 深度优化:从 Bank Conflict 到 Tensor Core Swizzling
开发语言·c#
没有bug.的程序员10 小时前
自动化测试之魂:Selenium 与 TestNG 深度集成内核、Page Object 模型实战与 Web UI 交付质量指南
前端·自动化测试·selenium·ui·testng·page·object
赵鑫亿12 小时前
ClawPanel v4.4.0 发布:AI 智能助手 + 模型兼容性修复 + UI 优化
人工智能·ui·docker·容器·qq·openclaw
我命由我1234513 小时前
Photoshop - Photoshop 工具栏(69)前景色和背景色
学习·ui·职场和发展·求职招聘·职场发展·学习方法·photoshop
fdc201714 小时前
解耦的艺术:用责任链模式构建可插拔的文件处理流水线
c#·.net·责任链模式
bugcome_com14 小时前
【C# 数组详解】Array 定义、初始化、遍历、内存原理与面试高频问题
后端·c#·asp.net
小码编匠14 小时前
WPF 如何在 MVVM模式下实现 DataGrid编辑功能
后端·c#·.net
我命由我1234514 小时前
Photoshop - Photoshop 工具栏(70)以快速蒙版/标准模式编辑
学习·ui·职场和发展·求职招聘·职场发展·学习方法·photoshop
游乐码15 小时前
c#扩展方法
开发语言·c#