关于c#:浅谈Winform程序的界面布局设计

点击获取工具 >>
从事 Winform 开发很多年了，因为我的项目的须要，设计过各种各样的界面成果。一般来说，使用传统的界面控件元素，正当设计布局，可能设计出比拟中规中矩的规范界面；利用一些换肤的控件或者局部界面组件，可能设计出绝对难看一些的界面成果，如以前很流行的 ActiveSkin、IrisSkin 和 DotNetSkin 等，这些可能对传统的界面元素进行换肤，的确比规范灰色的界面控件难看了很多。不过随着界面控件的组件倒退，目前个别偏向于是用较为大型的控件组，他们除了提供设计得体的界面控件外，还提供了十分多种绚丽多彩的界面款式供选择，如 DotNetBar、netadvantage、DevExpress 等大型界面控件组。

无论界面设计如何变动，个别根本准则都是为客户提供直观、易用、体验成果较好的界面成果哦，从 Office 的倒退历程咱们也能够看到整体的界面成果趋势，从开始的规范控件到目前的 Ribbon 窗体，从单色调变动到绚丽多彩的界面款式，都给咱们提供很好的界面设计参考，大型的界面组件也是模拟这一趋势。言归正传，咱们来谈谈具体一点的货色，目前我趋向于采纳一种基于 Ribbon 款式的界面，以及一种基于传统界面联合 OutLook 款式的界面设计。

一、基于 Ribbon 款式的界面

以上的界面款式，是一种比拟大气、合乎 Office 界面成果的界面布局，通过把不同的功能块集中在不同的面板上显示，的确简洁、好看很多，本文不反复介绍该界面成果的优劣，咱们次要来集中看看上面的另外一种界面成果。

二、基于 OutLook 款式的界面设计

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

以上通过把一个零碎很多相干的功能模块放到一颗树上进行分类展现，对于一个比较复杂的人力资源管理系统或者其余简单性能的零碎，也是一个比拟正当的布局形式，另外 OutLook 工具条还是能够暗藏起来，节俭左边多文档界面的数据展现空间，这样整体还是比拟正当及好看的。其中左边的布局，还能够通过 SplitContainer 形式把它分成多个模块，而后客户想哪个数据显示面板大一点，拖动一下就能够了，这样不至于数据比拟多的时候，导致显示布局不好的状况。上面咱们来介绍下如何实现以上的界面布局成果。

1. 创立一个基于 DevExpress.XtraEditors.XtraForm 基类的窗体。如下代码所示：

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

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

1. 增加 PanelControl 和 NavBarControl，增加一些测试性能按钮。

因为咱们须要应用 MDI 多文档界面成果，因而先设置 Mainform 的 IsMdiContainer 属性为 True。

而后增加一个 PanelControl，设置其 Dock 为 Top 布局，为该控件 ContentImage 设置一个背景图片（当时用PS设计好，保留为 png 格局即可），增加几个小 Lable，设置其的图片和文字。

最初拖入一个 NavBarControl 控件到界面中，设置其 Dock 为 Left 布局，通过控件的右键菜单上的“Run Designer” 进入设计界面，先轻易增加一些 NavBarGroup 和 NavBarItem 我的项目，粗略设置失去界面成果如下所示。

留神，在 NavBarcontrol 外面，默认是没有一个 Panel 能够增加一些非凡的控件，如树、按钮等，默认只有 BarItem 对象能够增加进入。为了在一个 NavBarGroup 外面增加这样的控件，须要批改 NavBarGroup 的属性才行，如下所示。

1. 增加 DockManager 和 XtraTabbedMdiManager 控件实现多文档布局，其最终将以 Tab 形式进行展示。

持续在下面的窗体中增加 DockManager 控件和 XTraTabbedMdiManager 控件，这两个控件能够实现在左边以 Tab 形式展示多文档布局，这样对用户操作来说，能够一次性关上多个窗体进行操作，不便很多，也必将好看，是一种常见的布局展示。为了在窗体激活的时候，在顶部显示敞开按钮，其余的不显示，那么须要设置 XTraTabbedMdiManager 控件的 ClosePageButtonShowMode=InActiveTabPageHeader 即可实现了。最终 Tab 成果如下所示。

以上就是我设计的一个零碎界面的具体操作流程，其实很多时候，介绍总是很快，摸索总是很慢，这个就是常识积攒的效率晋升。当然，要设计好一个零碎界面，除了思考界面的布局好看性、还要思考图标的协调性、还有就是整体的框架，要能够比拟好的适应这些布局控件的操作，不能太过臃肿或者难以浏览。

本文转载自博客园 - 伍华聪 [](https://home.cnblogs.com/u/wu…