.Net/.Net Core 的界面框架 NanUI 发布新版本啦!

DotNet程序园

共 3942字,需浏览 8分钟

 ·

2020-11-06 00:14

发布前感悟

NanUI 自从上一次更新 NanUI 0.7 已经过去大半年,B站和头条的教学视频也只制作到了第二集。

有朋友悄悄问我是不是发生什么事故我删库跑路了所以那么长时间不更新项目不发布教程,当然,这只是玩笑而已。

实际情况是 NanUI 0.7 基于 ChormiumFX 项目进行开发,刚刚发布 0.7 之后我就发现了框架自生存在有重大 BUG 而且是我没有能力处理的那种。

本想联系作者深入探讨下这个 BUG,谁知道 ChromiumFX 的项目似乎突然中止了,截至目前位置项目首页任然是走失状态。

因此我不得不考虑放弃 ChromiumFX 换一种内核,在甄选了 CefSharp 和 CefGlue 之后,还是觉得使用更接近 CEF 原生的 CefGlue 作为底层重置 NanUI 项目,并提升版本号到 0.8,这也是第一次在大项目版本几乎没有小版本更新的情况下直接升级大版本。

新版本的 NanUI 开发了大半年,踩了 CefGlue 各种坑,期间我太太还突发了非常不幸于的疾病,后来我也非常幸体验了人生第一次住院经历。还好,老天留下了我俩的狗命,估计将来还另做他用吧?,所以也希望各位及家人身体健康,经历了这次浩劫,突然觉得人只要能好好的,健健康康活着就行,其他的都不重要。

废话就这么多吧,下面进入正题。

NanUI 简介

NanUI 界面组件是一个开放源代码的 .NET / .NET Core 窗体应用程序(WinForms)界面组件。她适用于希望使用 HTML5/CSS3 等前端技术来构建 Windows 窗体应用程序用户界面的 .NET/.NET Core 开发人员。

NanUI 的渲染引擎 WinFormium 基于谷歌可嵌入的浏览器框架 Chromium Embedded Framework,因此用户可以使用各种前端技术 HTML5/CSS3/JavaScript 和框架 React/Vue/Angular/Blazor 设计和开发.NET 桌面应用程序的用户界面。

同时,WinFormium 特有的 JavaScript Bridge 可以方便简洁地实现浏览器端与 .NET 之间的通信和数据交换。

使用 NanUI 界面框架将为传统的 WinForm 应用程序的用户界面设计和开发工作带来无限种可能!

如果您想了解更多关于 NanUI 项目的信息,请移步NanUI 项目主页。

0.8 新增内容

内核替换

内核从 ChromiumFX 替换为 CefGlue,Chromim 的版本提升到了80.0.3987.163

承载窗体

重写承载窗体底层删除了没必要的 API 仅保留和框架有关的功能,并且拓展了无边框窗体的能力,新增了两种阴影效果以及一种边框效果。

窗体类型

原生样式

系统原生窗体样式与传统的 WinForm 应用程序界面一致,拥有系统样式的标题栏、边框和系统命令区域,类似在传统的 Form 控件上拖入 WebBrowser 控件并设置 Dock 属性为 Fill 时的样子一致。

无边框窗体

在无边框窗体样式中系统原生的标题栏和边框被隐藏,可以使用整个窗体区域来绘制您的应用程序界面。

Kiosk 模式

Kiosk 样式的窗体普遍用于需要全屏展示窗体内容的场景,例如:工控上位机界面、查询机界面、数据大屏幕等。

异形窗口

使用 Layered 样式允许创建异形、半透明窗体。类似各种大师、各种管家提供的加速球那种效果。

亚克力特效窗体

亚克力特效是 Windows 10 创意者更新版之后提供的新功能,它允许窗体的透明或半透明区域与桌面元素进行模糊混合,实现特殊的磨砂亚克力效果。与 Layered 样式相同,根据网页中透明或者半透明区域的设置,将实现特定效果的磨砂玻璃效果。

窗体特效

阴影效果

关闭

泛光

阴影

投影

边框效果

无边框

普通边框

圆角边框

以上示例均已提交至 GitHub 代码仓库,请异步https://github.com/XuanchenLin/NanUI-0.8-Examples获取各个示例的源码。

