在C#中轻松制作仿OutLook的界面

丽水市汽车运输集团有限公司信息中心 苟安廷

不知道从什么时候开始，许多软件都开始模仿OutLook界面，最典型的莫过于大家经常使用的QQ了，在网上搜索了好久，都没有找到几个满意的控件，干脆，自己写了一个，非常简单实用，特拿出来共享。

新建一个项目，不妨取名为MyOutLookFace吧，在上面放一个Panel控件用作容器，取名为：panFunMain，设置Dock属性为Left（或Righ），设置BorderStyle属性为Fixed3D，添加一个ImageList控件，设置其ImageSize为“32,32”，并添加几个图标给它。

在panFunMain中添加n个按钮（本例中n=3，用于显示有几组）和n个ListView控件（显示某组中具体内容），都用其默认的名字，注意ListView控件个数必须和按钮控件个数相同，都为n，设置各ListView控件的Lage imageList属性为刚才添加的ImageList控件，选中第一个ListView控件，在属性窗口中，选择items，并点右边的小按钮“ ”，将弹出一个对话框，在这里添加几个成员，并指定Text属性和ImageIndex属性，同样，为第二、三个ListView指定Items成员。

为了实现自动隐藏，再添加一个计时器，最后布局如下：

上面的插操作都是比较基本的，如不特殊说明，都使用其默认值，这里不再赘述。

本文最后还会提到播放声音的方法，为合理利用资源，必须修改文件输出路径，选择菜单“项目”→“属性”，会弹出如下一个对话框，在“配置(C)”后面的组合框中选择“所有配置”，然后设置“配置属性”的“生成”项，在右边的输出路径中填上“output/”，这样，无论是编译成release文件还是debug文件，输出的可执行文件都会放到当前项目中的output文件夹下（该文件会自动创建）。

至此，界面布置基本完成，切换到代码窗口，添加几个变量：

         /// <summary>

         /// 记录当前功能面板中用到的按钮

         /// </summary>

         private ArrayList ArrFunButton=new ArrayList();

 

         /// <summary>

         /// 记录当前功能面板中用到的listview

         /// </summary>

         private ArrayList ArrFunListView=new ArrayList();

         /// <summary>

         /// 功能面板的宽度

         /// </summary>

         private int m_nPanFunWidth=100;

         //功能面板隐藏后的宽度

         private int m_nPanFunHideWidth=2;

当我们单击一个按钮后，必须显示该按钮对应的ListView，并调整该按钮的位置，故手工写一个函数：

 

              //功能按钮点击后的特效

         private void btnFun_Click(object sender, System.EventArgs e)

         {

              Button btnNow=sender as Button;

              if(btnNow==null)

                   return;

 

              //单击的按钮在数组中的索引

              int nIndex=this.ArrFunButton.IndexOf(btnNow);

              //将该按钮前面的置顶

              for(int i=1;i<=nIndex;i++)

              {

                   Button btn=ArrFunButton[i] as Button;

                   btn.Top=((Button)ArrFunButton[i-1]).Bottom;

                   btn.Anchor=System.Windows.Forms.AnchorStyles.Left |System.Windows.Forms.AnchorStyles.Top;

              }

              //将下面的按钮下移

              for(int i=ArrFunButton.Count-1;i>nIndex;i--)

              {

                   Button btn=ArrFunButton[i] as Button;

                   if(i==ArrFunButton.Count-1)//最后一个

                       btn.Top=this.panFunMain.Height-btn.Height-4;

                   else

                       btn.Top=((Button)ArrFunButton[i+1]).Top-btn.Height;

                   btn.Anchor=System.Windows.Forms.AnchorStyles.Left |System.Windows.Forms.AnchorStyles.Bottom;

 

              }

 

              //显示对应的listview

              for(int i=0;i<ArrFunButton.Count;i++)

              {

                   ListView lsv=ArrFunListView[i] as ListView;

                   //当前按钮对应的ListView

                   if(i==nIndex)

                   {

                       lsv.Left=0;

                       lsv.Width=btnNow.Width;

                       lsv.Top=btnNow.Bottom;

 

                       if(nIndex==ArrFunListView.Count-1)//最后一个

                            lsv.Height=this.panFunMain.Height-btnNow.Bottom-4;

                       else

                            lsv.Height=(ArrFunButton[i+1] as Button).Top-btnNow.Bottom;

                       //将当前ListView显示出来

                       if(!lsv.Visible)

                            lsv.Visible=true;

                   }

                   else //隐藏其他listview

                   {

                       if(lsv.Visible)

                            lsv.Visible=false;

                   }

              }

 

         }

