1 简介
- SunnyUI官网
- 基于Winform的开源的控件库,用它可以快速开发好看的windows应用程序
- 网上关于该控件库的说明较少,所以我准备写点东西留给后人
- 一些简单的如Button、Label、CheckBox、RadioButton等控件大家自己试试吧,有点Winform基础的同学应该都会使用。我来说说有点难弄的,又不好找到资料的组件。
2 安装
可以参考官网的教程
3 布局模式
3.1 有哪些布局
-
查看官方例程,有7种布局模式
-
以下是其中布局的图片
-
UIAsideHeaderMainFrame
-
UIAsideHeaderMainFooterFrame
-
UIAsideMainFrame
-
UIHeaderAsideMainFrame
-
UIHeaderAsideMainFooterFrame
-
UIHeaderMainFrame
-
UIHeaderMainFooterFrame
3.2 如何使用
- 要使用这个布局模式,需要让Form布局类继承其中一个布局
- 注意,SunnyUI定义的是以下7个布局
- UIAsideHeaderMainFrame
- UIAsideHeaderMainFooterFrame
- UIAsideMainFrame
- UIHeaderAsideMainFrame
- UIHeaderAsideMainFooterFrame
- UIHeaderMainFrame
- UIHeaderMainFooterFrame
using Sunny.UI;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
namespace WindowsFormsApp1
{
public partial class Form1 : UIHeaderMainFrame
{
public Form1()
{
InitializeComponent();
}
}
}
3.3 子布局
- 我们需要用其他的布局填充3.2中的布局
- 有两种子布局:
- UIPage和 UITitlePage
- 这两种界面用于放入 2.2 的布局当中,UIPage不带标题栏,UITitilePage带标题栏。
- 你需要新创建一个布局类,然后继承其中一种布局
using Sunny.UI;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
namespace WindowsFormsApp1.Forms
{
public partial class FAside : UIPage
{
public FAside()
{
InitializeComponent();
}
}
}
3.4 如何将3.3的子布局导入到3.2的布局中?
- 以UIHeaderAsideMainFrame举例
- Header指的是上面的界面,Aside是左边的界面,Main是右边的主界面
- 在设计界面里
- 你可以直接对Header进行布局,也就拖拽控件到Header界面中
- 而Main布局可用一行代码解决。
- Aside布局,有点麻烦
- 比如,我们想要这种界面:
- 我们需要做以下事情
- Header布局:这个可以直接在Form的设计中解决
- Main布局:可以用一行代码解决
- Aside布局:可以用一行代码解决
- 下面这个是主布局文件中的代码,通过两行代码为Aside布局制定了TreeNode,为Main布局指定了对应的布局类
using Sunny.UI;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using WindowsFormsApp1.Forms;
namespace WindowsFormsApp1
{
public partial class Form1 : UIHeaderAsideMainFrame
{
public Form1()
{
InitializeComponent();
int pageIndex = 1000;
// Aside创建Controls节点,并给对应的page标号为pageIndex
Aside.CreateNode("Controls", 61451, pageIndex);
// 添加Main布局的布局类FAside
// FAside需要继承UIPage或者 UITitlePage
AddPage(new FAside(), ++pageIndex);
}
}
}
3.5 Aside与Main关联
- 需要实现的效果:
- 左侧的Main1和Main2,可以控制Main界面的切换
using Sunny.UI;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using WindowsFormsApp1.Forms;
namespace WindowsFormsApp1
{
public partial class Form1 : UIHeaderAsideMainFrame
{
public Form1()
{
InitializeComponent();
int pageIndex = 1000;
// Aside创建Controls节点,并给对应的page标号为pageIndex
// FMain1需要继承UIPage或者 UITitlePage
// 将Aside和指定的Main对应关联
//TreeNode treeNode = new TreeNode();
UIPage page = AddPage(new FMain1(), pageIndex);
TreeNode treeNode = Aside.CreateNode(page, pageIndex + 10000, pageIndex);
treeNode.Text = "Main1";
// 需要将修改后的TreeNode重新装入
Aside.SetNodeItem(treeNode, new NavMenuItem(page));
pageIndex = 2000;
// Aside创建Controls节点,并给对应的page标号为pageIndex
page = AddPage(new FMain2(), pageIndex);
treeNode = Aside.CreateNode(page, pageIndex + 10000, pageIndex);
treeNode.Text = "Main2";
Aside.SetNodeItem(treeNode, new NavMenuItem(page));
}
}
}