VisualStudio 快速开始使用 NanUI（从0搭建到运行程序仅需10分钟）

学习目标：

• 快速开始使用 NanUI
• 通过VisualStudio2022 快速跑通NanUIDemo
• Gitee 林选臣 / NanUI
• Gitee中附带了中英文文档，里面写的很详细了，进阶的可以去看看

---

NanUI基本介绍

这是一个开放源代码的 .NET / .NET Core 窗体应用程序（WinForms）界面组件。您可以使用 HTML5 / CSS3 / Javascript 等前端技术来构建您的应用程序界面。主流的Javascript框架，比如Angular, React, Vue都是可以用来构架SPA应用的明智选择。使用 NanUI 界面组件将给您的窗体设计工作带来无限可能。

NanUI文档 - 使用网页来设计整个窗口
NanUI是一套桌面开发框架，最终输出的是exe桌面程序，但运行的内容是浏览器页面的内容（解决了CS界面不容易输出很美观界面的问题）

---

效果展示：

如果效果展示符合你的审美，那么你可以继续往下看该文章

遮罩层

有点类似于Ps打开软件的时候出现的logo，加载画面，当然该遮罩层可以关闭，后面会提供关闭方法

运行界面

有点类似将网页装进了App，当然该界面的前提是你已经搭建好自己的网站，也可以是你用别人的网页地址

---

开始配置项目：

查看电脑安装Framwork ： C:\Windows\Microsoft.NET\Framework

Create a new Project

创建新的Windows Form App(.NET Framework)

Configure your new Project

References引用NetDimension.NanUI

右键选择Manage NuGet Packages

搜索安装NanUI

• NetDimension.NanUI
• NetDimension.NanUI.Runtime

安装过程中有问题请移步：NetDimension.NanUI安装报错Unable to find a version of ‘SharpGen.Runtime‘解决方案

当所有环境安装完成，那么可以继续下面代码修改环节

---

修改progrome.cs文件

progrome.cs修改代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;
using NetDimension.NanUI;

namespace WindowsFormsApp1
{
    static class Program
    {
        static void Main()
        {
            // ...
            WinFormium.CreateRuntimeBuilder(env => {

                env.CustomCefSettings(settings =>
                {
                    // 在此处设置 CEF 的相关参数
                });

                env.CustomCefCommandLineArguments(commandLine =>
                {
                    // 在此处指定 CEF 命令行参数
                });

            }, app =>
            {
                // 指定启动窗体
                app.UseMainWindow(context => new MainWindow());
            })
            .Build()
            .Run();
        }
    }
}

新建一个名为MainWindow的Class

MainWindow.cs修改代码如下：

using NetDimension.NanUI;
using NetDimension.NanUI.HostWindow;

class MainWindow : Formium
{
    // 设置窗体样式类型
    public override HostWindowType WindowType => HostWindowType.System;
    // 指定启动 Url
    public override string StartUrl => "https://www.formium.net";

    public MainWindow()
    {
        // 在此处设置窗口样式
        Size = new System.Drawing.Size(1024, 768);
        
		//设置标题
        Title = "m-todo.com";
        
        // 在此处设置窗口Icon
        //Icon = new System.Drawing.Icon("Mega.ico");

        //设置启动位置
        StartPosition = System.Windows.Forms.FormStartPosition.CenterScreen;
    }

    protected override void OnReady()
    {
        // 在此处进行浏览器相关操作

        //ShowDevTools();
        //ExecuteJavaScript("alert('Hello NanUI')");
    }
}

至此运行即可实现效果展示的样子

---

遮罩定制篇

选臣 / NanUI 0.9 示例

双击Resource.resx 点击添加Resource，添加现有项

MainWindow.cs加入下述代码

using System.Drawing;

class MainWindow : Formium
{
    public MainWindow()
    {
        // 修改启动界面
        //ColorTranslator使用前提是using System.Drawing;
        SplashScreen.BackColor = ColorTranslator.FromHtml("#fafafa");
        
        //mmmmtodo为你项目的名称
        //林选臣Demo中解决方案是namespace HostWindowFeatures; 然后 SplashScreen.Image = Properties.Resources.SplashLogo;
        //但是当我使用namespace HostWindowFeatures;时候报错： 让C# langversion 7.4提升到10.0+
        //修改项目mmmmtodo.csproj里面的langversion为10.0后，发现Program.cs代码部分又报错了，所以最后选择方案是使用mmmmtodo
        SplashScreen.Image = mmmmtodo.Properties.Resources.SplashLogo;
    }
}

如此便得到下述页面效果：