界面布局决定系统设计的成败
界面布局决定系统设计的成败
问题 : 在系统开发中，布局界面设计是比较重要的一个环节，我曾在一家甲方公司做过MES开发，见过的系统界面五花八门，有100号人，就有近100种样式，开发的小系统数不清，命名规范更是杂乱无章。所以作为IT项目的管理者，管理这系统和人员这是一件很头痛的事情，但这跟他们的系统管理有很大关系。
最后在进行系统升级中，原有的系统基本上都废弃了，我宁愿重新了解需求，重新投入时间开发而不想去看一个方法有近千行代码，嵌套不少于50个 if…else... 逻辑，改程序的人，会一边改一边骂设计此程序的人~~~，感觉与主题扯远了，还是以系统界面部局为主题。
我的一些改善措施：
不以花哨的界面为主，先以传统的方式进行说明设计原理：
制造业系统一般要求系统操作 简单，易用,灵活 ，所以要做到这几点，起码要有横向菜单，左导航菜单功能，状态栏，系统内容显示区，其他的个人认为较少用到。
用到的控件主要为 :
MenuStrip,ToolStrip,StatusStrip,ToolStripContainer ,同时结合一个开源布局控件” WeifenLuo.WinFormsUI.Docking ”,这几个控件相互配合，一样可以设计出相对合理的系统框架。
现在我以一个《地理导航系统》为例，做一些简单原理介绍。
设计的步骤 :
1. 建一个项目”GMapGuide”,新建三个Form,分别为GMapForm,GuideBarForm,MainForm,添加入谷歌地图html文件”GoogleMap1.html”，如下图：
2.接着引入” WeifenLuo.WinFormsUI.Docking.dll ”,并在工具箱中添加DockPanel控件，此控件来源网上很多地方可以下载到 ，如下图:
3.在主窗体 MainForm 中，添加” ToolStripContainer ”，并设为布满整个主窗口Dock属性设为Fill即可，分别在 ToolStripContainer 顶部拖入一个 MenuStrip 和一个 ToolStrip 控件,底部拖入一个 StatusStrip ,根据需要设置属性，如下图:
4.在 ToolStripContainer 控件的内容区域- toolStripContainer1.ContentPanel 中添加DockPanel控件，并设置为布满整个区域,如下图:
在这里，DockPanel需要做一些设置，因为我主窗体不是Mdi,即IsMdiContainer=False,需要设DocumentStyle=DockingWindow,如果主窗体是Mdi,此处需要设为DockingMdi，此处设置参考下边图示：
5.把其他的窗体都继承 DockContent ,如下代码：
namespace GMapGuide
{
public partial class GMapForm : DockContent
{
// 具体代码逻辑}
}
}
namespace GMapGuide
{
public partial class GuideBarForm: DockContent
{
// 具体代码逻辑
}
}
6.分别对继承 DockContent 的窗体作一些设置：
HideOnClose:True,意思是当窗体隐藏时，只是隐藏窗体的功能，没有真正关闭窗体。 DockAreas: "Float, DockLeft, DockRight, DockTop, DockBottom". CloseButton:True这几个属性从名字上看应该知道什么意思，不作具体解释。
针对左导航条(左导航菜单),需要把ShowHint设为DockLeft,就我做的系统，其他属性的不需要做设置,这里点到为止。
7.最后一步啦，在主窗体 MainForm 中编写代码，如下：
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using WeifenLuo.WinFormsUI.Docking;
namespace GMapGuide
{
public partial class MainForm : Form
{
private GuideBarForm gMapForm;
private GMapForm toolBarForm;
public MainForm()
{
InitializeComponent();
gMapForm = new GuideBarForm();
toolBarForm = new GMapForm(gMapForm);
}
private void MainForm_Load( object sender, EventArgs e)
{
gMapForm.Show(dockPanel1);
toolBarForm.Show(dockPanel1);
}
}
}
秀一下成果 ，大家别给我丢鸡蛋:
bug来了 : 当窗口是自动隐藏的时候，好像出来的大小一般比实际的大，确实是影响美观，还闪着抖动一下，怪怪的感觉。
解决问题的措施:
园中参考了华兄的解决办法，不错滴,很赞他的技术 ,不过一些细节他没有写清楚，初学的人要摸个半天才搞明白（我这小菜就如此 ）.
先看控件内部机制:
[LocalizedCategory( " Category_Docking " )] [LocalizedDescription( " DockContent_AutoHidePortion_Description " )
[DefaultValue( 0.25 )]
public double AutoHidePortion
{
get { return DockHandler.AutoHidePortion; }
set { DockHandler.AutoHidePortion = value; }
}
我先把窗体 GuideBarForm 的AutoHidePortion设为0.17,如图:
默认的大小是0.25，这个参数是可以修改的。因为控件提供了一个保存布局状态的方法，它默认是没有保存的，如果需要记住调整的窗口大小,我加上几段代码就可以解决了。
在关闭系统时，保存一下状态设置，如下代码:
private void MainForm_FormClosing( object sender, FormClosingEventArgs e)
{
dockPanel1.SaveAsXml(Path.Combine(Application.StartupPath, " CustomUI.xml " ));
}
加载部局代码:
#region 加载布局
private IDockContent GetContentFromPersistString( string persistString)
{
try
{
if (persistString == typeof (GuideBarForm).ToString())
{
if (gMapForm == null )
{
return new GuideBarForm();
}
else
{
return gMapForm;
}
}
if (persistString == typeof (GMapForm).ToString())
{
if (toolBarForm == null )
{
return new GMapForm(gMapForm);
}
else
{
return toolBarForm;
}
}
}
catch (Exception ex)
{
Console.WriteLine(persistString);
}
throw new Exception();
}
#endregion
加载窗体时，加入如下代码:
private void MainForm_Load( object sender, EventArgs e)
{
// 加载
string uiFile = Path.Combine(Application.StartupPath, " CustomUI.xml " );
if (File.Exists(uiFile))
{
DeserializeDockContent ddContent = new DeserializeDockContent(GetContentFromPersistString);
dockPanel1.LoadFromXml(uiFile, ddContent);
}
gMapForm.Show(dockPanel1); //放在加载设置后面
toolBarForm.Show(dockPanel1); } //放在加载设置后面
注意：很多人搞不成功，跟这个位置有关系，显示窗体一定要在加载功能后面，否则报错:”The DockPanel has already been initialized.”
到这里，已基本解决这个框架布局问题。
把几个效果图展示一下，看效果:
(1)图一:
(2)图二:
(3)图三:
总结：
这篇博文主要是说明一些基本的系统框架布局，主要是针对菜单栏，左导航菜单，以及WeifenLuo.WinFormsUI.Docking的使用说得比较多。
WeifenLuo.WinFormsUI.Docking 的确是很强大的布局工具，但是还是有些缺陷：
（1）隐藏后显示问题，如上有解决的办法。
（2）个人觉得具有换肤的系统，用它就会颜色上明显不协调，所以它目前只限于传统Winform的框架设计,要想用它还得大动手术。（这个我后续在说换肤功能时，会解释改善措施,我不知道我这样会不会侵权啊?要是有人支持我，我搞给大家看! ）。
在系统框架布局上，我上面讲的仅仅是很基础的做法，还有很多细节需要注意的地方，本人知识有限，还得高人指点，好补充知识面。
分类: 系统框架设计
标签: 小菜的系统框架界面设计
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息