合理的布局,绚丽的样式,谈谈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程序的界面设计,如需转载请自行联系原博主。



目录
相关文章
|
3月前
|
开发者 C# 存储
WPF开发者必读:样式与模板的艺术,轻松定制UI外观,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,样式与模板是实现美观界面与一致性的关键工具。样式定义了控件如字体、颜色等属性,而模板则允许自定义控件布局与子控件,两者均可存储于`.xaml`文件中。本文介绍了样式与模板的基础知识,通过示例展示了如何创建并应用它们来改变按钮的外观,从而提升用户体验。
65 0
|
3月前
|
开发者 C# Windows
WPF布局大揭秘:掌握布局技巧,轻松创建响应式用户界面,让你的应用程序更上一层楼!
【8月更文挑战第31天】在现代软件开发中,响应式用户界面至关重要。WPF(Windows Presentation Foundation)作为.NET框架的一部分,提供了丰富的布局控件和机制,便于创建可自动调整的UI。本文介绍WPF布局的基础概念与实现方法,包括`StackPanel`、`DockPanel`、`Grid`等控件的使用,并通过示例代码展示如何构建响应式布局。了解这些技巧有助于开发者优化用户体验,适应不同设备和屏幕尺寸。
75 0
|
3月前
|
开发者 编解码
界面适应奥秘:从自适应布局到图片管理,Xamarin响应式设计全解析
【8月更文挑战第31天】在 Xamarin 的世界里,构建灵活且适应性强的界面是每位开发者的必修课。本文将带您探索 Xamarin 的响应式设计技巧,包括自适应布局、设备服务协商和高效图片管理,帮助您的应用在各种设备上表现出色。通过 Grid 和 StackLayout 实现弹性空间分配,利用 Device 类检测设备类型以加载最优布局,以及使用 Image 控件自动选择合适图片资源,让您轻松应对不同屏幕尺寸的挑战。掌握这些技巧,让您的应用在多变的市场中持续领先。
37 0
|
3月前
|
C# UED 定位技术
WPF控件大全:初学者必读,掌握控件使用技巧,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,控件是实现用户界面交互的关键元素。WPF提供了丰富的控件库,包括基础控件(如`Button`、`TextBox`)、布局控件(如`StackPanel`、`Grid`)、数据绑定控件(如`ListBox`、`DataGrid`)等。本文将介绍这些控件的基本分类及使用技巧,并通过示例代码展示如何在项目中应用。合理选择控件并利用布局控件和数据绑定功能,可以提升用户体验和程序性能。
62 0
|
6月前
|
前端开发 C++ 开发者
QML动画实战指南:打造华丽且高性能的用户界面动效
QML动画实战指南:打造华丽且高性能的用户界面动效
887 0
|
前端开发 定位技术 容器
webgis前端控件编程
webgis前端控件编程
84 0
WPF 图片显示不清晰问题的解决
WPF 图片显示不清晰问题的解决
|
人工智能 搜索推荐 C#
Photoshop和WPF双剑配合,打造炫酷个性的进度条控件
结合Photoshop和WPF,共同创建一个矢量的个性化进度条。
550 0
Photoshop和WPF双剑配合,打造炫酷个性的进度条控件
|
前端开发 C#
silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发) 这篇介绍的是3D导航,点击图标,页面360°翻转的效果!有什么不足的欢迎大家指出来。 1.新建一个usercontrol,命名为menu. 2.按照下图设置一下属性。
1242 0
|
前端开发 C# iOS开发
WPF触控程序开发(二)——整理的一些问题
原文:WPF触控程序开发(二)——整理的一些问题   上一篇(WPF触控程序开发)介绍了几个比较不错的资源,比较基础。等到自己真正使用它们时,问题就来了,现把我遇到的几个问题罗列下,大家如有遇到其他问题或者有什么好的方法还望赐教。
1057 0