学习记录(4)侧边导航栏功能的编写 WeifenLuo.WinFormsUI.Docking的使用与学习

(1) 侧边导航栏的展示

先看下使用效果,左侧栏可以悬停与隐藏。

侧边导航栏HTML5 侧边导航栏怎么做_侧边导航栏HTML5

(2) 设计思路:

考虑导航栏作为快捷登陆的入口:即点击不同的按钮就能进入跳转进入不同的功能界面

(3) 实现方法:

分为三个步骤:第一步,在主界面引入控件。第二步设置导航页与button信息。第三步,编写导航页跳转委托

第一步 主界面引入控件

  1. 添加dll文件引用

侧边导航栏HTML5 侧边导航栏怎么做_导航页_02

  1. 在需要部署页面上使用工具箱添加DockPannel控件。

我修改了DockPannel的Name 为 DockMain。修改Dock方式为Fill,填充整个页面(该控件不会覆盖到窗体最下面的状态栏)

第二步 设置导航页与button信息

  1. 新建一个名为FrmNavi的窗体文件,此时修改FrmNavi的类继承
  2. 将窗体在设计视图中向左收缩,先大致收缩为导航页大小(后面会详细讲解布局)。然后添加button控件

3.需要修改ShowHint属性为DockLeft,禁止关闭窗体。

侧边导航栏HTML5 侧边导航栏怎么做_导航页_03

  1. button需要设置的参数如下

经过以上配置以后,图片会在文字之上,文字居中对齐,并且button会没有边框(flat)。

第三步,编写导航页跳转委托

跳转功能(当点击导航页的button,在主界面打开对应的功能界面):用第一个button"集中监控"举例。使用委托的方法。

首先,在主程序界面FrmMain.cs中创建了导航页FrmNavi.cs 的实例对象frmNavi。

  1. 第一步 在FrmNavi.cs 中的命名控件中先声明委托OpenFormDelegate
  2. 第二步 在FrmNavi.cs 的FrmNavi类中创建委托对象 OpenForm
  3. 第三步 在FrmMain.cs文件中创建实现委托的方法 OpenFormMethod(string formName)
  4. 第四步 在FrmMain.cs文件中将frmNavi的OpenForm绑定OpenFormMethod方法
  5. 第五步 在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居于正中间。