合理的布局,绚丽的样式,谈谈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();
        }
    }

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

3、添加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的属性才行,如下所示。

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

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

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

本文转自博客园伍华聪的博客,原文链接:合理的布局,绚丽的样式,谈谈Winform程序的界面设计,如需转载请自行联系原博主。

时间: 2024-07-31 13:20:22

合理的布局,绚丽的样式,谈谈Winform程序的界面设计的相关文章

Winform开发框架主界面设计展示

做了好多年Winform的程序的开发,主窗口的界面设计一般都要求做的更好一些,可以根据不同的系统功能模块进行归类整合,能使客户迅速寻找到相关功能的同时,也能感觉到整体性的美观大方,因此主窗口的界面设计总是会精益求精,力求做到更好用.更美观,这样才能吸引客户使用. 目前的主体界面设计,可以使用很多控件进行美化,这样能使得开发者能够迅速开发好美观的界面,也可以使得界面总体性有一个统一.规范的基准.一般推荐使用DevExpress或者DotNetbar这两款界面控件套件,他们都能设计出类似Office

winform程序对界面上控件的统一控制【二】组件版

继上篇文章winform 程序对界面上控件的统一控制[一](赋值\清空\验证- -) ,本篇文章将实现一个同样功能的Component(组件). 先看看组件的实现,如下所示: 代码一 public partial class CtrlValidation : Component { public CtrlValidation() { InitializeComponent(); typeCache = new TypeCache(); } public CtrlValidation(IConta

winform程序对界面上控件的统一控制【一】(赋值\清空\验证……)

首先来说说本文所描述的东西有哪些功能: (1)在界面上输入某个值之前,其他的控件都处于不可用状态. (2)需检验必填项是否为空. (3)需检验用户输入的格式是否正确. (4)清除控件内容. (5)为控件设置默认值. (6)清除清除错误提示信息(ErrorText). (7)将数据行的值映射到文本编辑框中. (8)将编辑框中的数据赋给数据行. 看看我是怎么实现的 [1]定义"设置条件"的实体类 代码一 /// <summary> /// 设置条件 /// </summa

android 布局-我想布局一个九宫格样式的界面,但是其中一格被隐藏了以后后面的格子会自动顶替上去

问题描述 我想布局一个九宫格样式的界面,但是其中一格被隐藏了以后后面的格子会自动顶替上去 比如:7 8 94 5 61 2 3将1给隐藏.setVisibility(View.GONE);会变成:7 8 94 5 62 3我想知道如何实现 解决方案 这肯定用的collectionView布局做的,这样做很简单,你不要隐藏,把他设置成透明的不就行了?

代码生成工具之Winform查询列表界面生成

在上面一篇随笔<代码生成工具之界面快速生成>介绍了代码生成工具Database2Sharp的界面生成操作,其中介绍了Web界面(包括列表界面.内容显示.内容编辑界面的生成,另外还介绍了Winform界面的内容编辑界面的生成,本篇主要继续介绍Winform界面生成中的查询列表界面的操作展示等信息. 基于Winform的界面生成,配合我的Winform开发框架,提供了三种不同的界面生成,包括传统界面样式.DotNetBar界面样式和DevExpress界面样式的代码生成,这几种界面是目前Winfo

使用Windows PowerShell创建WinForm程序

Windows PowerShell最突出之处便在于.NET类库的支持,很大的扩展了脚本的 能力.这使我们能直接在脚本中通过System.Windows.Forms程序集来创建窗口. 今天初次尝试了一下在PowerShell下创建WinForm程序,将完成的这个简单的 例子分享给大家. 如同在C#编写WinForm程序中一样,先创建一个Form类的实例,然后初始化: 添加流式布局面板,在面板上加了一个文本框和一个按钮,给控件添加必要的事 件处理.当然使用C#的时候通常是VS自动为我们生成一个窗体

WPF界面设计技巧(4)—自定义列表项样式

原文:WPF界面设计技巧(4)-自定义列表项样式   有前面修改按钮样式的基础,我们可以尝试来定制一个即好看又好用的 ListBox ,今天先来讲"好看"部分.   打开 Microsoft Visual Studio 2008 ,建立一个WPF应用程序,调整窗体大小,在窗体内创建一个 ListBox 和一个 Button ,按下图所示布局.   在  Window1.xaml 中为窗体 Loaded 事件及按钮 Click 事件添加事件处理:       Code<Window

WinForm程序调用WPF控件库,怎么设置WPF控件库的全局资源

问题描述 最近开发一个项目,以前用WPF开发,由于特殊原因,现在需要用WinForm窗口做承载窗体,里面用到自定义好的WPF控件库,但是WPF控件库里的控件,都会调用一些全局的样式,以前都放在App.xaml文件中,但是WinForm程序没有这个文件,且Application与WPF的Application的类型不同,无法赋值...麻烦大虾帮忙想想办法,谢咯. 解决方案 解决方案二:怎么没人回啊

c#Winform程序的toolStripButton自定义背景应用示例源码

C# Winform程序的toolStrip中toolStripButton的背景是蓝色的,如何改变背景及边框的颜色和样式呢? 实现此功能需要重写toolStripButton的Paint方法 这里只是给出解决问题的思路和方法,如下图,当鼠标移到按钮上,背景会变为黑色 实现代码如下: ToolStripButton tsb = (ToolStripButton)sender; Rectangle rectButton = tsb.Bounds; Point p = toolStrip1.Poin