学习记录（4） 侧边导航栏功能的编写 WeifenLuo.WinFormsUI.Docking的使用与学习
学习记录（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居于正中间。
