Winform应用程序的OutLook界面效果设计

DevExpress安装的版本为DevExpressComponents-15.2.4.exe

一、创建一个基于DevExpress.XtraEditors.XtraForm基类的窗体，代码如下

public partial class MainForm : DevExpress.XtraEditors.XtraForm
    {
        public MainForm()
        {
            InitializeComponent();
        }
        
    }

二、在窗体设计界面中，打开工具箱，选中Navigation&Layout里的BarManager控件，拖动到窗体，删除默认的工具栏，添加一些菜单项和状态栏的显示信息，如下图所示

 

ps:

状态栏的StaticText设置属性AutoSize=False后，可以通过Size属性调整Width。

隐藏菜单栏上右边的箭头属性设置：OptionsBar=>>AllowQuickCustomization=False。

取消右键菜单设置barmanager的属性中AllowShowToolbarsPopup,为false即可。

隐藏菜单栏左边的竖线属性设置：OptionsBar=>>DrawDragBorder=False。

三、打开工具箱，拖动Navigation&Layout里的PanelControl控件到窗体上，设置一些常用按钮或是公司Logo图片等，效果如下

由于我们使用MDI多文档界面效果，因此先设置主窗体MainForm的IsMdiContainer属性为True

设置PanelControl的Dock属性为Top布局，为ContentImage属性设置一张图片（建议为png格式，背景为透明）

四、打开工具箱，拖动Navigation&Layout里的NavBarControl控件到窗体上，设置Dock属性为Left布局，通过控件的右击菜单找到Run Designer，进入设计界面添加NavBarGroup或直接右击点击Add Group进行添加，然后选中NavBarGroup，右击点击Add Item进行添加NavBarItem，粗略设置得到如下的界面效果：

ps：

默认添加的NavBarGroup，仅可以添加NavBarItem，不可以添加一些特殊的控件，如树等。如需添加一些其它控件，需设置其GroupStyle=ControlContainer。

如需隐藏最下方的三角按钮，可以设置OptionsNavPane下的ShowOverflowPanel=false。

五、打开工具箱，拖动Navigation&Layout里的XtraTabbedMdiManager控件到窗体上，实现多文档布局，最终以Tab方式进行展现

 该控件可以实现右边区域以Tab方式展开多文档布局，用户可以一次性打开多个文档进行操作，方便很多，也必将美观，是一种常见的布局展现，为了实现当窗体激活的时候，在窗体的顶部显示关闭按钮，需要设置XtraTabbedMdiManager控件的ClosePageButtonShowMode=InActiveTabPageHeader。

至此，基本控件我们已经添加好了，接下来我们来添加控件。

六、给NavBarControl控件添加LinkClicked事件

private void navBarControl_LinkClicked(object sender, DevExpress.XtraNavBar.NavBarLinkEventArgs e)
        {
            this.AddPageMdi(e.Link.Item);    
        }

        /// <summary>
        /// 打开子窗体方法
        /// </summary>
        /// <param name="navItem"></param>
        private void AddPageMdi(NavBarItem navItem)
        {
            ChildForm frm = new ChildForm();
            frm.MdiParent = this;
            //子窗体的Text就是Tab页中的标题
            //我这里直接取NavBarItem中的标题作为tab页的标题
            frm.Text = navItem.Caption;
            //显示窗体
            frm.Show();
            //设置当前tab页的图标，默认取NavBarItem中的图标
            this.xtraTabbedMdiManager.Pages[frm].Image = navItem.SmallImage;
        }

 

七、双击tab页标签时，关闭tab页，功能在xtraTabbedMdiManager的MouseDown事件中实现

　　　　 XtraMdiTabPage page = null;
        DateTime lastClickTime = System.DateTime.Now;
        private void xtraTabbedMdiManager_MouseDown(object sender, MouseEventArgs e)
        {
            XtraMdiTabPage curPage = (sender as XtraTabbedMdiManager).SelectedPage;
            if (e.Button == System.Windows.Forms.MouseButtons.Left)
            {
                DateTime clickTime = System.DateTime.Now;
                TimeSpan span = clickTime.Subtract(lastClickTime);
                
                //如果两次点击的时间间隔小于300ms，则认为是双击
                if (span.TotalMilliseconds < 300)
                {
                    //保证MDI子窗体至少有一个存在
                    if (this.MdiChildren.Length > 1)
                    {
                        if (curPage.Equals(page))
                        {
                            //关闭当前活动的MDI子窗口,会触发子窗体的Form_Load事件
                            this.ActiveMdiChild.Close();
                        }
                    }
                    lastClickTime = clickTime.AddMinutes(-1);
                }
                else {
                    lastClickTime = clickTime;
                    page = curPage;
                }
            }
        }

八、合并MDI子窗体的状态栏，在barManager控件中添加Merge和UnMerge事件，这样就能在切换MDI子窗体页签的时候同时将子窗体的状态栏也合并到主窗体的状态栏上，并且在切换另一个MDI子窗体的时候，同时卸载当前子窗体的合并状态

private void barManager_Merge(object sender, DevExpress.XtraBars.BarManagerMergeEventArgs e)
        {
            BarManager parentBarManager = sender as BarManager;
            BarManager childBarManager = e.ChildManager;
            parentBarManager.StatusBar.Merge(childBarManager.StatusBar);
        }

        private void barManager_UnMerge(object sender, BarManagerMergeEventArgs e)
        {
            BarManager parentBarManager = sender as BarManager;
            parentBarManager.StatusBar.UnMerge();
        }

有了状态栏的合并经验，相信菜单栏、工具栏的合并也就非常简单了。

parent.MainMenu.Merge(children.MainMenu);
            Bar subToolsBar = null;
            Bar parentToolsBar = null;
            foreach (Bar bar in children.Bars)
            {
                if (bar.BarName == "Tools")
                {
                    subToolsBar = bar;    
                }
            }

            foreach (Bar bar in parent.Bars)
            {
                if (bar.BarName == "Tools")
                {
                    parentToolsBar = bar;
                }
            }

            if (subToolsBar != null && parentToolsBar != null)
            {
                parentToolsBar.Merge(subToolsBar);
            }

 

最后的实现效果如下：