97 lines
3.4 KiB
Markdown
97 lines
3.4 KiB
Markdown
![]() |
# 快速开始
|
|||
|
---
|
|||
|
- SunnyUI多页面框架由框架和页面构成。
|
|||
|
最基本的实现是框架(IFrame)由UIForm实现,页面由(UIPage)实现。
|
|||
|
在UIForm放置一个UITabControl,将多个UIPage放置于UIForm的UITabControl的TabPage内。
|
|||
|
通过PageIndex(正整数,唯一)进行页面的关联和切换。
|
|||
|
听起来有点复杂,其实主要就IFrame接口的三个函数:AddPage,ExistPage,SelectPage。
|
|||
|
|
|||
|
- 最简单的Demo实现见:窗体 - Frames - 自定义模板
|
|||
|

|
|||
|
|
|||
|
-
|
|||
|
|
|||
|
- 新建项目,安装SunnyUI
|
|||
|
Nuget安装是Visual Studio引用控件包最方便快捷的方法。
|
|||
|
|
|||
|
安装方法一:通过PM命令安装:
|
|||
|
PM>`Install-Package SunnyUI`
|
|||
|
|
|||
|
安装方法二:通过Nuget包管理器搜索SunnyUI安装:
|
|||
|

|
|||
|
|
|||
|
|
|||
|
|
|||
|
- 新建框架:
|
|||
|

|
|||
|
|
|||
|
修改:把Form修改成UIForm,并且 using Sunny.UI;
|
|||
|

|
|||
|
|
|||
|
这时切换到窗体,窗体已经变为UIForm:
|
|||
|

|
|||
|
|
|||
|
**下一步的操作非常重要:**
|
|||
|
把窗体的AutoScaleMode从Font设置为None,否则可能出现因为屏幕分辨率而导致的窗体变形。
|
|||
|

|
|||
|
|
|||
|
更改窗体名称为FCustomMain,并在窗体上放一个UITabControl控件,设置窗体的MainTabControl属性进行关联。
|
|||
|

|
|||
|
|
|||
|
|
|||
|
|
|||
|
- 新建页面:
|
|||
|

|
|||
|
|
|||
|
修改:把Form修改成UIPage,并且 using Sunny.UI;
|
|||
|

|
|||
|
|
|||
|
同样,把页面的AutoScaleMode从Font设置为None,否则可能出现因为屏幕分辨率而导致的窗体变形。
|
|||
|
依次建立三个页面:
|
|||
|
FPage1,其属性PageIndex为1001,切记要设置PageIndex,就靠这个做关联的,正整数,唯一
|
|||
|

|
|||
|
|
|||
|
FPage2,其属性PageIndex为1002
|
|||
|
FPage3,其属性PageIndex为1003
|
|||
|
|
|||
|
- 框架页面关联
|
|||
|
FCustomMain上放置三个UIButton,命名为uiButton1,uiButton2,uiButton3,按钮事件如下:
|
|||
|
~~~
|
|||
|
private void uiButton1_Click(object sender, System.EventArgs e)
|
|||
|
{
|
|||
|
if (!ExistPage(1001))
|
|||
|
{
|
|||
|
AddPage(new FPage1());
|
|||
|
}
|
|||
|
|
|||
|
SelectPage(1001);
|
|||
|
}
|
|||
|
|
|||
|
private void uiButton2_Click(object sender, System.EventArgs e)
|
|||
|
{
|
|||
|
if (!ExistPage(1002))
|
|||
|
{
|
|||
|
AddPage(new FPage2());
|
|||
|
}
|
|||
|
|
|||
|
SelectPage(1002);
|
|||
|
}
|
|||
|
|
|||
|
private void uiButton3_Click(object sender, System.EventArgs e)
|
|||
|
{
|
|||
|
if (!ExistPage(1003))
|
|||
|
{
|
|||
|
AddPage(new FPage3());
|
|||
|
}
|
|||
|
|
|||
|
SelectPage(1003);
|
|||
|
}
|
|||
|
~~~
|
|||
|
这样,一个多页面框架就实现了,点击三个按钮可以切换页面显示。
|
|||
|
|
|||
|
- 其他示例
|
|||
|
可以参照:窗体 - Frames - 内置模板
|
|||
|
参考七种内置模板的示例,以及SunnyUI.Demo.exe的FMain的示例。
|
|||
|

|
|||
|
|
|||
|
相对而言,内置模板方便,但只能按模板样式使用,而自定义模板的灵活性更高,参考代码示例。
|