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

1 简介

  • SunnyUI官网
  • 基于Winform的开源的控件库,用它可以快速开发好看的windows应用程序
  • 网上关于该控件库的说明较少,所以我准备写点东西留给后人
  • 一些简单的如Button、Label、CheckBox、RadioButton等控件大家自己试试吧,有点Winform基础的同学应该都会使用。我来说说有点难弄的,又不好找到资料的组件。
    SunnyUI 学习1.1——简介与界面布局的使用

2 安装

可以参考官网的教程

3 布局模式

3.1 有哪些布局

  • 查看官方例程,有7种布局模式
    SunnyUI 学习1.1——简介与界面布局的使用

  • 以下是其中布局的图片

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

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

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

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

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

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

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

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布局,有点麻烦
  • 比如,我们想要这种界面:
    SunnyUI 学习1.1——简介与界面布局的使用
  • 我们需要做以下事情
    • 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界面的切换
    SunnyUI 学习1.1——简介与界面布局的使用
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));
        }
    }
}
上一篇:5月31日HTML5


下一篇:滑动菜单栏 ( JavaScript 和 React 实现 )