离屏渲染支持

引入了 Direct2D 技术,CEF 的离屏渲染得以实现,由此添加了两种新的承载窗体样式:异形样式窗体亚克力特效窗体

资源处理器

新增了一种资源处理器,能够从 ZIP 文件里加载资源。

其他

  • 对一些 API 的写法进行了优化。

  • 优化了自定义资源控制器的抽象类,使用更简单了。

  • 优化了 JavaScript 扩展的抽象类,同上,麻麻在也不用担心我不会注册 .NET 对象到 JavaScript 的代码了。

使用 NanUI 0.8 创建一个应用程序

引用 NanUI 包

使用 Visual Studio 的NuGet包管理器或者程序包管理器控制台来获取 NanUI 的程序集,根据项目的类型(.NET Framework 或者 .NET Core)将自动安装合适的程序集。

PM> Install-Package NetDimension.NanU

安装 NanUI 运行环境包。这个包主要包含了与CEF框架有关的文件,根据您项目架构(AnyCPU/x86/x64)的具体情况,此 NuGet 包将在编译时拷贝与架构对应的运行时文件到项目的输出目录中。

PM>  Install-Package NetDimension.NanUI.Runtime

如果您在国内 NuGet 访问较慢无法下载NetDimension.NanUI.Runtime包时,请您加QQ群521854872在群文件中下载NuGet 离线包 。

编码部分

在主窗体加载前初始化 NanUI 运行环境。

using NetDimension.NanUI;
class Program{static void Main() {// ... WinFormium.CreateRuntimeBuilder(env => {
env.CustomCefSettings(settings => {// 在此处设置 CEF 的相关参数 });
env.CustomCefCommandLineArguments(commandLine => {// 在此处指定 CEF 命令行参数 });
}, app => {// 指定启动窗体 app.UseMainWindow(context => new MainWindow()); }) .Build() .Run(); }}

编写窗体代码

using NetDimension.NanUI;using NetDimension.NanUI.HostWindow;
class MainWindow : Formium{// 设置窗体样式类型public override HostWindowType WindowType => HostWindowType.System;// 指定启动 Urlpublic override string StartUrl => "https://www.formium.net";
public MainWindow() {// 在此处设置窗口样式 Size = new System.Drawing.Size(1024, 768); }
protected override void OnReady() {// 在此处进行浏览器相关操作
//ShowDevTools();//ExecuteJavaScript("alert('Hello NanUI')"); }}

没有复杂的步骤!只需简单操作 NanUI 项目就可以顺利运行。

项目相关

仓库

以上涵盖了本次更新的大概内容,如果想了解更多信息,请移步 NanUI 项目仓库首页。

  • https://github.com/NetDimension/NanUI

  • https://gitee.com/linxuanchen/NanUI/

目前 NanUI 0.8 版源码暂时没有放出,等黑测一段时间收集反馈修改后会提交至上面两个仓库。

文档

NanUI 提供了大部分功能的文档,使用这些文档将有助于轻松快速的开始使用 NanUI 进行开发。

  • NanUI 0.8 文档 @ GitHub

  • NanUI 0.8 文档 @ Gitee

目前 NanUI 文档正在逐步完善,如果有朋友愿意帮助翻译不同语言的文档,请与我取得联系或者直接提交其他语言文档的 Pull Request 即可,感激不敬!

开源协议

NanUI 项目基于 LGPL-3.0 开源协议开放项目源代码。本项目版权由项目发起人、开发者林选臣所有

依照 LGPL-3.0 协议规定:

  1. 您可以在任何商业软件中引用 NanUI 的二进制库而无需支付任何与版权相关的费用;

  2. 如果您的项目使用并修改了 NanUI 的源代码,那么您的项目也需要使用 LGPL 协议进行开源,并且在您的衍生项目中保留 NanUI 的版权信息:Powered by NanUI

  3. 如果您需要在非开源的应用程序中使用 NanUI 的源代码,为了保障您的合法权益,请考虑向项目作者购买商业授权。

关于 LGPL-3.0 协议的具体内容请参考此协议详细副本。此外,NanUI 项目基于诸多开源项目进行构建,相关的项目请查阅第三方授权协议


浏览 71
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报