快速开始使用 NanUI
学习目标:
- 快速开始使用 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')");
}
}
至此运行即可实现效果展示的样子
遮罩定制篇
双击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;
}
}
如此便得到下述页面效果: