NanUI项目入门：创建你的第一个WinFormium应用程序

前言

NanUI（现更名为WinFormium）是一个基于Chromium Embedded Framework（CEF）的开源框架，它允许开发者使用HTML5、CSS3和JavaScript等前端技术来构建Windows桌面应用程序的界面，同时保留WinForms的强大功能。本文将详细介绍如何从零开始创建一个简单的NanUI应用程序。

开发环境准备

在开始之前，请确保你的开发环境满足以下要求：

1. 开发工具：Visual Studio 2017或更高版本（推荐使用Visual Studio 2022）
2. 运行时环境：
   • .NET 6.0 SDK或更高版本
   • 或.NET Framework 4.6.2或更高版本

项目创建步骤

第一步：创建WinForms项目

1. 打开Visual Studio，选择"创建新项目"
2. 在模板搜索框中输入"Windows Forms"，选择适合的模板
3. 根据项目需求选择基于.NET Framework或.NET Core的WinForms项目模板
4. 为项目命名并选择保存位置

第二步：安装必要的NuGet包

NanUI框架由两个核心组件组成：

1. 主框架包：通过NuGet包管理器安装NetDimension.NanUI包

   Install-Package NetDimension.NanUI
   

2. 运行时包：安装CEF运行时库

   Install-Package NetDimension.NanUI.Runtime
   

注意：对于.NET Framework项目，可能需要额外安装以下预览版依赖项：

Install-Package SharpGen.Runtime -Version 2.1.2-beta
Install-Package SharpGen.Runtime.COM -Version 2.1.2-beta

第三步：配置项目结构

1. 删除模板自动生成的Form1.cs及相关资源文件
2. 修改Program.cs文件，设置NanUI应用的入口点

using WinFormium;

class Program
{
    [STAThread]
    static void Main(string[] args)
    {
        var builder = WinFormiumApp.CreateBuilder();
        builder.UseWinFormiumApp<MyApp>();
        var app = builder.Build();
        app.Run();
    }
}

第四步：创建应用配置类

新建MyApp.cs文件，继承WinFormiumStartup基类，用于配置应用初始化：

using WinFormium;

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

    protected override void WinFormiumMain(string[] args)
    {
        ApplicationConfiguration.Initialize();
    }

    protected override void ConfigurationChromiumEmbedded(ChromiumEnvironmentBuiler cef)
    {
        // CEF配置代码
    }

    protected override void ConfigureServices(IServiceCollection services)
    {
        // 服务配置代码
    }
}

第五步：创建主窗口类

新建MyWindow.cs文件，继承Formium类，定义应用主窗口：

using WinFormium;
using WinFormium.Forms;

class MyWindow : Formium
{
    public MyWindow()
    {
        Url = "https://cn.bing.com";  // 设置首页地址
    }

    protected override FormStyle ConfigureWindowStyle(WindowStyleBuilder builder)
    {
        var style = builder.UseSystemForm();
        style.TitleBar = false;  // 禁用原生标题栏
        style.DefaultAppTitle = "我的第一个NanUI应用";
        return style;
    }
}

运行与调试

完成上述步骤后，编译并运行项目，你将看到：

1. 一个显示必应搜索页面的窗口
2. 窗口没有传统的标题栏和控制按钮
3. 可以通过拖动边框调整窗口大小

关键概念解析

1. Formium类：NanUI的核心类，代表一个可以加载网页内容的窗口，继承自WinForms的Form类。

2. 无标题栏窗口：通过设置style.TitleBar = false可以创建自定义样式的窗口，这为UI设计提供了更大的灵活性。

3. CEF配置：在ConfigurationChromiumEmbedded方法中可以配置CEF的各种参数，如缓存路径、GPU加速等。

常见问题解答

Q: 为什么窗口没有标题栏和控制按钮？ A: 这是因为我们在窗口样式中设置了TitleBar = false，这种设计允许开发者完全自定义窗口的标题栏和控制区域。

Q: 如何添加最小化、最大化和关闭按钮？ A: 可以通过HTML/CSS自定义这些控件，然后通过JavaScript与C#代码交互实现相应功能。

下一步学习建议

1. 学习如何为无标题栏窗口添加自定义的控制按钮
2. 探索NanUI中C#与JavaScript的交互方式
3. 了解如何打包和分发NanUI应用程序

通过本教程，你已经成功创建了一个基本的NanUI应用程序。NanUI的强大之处在于它结合了Web技术的灵活性和WinForms的稳定性，为Windows桌面应用开发提供了全新的可能性。