学习记录(4)侧边导航栏功能的编写 WeifenLuo.WinFormsUI.Docking的使用与学习
(1) 侧边导航栏的展示
先看下使用效果,左侧栏可以悬停与隐藏。
(2) 设计思路:
考虑导航栏作为快捷登陆的入口:即点击不同的按钮就能进入跳转进入不同的功能界面
(3) 实现方法:
分为三个步骤:第一步,在主界面引入控件。第二步设置导航页与button信息。第三步,编写导航页跳转委托
第一步 主界面引入控件
- 添加dll文件引用
- 在需要部署页面上使用工具箱添加DockPannel控件。
我修改了DockPannel的Name 为 DockMain。修改Dock方式为Fill,填充整个页面(该控件不会覆盖到窗体最下面的状态栏)
第二步 设置导航页与button信息
- 新建一个名为FrmNavi的窗体文件,此时修改FrmNavi的类继承。
- 将窗体在设计视图中向左收缩,先大致收缩为导航页大小(后面会详细讲解布局)。然后添加button控件
3.需要修改ShowHint属性为DockLeft,禁止关闭窗体。
- button需要设置的参数如下
经过以上配置以后,图片会在文字之上,文字居中对齐,并且button会没有边框(flat)。
第三步,编写导航页跳转委托
跳转功能(当点击导航页的button,在主界面打开对应的功能界面):用第一个button"集中监控"举例。使用委托的方法。
首先,在主程序界面FrmMain.cs中创建了导航页FrmNavi.cs 的实例对象frmNavi。
- 第一步 在FrmNavi.cs 中的命名控件中先声明委托OpenFormDelegate
- 第二步 在FrmNavi.cs 的FrmNavi类中创建委托对象 OpenForm
- 第三步 在FrmMain.cs文件中创建实现委托的方法 OpenFormMethod(string formName)
- 第四步 在FrmMain.cs文件中将frmNavi的OpenForm绑定OpenFormMethod方法
- 第五步 在FrmNavi.cs的button_click事件中触发 OpenForm方法,就将在FrmMain中打开对应的窗体
具体代码如下:
FrmNavi.cs
//第一步:声明委托
public delegate void OpenFormDelegate(string frmName);
public partial class FrmNavi : DockContent
{
//第二步:创建委托对象
public OpenFormDelegate OpenForm;
public FrmNavi()
{
InitializeComponent();
}
private void btn_Monitor_Click(object sender, EventArgs e)
{
//第五步:调用委托对象
OpenForm(((Button)sender).Text);
}
}
FrmMain .cs
private void FrmMain_Load(object sender, EventArgs e)
{
//初始化相关信息
InitialParam();
FrmNavi frmNavi = new FrmNavi();
//第四步:绑定委托
frmNavi.OpenForm = this.OpenFormMethod;
frmNavi.Show(DockMain);
//设置居左显示的宽度像素
frmNavi.DockPanel.DockLeftPortion = 110;
//设置自动隐藏时的比例 0.086=110/1280
frmNavi.AutoHidePortion = 0.086;
OpenFormMethod("集中监控");
}
//第三步:创建委托实现的方法
private void OpenFormMethod(string formName)
{
//避免重复打开
DockContent frm = FindDockContent(formName);
if (frm != null)
{
frm.BringToFront();
frm.Activate();
return;
}
switch (formName)
{
case "集中监控":
new FrmMonitor().Show(DockMain);
break;
default:
break;
}
}
(4) 修改页面大小与窗体错放功能(仅仅让窗体控件能够保持居中,没有重绘控件)
小tips:多使用Dock与Pannel控件。一定要多注意,想要嵌套的父容器是谁,有时候确实会出现父容器错误的情况,这时候需要手动的去剪切出来再粘贴回去。
需求:修改导航页与功能页的大小,使其可以美观的显示。
辅助工具:截图工具(用于计算窗体的像素大小)
第一步:先确定当前软件需要运行时候的大小(禁止当前窗体的最大化等功能)来避免主窗体的变形。使用截图工具。这时确定大小为 1280, 768
第二步:思考下导航页需要设置多少大小合适(高度是:菜单栏之下到状态栏之上的距离)
大概在120,650的数值。将其设置到窗体的长与宽中。
第三步:修改导航页的初始化时的大小
在FrmMain中添加以下代码:
//设置居左显示的宽度像素
frmNavi.DockPanel.DockLeftPortion = 110;
//设置自动隐藏时的比例 0.086=110/1280
frmNavi.AutoHidePortion = 0.086;
第四步:这里使用“集中监控”界面进行演示
(思想:导航页进行隐藏的时候,原来最靠右的控件还能正常显示;如果导航页显示,那么主窗体大小不变,原先最靠右的控件就有可能被遮挡。)
先在页面中加入pannel作为其他控件的父容器,在发生窗体大小变动的事件的时候,让pannel的位置根据窗体大小的变动进行移动,那么就让控件始终处于窗体的中心位置。
首先确保pannel就是窗体中心位置,然后移动原有的控件使其位于pannel的中间。(通过窗体大小,pannel大小与位置进行计算)
然后,编写FrmMonitor_Resize事件。
案例如下:FrmMonitor的大小为1264, 650。pannel的大小为1154, 650。那么应当设置pannel的位置为55, 0。(1264-1154)/2=55。
编写代码:
private void FrmMonitor_Resize(object sender, EventArgs e)
{
this.MainPanel.Location = new Point((this.Width - this.MainPanel.Width) / 2, this.MainPanel.Location.Y);
}
这样位置也能保证MainPanel居于正中间。