C#仿QQ面板的简单实现

首先来看看最终效果:

下边我们来一步一步实现:

首先新建一个C# windows application,并在界面上添加一个Pannel控件,拉成合适的形状,如下图:

我们要做的,就是将Button加入到Pannel控件中,并根据鼠标点击移动Button和添加子Button.

第一步,定义一些必要的变量和属性:

 

         private   string [] _Module;
         private   string [,] _ChildModule;
         private   int  _ModuleButtonHeight  =   50 ;
         private   int  _ChildButtonHeight  =   30 ;

         ///   <summary>
         ///  初始模块
         ///   </summary>
         public   string [] Module
        {
             get  {  return  _Module; }
             set  { _Module  =  value; }
        }

         ///   <summary>
         ///  初始子模块
         ///   </summary>
         public   string [,] ChildModule
        {
             get  {  return  _ChildModule; }
             set  { _ChildModule  =  value; }
        }

 

其中Module数组和ChildModule数组分别是第一层菜单和第二层菜单的Button的Name,_ModuleButtonHeight和_ChildButtonHeight是第一层和第二层菜单的Height.

定义好相关变量和属性了.我们就开始往Panel里面添加东西了.在Form1_Load里面加入下边的代码:

 

         private   void  Form1_Load( object  sender, EventArgs e)
        {
             this .panel1.BorderStyle  =  BorderStyle.FixedSingle;
             // 初始化
            Module  =   new   string [] {  " 初始模块1 " ,  " 初始模块2 " ,  " 初始模块3 "  };
            ChildModule  =   new   string [ 3 ,  2 ];
            ChildModule[ 0 ,  0 ]  =   " 子模块1 " ;
            ChildModule[ 0 ,  1 ]  =   " 子模块2 " ;
            ChildModule[ 1 ,  0 ]  =   " 子模块3 " ;
            ChildModule[ 1 ,  1 ]  =   " 子模块4 " ;
            ChildModule[ 2 ,  0 ]  =   " 子模块5 " ;
            ChildModule[ 2 ,  1 ]  =   "" ;

             for  ( int  i  =   0 ; i  <  Module.Length; i ++ )
            {
                 // 增加模块Button
                Button btn  =   new  Button();
                btn.FlatStyle  =  FlatStyle.Flat;
                btn.Width  =   this .panel1.Width;
                btn.Height  =  _ModuleButtonHeight;
                btn.Name  =   string .Format( " Button{0} " , i.ToString());
                btn.Text  =  Module[i];
                btn.Top  =  _ModuleButtonHeight  *  i;
                btn.Click  +=   new  EventHandler(btn_Click);
                 this .panel1.Controls.Add(btn);
            }
        }

 

上边代码是根据Module定义的数目往Pannel里面塞Button,这些Button就是第一层的菜单项.当我们点击这些Button的时候,就要显示子菜单项.所以当点击Button的时候触发的事件需要做如下处理:

 

         private   void  btn_Click( object  sender, EventArgs e)
        {
             // 标志是否找到用户点击的Button
             bool  findOutStatus  =   false ;

             // 清除上一次操作加载的子菜单项
             for  ( int  i  =   0 ; i  <   this .panel1.Controls.Count; i ++ )
            {
                 if  ( this .panel1.Controls[i].GetType().Name  ==   " Panel " )
                {
                     this .panel1.Controls.RemoveAt(i);
                }
            }

             for  ( int  i  =   0 ; i  <   this .panel1.Controls.Count; i ++ )
            {
                 if  ( this .panel1.Controls[i].GetType().Name  ==   " Button " )
                {
                     // 重新定义各个button位置
                     if  ( ! findOutStatus)
                    {
                         this .panel1.Controls[i].Top  =  _ModuleButtonHeight  *  i;
                    }
                     else
                    {
                         this .panel1.Controls[i].Top  =   this .panel1.Height  -  (_ModuleButtonHeight  *  (Module.Length  -  i));
                    }

                     // 找到所点击的Button,在其下加载子菜单
                     if  ( this .panel1.Controls[i].Name  ==  ((Button)sender).Name)
                    {
                        findOutStatus  =   true ;

                        Panel panel  =   new  Panel();
                        panel.BackColor  =  Color.AliceBlue;
                        panel.Top  =  _ModuleButtonHeight  *  (i  +   1 );
                        panel.Width  =   this .panel1.Width;
                        panel.Height  =   this .panel1.Height  -  _ModuleButtonHeight  *  Module.Length;
                         this .panel1.Controls.Add(panel);

                         for  ( int  j  =   0 ; j  <  ChildModule.Length  /  Module.Length; j ++ )
                        {
                             if  ( ! string .IsNullOrEmpty(ChildModule[i, j]))
                            {
                                Button btn  =   new  Button();
                                btn.FlatStyle  =  FlatStyle.Flat;
                                btn.Top  =  _ChildButtonHeight  *  j;
                                btn.Width  =   this .panel1.Width;
                                btn.Height  =  _ChildButtonHeight;
                                btn.Name  =   string .Format( " ChildButton{0}_{1} " , i.ToString(), j.ToString());
                                btn.Text  =  ChildModule[i, j];
                                btn.Click  +=   new  EventHandler(btnChild_Click);
                                panel.Controls.Add(btn);
                            }
                        }
                    }
                }
            }
        }

 

点击第一层菜单项,就根据点击的Button相应调整各个Button的位置,并在其下填充一个pannel控件,在这个pannel控件里面填充子菜单项.

当填充完成的时候,就实现了类似QQ面板的功能了.在这个Click事件里面更可以加上声音效果,或者对Button和Form贴一些图片.就更像QQ面板.

当点击子菜单,则会触发相应事件:

 

         private   void  btnChild_Click( object  sender, EventArgs e)
        {
            MessageBox.Show( string .Format( " 你点击了 \ " { 0 }\ "  按钮! " , ((Button)sender).Name),  " 系统提示 " , MessageBoxButtons.OK, MessageBoxIcon.Information);
        }

 

完整源代码下载: http://files.cnblogs.com/KenBlove/QQPanel.7z

(本代码修改自网络上相关代码)

转载于:https://www.cnblogs.com/KenBlove/archive/2008/09/27/1300938.html