SunnyUI 学习1.1——简介与界面布局的使用

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));
        }
    }
}