【转】合理的布局，绚丽的样式，谈谈Winform程序的界面设计

从事Winform开发不少年了，因为项目的须要，设计过各类各样的界面效果。通常来讲，运用传统的界面控件元素，合理设计布局，可以设计出比较中规中矩的标准界面；利用一些换肤的控件或者部分界面组件，可以设计出相对好看一些的界面效果，如之前很盛行的ActiveSkin、IrisSkin和DotNetSkin等，这些可以对传统的界面元素进行换肤，确实比标准灰色的界面控件好看了不少。不过随着界面控件的组件发展，目前通常倾向因而用较为大型的控件组，他们除了提供设计得体的界面控件外，还提供了很是多种绚丽多彩的界面样式供选择，如DotNetBar、netadvantage、DevExpress等大型界面控件组。

不管界面设计如何变化，通常基本原则都是为客户提供直观、易用、体验效果较好的界面效果哦，从Office的发展历程咱们也能够看到总体的界面效果趋向，从开始的标准控件到目前的Ribbon窗体，从单色调变化到绚丽多彩的界面样式，都给咱们提供很好的界面设计参考，大型的界面组件也是模仿这一趋势。言归正传，咱们来谈谈详细一点的东西，目前我趋向于采用一种基于Ribbon样式的界面，以及一种基于传统界面结合OutLook样式的界面设计。

 1、基于Ribbon样式的界面

 

 以上的界面样式，是一种比较大气、符合Office界面效果的界面布局，经过把不一样的功能块集中在不一样的面板上显示，确实简洁、美观不少，本文不重复介绍该界面效果的优劣，咱们主要来集中看看下面的另一种界面效果。

2、基于OutLook样式的界面设计

其实OutLook样式很早就有，也能够在不少公开的控件组中看到，若是仅仅是追求部分的OutLook界面效果，而不是总体性的方案，那么CodeProject上的这款开源Outlook组件，估计是其中的佼佼者（http://www.codeproject.com/Articles/43181/A-Serious-Outlook-Style-Navigation-Pane-Control）。不过因为需求的是总体性效果，并且还要考虑更多控件界面样式的一致性及美观性，所以咱们仍是基于DevExpress界面组来设计这样的OutLook界面效果，会显得更加美观大方一点。界面效果以下所示。

以上经过把一个系统不少相关的功能模块放到一颗树上进行分类展现，对于一个比较复杂的人力资源管理系统或者其余复杂功能的系统，也是一个比较合理的布局方式，另外OutLook工具条仍是能够隐藏起来，节省右边多文档界面的数据展现空间，这样总体仍是比较合理及美观的。其中右边的布局，还能够经过SplitContainer方式把它分红多个模块，而后客户想哪一个数据显示面板大一点，拖动一下就能够了，这样不至于数据比较多的时候，致使显示布局很差的状况。下面咱们来介绍下如何实现以上的界面布局效果。

一、建立一个基于DevExpress.XtraEditors.XtraForm基类的窗体。以下代码所示

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

二、在界面设计中，在DevExpress工具箱Navigation & Layout里面拖动添加一个BarManager控件到窗体中，并删除默认的工具栏Tools，并添加一些菜单项和状态条数据。以下所示。

三、添加PanelControl和NavBarControl，添加一些测试功能按钮。

因为咱们须要使用MDI多文档界面效果，所以先设置Mainform的IsMdiContainer属性为True。

而后添加一个PanelControl，设置其Dock为Top布局，为该控件ContentImage设置一个背景图片（事先用ＰＳ设计好，保存为png格式便可），添加几个小Lable，设置其的图片和文字。

最后拖入一个NavBarControl控件到界面中，设置其Dock为Left布局，经过控件的右键菜单上的“Run Designer"进入设计界面，先随便添加一些NavBarGroup和NavBarItem项目，粗略设置获得界面效果以下所示。

注意，在NavBarcontrol里面，默认是没有一个Panel能够添加一些特殊的控件，如树、按钮等，默认只有BarItem对象能够添加进入。为了在一个NavBarGroup里面添加这样的控件，须要修改NavBarGroup的属性才行，以下所示。

 

四、添加DockManager和XtraTabbedMdiManager 控件实现多文档布局，其最终将以Tab方式进行展示。

继续在上面的窗体中添加DockManager控件和XTraTabbedMdiManager控件，这两个控件能够实如今右边以Tab方式展示多文档布局，这样对用户操做来讲，能够一次性打开多个窗体进行操做，方便不少，也必将美观，是一种常见的布局展示。为了在窗体激活的时候，在顶部显示关闭按钮，其余的不显示，那么须要设置XTraTabbedMdiManager控件的ClosePageButtonShowMode=InActiveTabPageHeader便可实现了。最终Tab效果以下所示。 

以上就是我设计的一个系统界面的具体操做流程，其实不少时候，介绍老是很快，摸索老是很慢，这个就是知识积累的效率提高。固然，要设计好一个系统界面，除了考虑界面的布局美观性、还要考虑图标的协调性、还有就是总体的框架，要能够比较好的适应这些布局控件的操做，不能太过臃肿或者难以阅读。

原文地址：http://www.cnblogs.com/wuhuacong/archive/2012/05/10/2494957.html