当我们双击ListView的图标时，应用程序会根据你双击的具体项做相应处理，如QQ中弹出“发送消息”的对话框，我们这里只是简单地提示一句你双击的是哪一项，为此，也是手工添加一个函数：

         //双击listview后根据当前项执行操作

         private void lsvFun_DoubleClick(object sender, System.EventArgs e)

         {

              //双击后执行一个功能

              ListView lsv=sender as ListView;

              if(lsv==null)

                   return;

              if(lsv.SelectedItems.Count==0)

                   return;

              ListViewItem item=lsv.SelectedItems[0];

              MessageBox.Show("你双击了："+item.Text);

         }

本例中设置自动隐藏功能，隐藏后（宽度为nPanFunHideWidth），如果鼠标在本工具条（也就是本例中的panFunMain中的全部内容）上移动时，重新将工具条显示出来，因此，手工添加一个鼠标移动事件响应函数：

         private void FunListView_MouseMove(object sender, System.Windows.Forms.MouseEventArgs e)

         {

              if(this.panFunMain.Width==m_nPanFunHideWidth)

              {

                   this.panFunMain.Width=m_nPanFunWidth;

                   this.timer1.Enabled=true;

              }

      }

为了达到自动隐藏的目的，我们设置了一个记时器，不断检测当前鼠标位置，如果不在工具条中，自将工具宽带设置为nPanFunHideWidth，起到隐藏的作用，当然，不能设置为0，否则鼠标移不上去就再也显示不出来了。添加计时器的响应代码：

         private void timer1_Tick(object sender, System.EventArgs e)

         {

              //当前功能面板显示出来

              if(this.panFunMain.Width==m_nPanFunWidth)

              {

                   //检查光标位置是否在面板内

                   Point p1=this.panFunMain.PointToScreen(new Point(0,0));

                   Point p2=this.panFunMain.PointToScreen(new Point(panFunMain.Right,panFunMain.Bottom));

                   Point pCur=Cursor.Position;//当前鼠标光标位置

                   if(pCur.X<p1.X || pCur.X>p2.X || pCur.Y<p1.Y || pCur.Y>p2.Y)

                   {

                       //隐藏panfunmain

                       this.panFunMain.Width=m_nPanFunHideWidth;

                       this.timer1.Enabled=false;

                   }

              }//if

      }

