C# WinForm开发系列之如何使用panel控件制作左侧导航菜单

大家好，又见面了，我是你们的朋友全栈君。

之前需要写一个C#的左侧导航菜单控件，想了许久，最终选择了使用paenl控件来实现这一功能。决定和大家分享一下，

初步接触C#，欢迎多多指教,不胜感激！

首先，我的思路分为以下几步：

一.使用vs编辑工具创建一个导航菜单控件;

如图1所示：

图1

二.在菜单控件上布局你的导航菜单控件的样式;

其结构如图2所示，(我是通过5个panel控件和两个label控件组成)：

图2

控件制作效果如图3所示（需要注意的是将panel1,panel3,panel4的AutoSize属性设置为true,panel1,panel5的Dock属性设置为Top）：

图3

三.代码实现菜单的循环生成（这其中主要有两个关键点：一是控件的复制，二是实现菜单点击事件的绑定和实现）：

1.首先，我们可以先不考虑菜单数据来源，直接定义菜单的一级和二级数据，如：

 string[] arr;
 string[] childAry;
 arr = new string[] { “系统管理1”, “系统管理2”, “系统管理3”, “系统管理4”, “系统管理5”, };
 childAry = new string[] { “列表查看”, “添加页面”, “其他页面” };

2.然后我们首先循环一级菜单，每次循环需要复制一次panel1及其子控件并将一级菜单的菜单名赋值给当前复制的label控件。

与此同时，在每次一级菜单循环中都需要实现二级菜单的循环，并实现panel3及其子控件的复制和二级菜单名的赋值;代码如下

所示（ControlHelper为复制当前控件及其子控件的类）:

 foreach (string menuAry in arr)
            {

                Control panel10 = ControlHelper.Clone(this.panel1, true) as Control;
                Control cp_ptLabel1 = panel10.Controls.Find(ptLabel1.Name, true)[0];
                Control cp_panel4 = panel10.Controls.Find(panel4.Name, true)[0];
                Control cp_panel3 = panel10.Controls.Find(panel3.Name, true)[0];

                cp_panel4.Controls.Clear();
                cp_ptLabel1.Text = menuAry;
                this.Controls.Add(panel10);
                panel10.BringToFront();

                panel10.Controls.Find(panel3.Name, true)[0].Visible = false;

                foreach (string childmenuary in childAry)
                {

                    Control cp_panel5 = ControlHelper.Clone(this.panel5, true) as Control;
                    Control cp_ptlabel2 = cp_panel5.Controls.Find(ptLabel2.Name, true)[0];
                    cp_ptlabel2.Text = childmenuary;
                    cp_panel4.Controls.Add(cp_panel5);
                    cp_panel5.BringToFront();
                }

}

注意:在循环生成菜单后需要利用控件的Visible进行隐藏初始菜单控件菜单项。

3.菜单点击事件的绑定（实现点击一级菜单时二级菜单的显示隐藏和二级点击时的页面展示）

 //    //一级菜单点击事件
               cp_ptLabel1.Click += delegate
               {

                  cp_panel3.Visible = !cp_panel3.Visible;
                };

            panel10.Controls.Find(panel2.Name, true)[0].Click += delegate
              {

                   cp_panel3.Visible = !cp_panel3.Visible;
               };

//    //一级菜单点击事件

//二级菜单点击事件
                    cp_ptlabel2.Click += delegate
                    {

                        int i = childAry.ToList().IndexOf(childmenuary);
                        string tName = arr1[i];
                        //方法一
                        Childmenuname.OnClick(tName);
                    };
                    cp_panel5.Click += delegate
                    {

                        int i = childAry.ToList().IndexOf(childmenuary);
                        string tName = arr1[i];
                        //方法一
                        Childmenuname.OnClick(tName);
                    };
//二级菜单点击事件

下面是点击事件的回调方法:

 //回调方法
        public interface ChildMenuName 
        {

            void OnClick(string name);
        }
        private ChildMenuName Childmenuname;

        public void SetName(ChildMenuName Childmenuname)
        {

            this.Childmenuname = Childmenuname;
        }
 //回调方法

4.关于点击在一个窗口左侧的导航菜单时，如何在该窗体内显示子窗体的问题.

可以在该窗体创建创建一个panel控件，在该panel内显示子窗体,如下:

UserForm UserForm = new UserForm();

//指示窗体显示是否为顶级窗口
UserForm.TopLevel = false;
this.pn_panel1.Controls.Add(UserForm);
UserForm.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
UserForm.Dock = System.Windows.Forms.DockStyle.Fill;
UserForm.Show();

三.下面是我把整个左侧导航菜单代码进行封装后的代码和调用代码：

1.调用代码（继承接口并实现方法和绑定需要的数据即可实现导航菜单的功能）：

public partial class FormMain : Form, MenuTest.FormMain_Menu.ChildMenuName
{

        private DataTable mTable = null;     
        public FormMain()
        {

            InitializeComponent();
            this.LoadMenu();
            this.formMain_Menu2.SetName(this);
        }
        private void LoadMenu()
        {

                this.formMain_Menu2.MenuTable = null;
                this.formMain_Menu2.MenuClass = “MenuClass”;
                this.formMain_Menu2.ParentMenuList = “MenuPID”;
                this.formMain_Menu2.ChildMenuList = “MenuID”;
                this.formMain_Menu2.MenuName = “MenuName”;
                this.formMain_Menu2.MenuTable = mTable;
        }

        void FormMain_Menu.ChildMenuName.OnClick(string formName)
        {

            this.pn_panel1.Controls.Clear();
            Form frm = FormOpenHelper.ShowForm(formName);
            frm.Show();
            this.pn_panel1.Controls.Add(frm);                   
        }
}

2.封装后的导航菜单控件代码：

这里就省略了。。。。。。

最终效果如下图：