前面都是准备工作，添加一个函数，将上面的代码同具体的按钮和Listview控件组合起来：

                       /// <summary>

         /// 初始化功能面板

         /// </summary>

         private void InitPanFun()

         {

              //设置功能面板的位置和宽带

              this.panFunMain.Width=m_nPanFunWidth;

              this.panFunMain.Dock=DockStyle.Left;

              //记录功能按钮

              ArrFunButton.Add(this.button1);

              ArrFunButton.Add(this.button2);

              ArrFunButton.Add(this.button3);

 

              //记录功能面板中的listview,注意要和上面的button对应

              ArrFunListView.Add(this.listView1);

              ArrFunListView.Add(this.listView2);

              ArrFunListView.Add(this.listView3);

 

              int nCount=ArrFunButton.Count;

              //布置各功能按钮的位置和ListView的属性

              for(int i=nCount-1;i>=0;i--)

              {

                   Button btn=ArrFunButton[i] as Button;

                   btn.Width=this.panFunMain.Width-4;

                   btn.Left=0;

 

                   //将按钮的单击事件和具体代码对应起来

                   btn.Click += new System.EventHandler(btnFun_Click);

                   if(i==0)

                   {

                       btn.Top=0;

                       btn.Anchor=AnchorStyles.Left |AnchorStyles.Top;

                   }

                   else

                   {

                       if(i==nCount-1)

                            btn.Top=this.panFunMain.Height-btn.Height-4;

                       else

                            btn.Top=(ArrFunButton[i+1] as Button).Top-btn.Height;

                       btn.Anchor=AnchorStyles.Left | AnchorStyles.Bottom;

                   }

                   //鼠标在按钮上移动时，同样判断当前工具条是否隐藏

                   btn.MouseMove+=new MouseEventHandler(FunListView_MouseMove);

 

                   //设置listview的anchor属性

                   ListView lsv=ArrFunListView[i] as ListView;

                   if(lsv!=null)

                   {

                       lsv.Anchor=AnchorStyles.Left | AnchorStyles.Top |

                            AnchorStyles.Right |AnchorStyles.Bottom;

                       //隐藏功能listview

                       lsv.Visible=false;

                       //设置listview双击事件

                       lsv.DoubleClick+=new EventHandler(lsvFun_DoubleClick);

                       lsv.MouseMove+=new MouseEventHandler(FunListView_MouseMove);

 

                   }//pan

              }//for int i

 

              //将第一个功能按钮点一下

              (ArrFunButton[0] as Button).PerformClick();

              //别忘了打开记时器

              this.timer1.Enabled=true;

         }

 

最后，添加Form1的Load事件响应函数，用来初始化工具条：

         private void Form1_Load(object sender, System.EventArgs e)

         {

              this.InitPanFun();

         }

现在运行一下，效果是不是很不错？单击按钮时，会显示不同的分组，当鼠标离开窗口左边时，工具自动隐藏，在左边移动时，工具自动出现，双击ListView某图标后，会弹出一个对话框，告诉你点了哪一项，如下图：

通过设置panFunMain的Dock属性，可以让本工具条在停泊在窗口的左边或右边，本例中代码的通用性较强（当然，如果能做成控件就更好了），很容易复制到新的软件中，上面的自动隐藏是模仿QQ做的，我们还可以做得更象QQ一点，当用户点了分组按钮后，播放一个声音，如果你安装了QQ，将其安装路径中sound文件夹下面的folder.wav声音文件复制到本项目的output文件夹中（也就是本项目EXE文件输出路径中），其中播放/停止声音的代码如下：

                   [DllImport("winmm.dll")]

         public static extern long mciSendString(string lpstrCommand,string lpstrReturnString,long length,long hwndcallback);

         /// <summary>

         /// 播放音乐文件

         /// </summary>

         /// <param name="p_FileName">音乐文件名称</param>

         private void PlayMusic(string p_FileName)

         {

              try

              {

                   mciSendString(@"close " +p_FileName ,"                                  "/*34个空格 */,0,0);

                   mciSendString(@"open " + p_FileName,"                                  "/*34个空格 */,0,0);

                   mciSendString(@"play " + p_FileName ,"                                  "/*34个空格 */,0,0);

              }

              catch

              {

              }

 

         }

        

         /// <summary>

         /// 停止当前音乐播放

         /// </summary>

         /// <param name="p_FileName">音乐文件名称</param>

         private void StopMusic(string p_FileName)

         {

              try

              {

                   mciSendString(@"close " + p_FileName,"                                  ",0,0);

              }

              catch{}

 

由于使用了API函数，别忘了在前门添加一个应用：

using System.Runtime.InteropServices;

当然在，为了能播放声音，在private void btnFun_Click(object sender, System.EventArgs e)事件中加入下面两句：

              //播放声音,由于文件路径中可能有空格，因此，文件要用引号引起来

              string strFileName="/""+Application.StartupPath+"//folder.wav"+"/"";

              this.PlayMusic(strFileName);

再运行一下，是不是更酷了？

本例源代码可以到本人的ftp://202.107.251.26中的“苟安廷”文件夹中下载，文件名：myoutlookbar.rar。