会员管理系统的设计和开发(3)--主界面的设计思路分享

会员管理系统经过一段时间的紧锣密鼓开发,软件终于完成并发布。在这期间,碰到了不少技术难点,并积累了不少开发心得和经验,本篇继续介绍这个开发过程中相关的技术要点,本章主要介绍会员管理里面,列表主界面的一些设计思路分享。

有时候,遵循一些固定的套路做事情,总是很容易,如果每个地方搞一些创新和改进,那么往往需要花费很多时间,但是创新是有积极意义的,虽然可能会遇到困难,但是很值得去做。在Winform的界面设计上,虽然我可以使用代码生成工具生成比较标准的界面了,但是我总是喜欢参考学习,并改进一些界面方面的元素,因此我经常会花费一些时间在研究一些界面细节上,不过做完后却可以感觉非常愉悦,同时也可以给后面的项目参考。

1、完成后的会员管理界面

这个里面的会员信息管理界面,分为了左右两部分的格局,左边显示会员的一些属性和状态分类,右边显示的是查询条件和查询列表内容。我们再来看看其会员信息列表界面的设计状态下的视图,基本上和运行时的界面保持一致,只是列表部分内容是在运行时刻进行动态加载的而已。

2、界面分析和设计

我们以这个界面效果反推如何实现这个效果,这样对我们可能更有帮助,也容易理解一些。

1)左右分拆及折叠界面的设计

列表界面的布局方面是左右两部分,里面还有一个箭头,双击箭头附件的部分可以把左边进行折叠,因此我们先来看看这个地方是如何实现的。

首先需要在VS的工具箱里面找到SplitContainerControl控件,然后放到整个窗体里面,并把它Dock属性设置为Fill,让它全部占满整个窗体。

接着设置整个控件的树形如下所示。

最后就可以看到左右的格局并可以折叠第一个面板的效果了。

然后在左边的面板里面增加一个TreeView控件,并设置它的Dock属性,并在设计时刻增加一些树的节点,方便效果显示处理。

通过后台代码的数据绑定,我们可以动态构造树状列表了,并且列表界面的数据也可以在右边进行展示,这样运行时候我们就可以得到前面介绍的主界面效果了。

有时候,我们可能需要利用面板分割控件,把主从表两个表的记录进行关联展示。

如下界面所示是一个消费信息的表,包括了消费总信息和消费明细信息两部分,但选择左边主表信息的时候,右边刷新显示明细表的记录信息。

2)下拉列表按钮效果实现

有时候,在列表界面里面放太多的按钮,会显得比较凌乱,有时候界面缩小的话,可能就被遮挡或者重叠了,这样的界面布局就很糟糕,DevExpress控件组提供了一个下拉列表按钮组的控件,非常方便用于节省屏幕控件,并对按钮进行分组。如我为了方便,把一些会员的相关操作,放到了一起,集合在一个下拉列表按钮里面,效果如下所示。

那要实现上面按钮的效果,应该如何操作才做到的呢?

DevExpress组件的工具栏里面有一个对应的按钮控件,如下所示。

不过拖动上去,并没有对应的属性用来设置里面的按钮集合的,而是需要配合这三个控件对象进行使用的。

ImageCollection是用来设置按钮图标的,其他两个需要配对使用在这个例子里面,增加后BarManger会增加工具栏、菜单栏、状态栏,把这些默认的都删除,不需要,然后制定PopupMenu的Manager属性为barManager1即可。

处理完这些步骤后,进一步设置弹出的按钮集合,并添加对应的事件处理即可,如下设计界面所示。

 3)列表展示界面

列表展示内容,主要就是使用代码生成工具Database2sharp自动生成的界面和后台代码,里面使用了分页控件进行展示而已,再次不在赘述了,看看界面效果如下所示。

本文转自博客园伍华聪的博客,原文链接:会员管理系统的设计和开发(3)--主界面的设计思路分享,如需转载请自行联系原博主。

时间: 2024-07-31 08:48:16

会员管理系统的设计和开发(3)--主界面的设计思路分享的相关文章

jsp网站设计与开发中登陆界面代码问题

问题描述 jsp网站设计与开发中登陆界面代码问题 设计一个登录的页面,登录前jsp页面显示请登录和输入框.登录后输入框消失,显示用户名和退出,求教怎么做? 解决方案 登录前一个jsp页面,登录后一个jsp页面就可以了啊 解决方案二: 利用ajax!我局的很好!

Android UI设计与开发教程 引导界面(四)仿人人网V5.9.2最新版引导界面

这一篇我将会以人人网的引导界面为实例来展开详细的讲解,人人网的引导界面比较的新颖,不同于其他 应用程序千篇一律的靠滑动来引导用户,而是以一个一个比较生动形象的动画效果展示在用户们的面前,有一 种给人眼前一亮的感觉,话不多说,进入正题. 一.实现的效果图 欢迎界面: 开发教程 引导界面(四)仿人人网V5.9.2最新版引导界面-变色龙引导最新版"> 引 导界面1

登录界面设计-基于MyEclipse的登录界面的设计

问题描述 基于MyEclipse的登录界面的设计 在MyEclipse下创建servlet,代码如下: package servlets; import java.io.IOException; import java.io.PrintWriter; import java.util.*; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.

Android UI设计与开发教程 引导界面(一)ViewPager介绍和使用详解

做Android开发加起来差不多也有一年多的时间了,总是想写点自己在开发中的心得体会与大家一起交流分 享.共同进步,刚开始写也不知该如何下手,仔细想了一下,既然是刚开始写,那就从一个软件给人最直观的 感受--UI设计开始写起吧,循序渐进,娓娓道来.博主在这里和大家一起学习,希望能多多支持,话不多说 ,下面就开始讲解UI设计的第一篇. 在讲解如何实现引导界面的效果之前,我想先详细介绍一下 ViewPager类的使用和说明,因为这是开发引导界面最重要的类,没有之一. 一.ViewPager实现的效

基于.NET平台的Windows编程实战(三) 项目的创建及主界面的设计

本文配套源码 通过前面二个课程的学习,相信大家对整个案例系统已经有了大致的了解了,下面就让我们一起来按以下步骤动手构建整个系统吧! 第一步:创建一个新的Windows项目 打开VS2005,点击"文件"-->"新建"-->"项目",在弹出的对话框里,在左边选择"Windows",在右边选择"Windows应用程序",并在下面的名称里输入"QuestionnaireSystem"

Android UI设计与开发教程 引导界面(五)实现应用程序只启动一次引导界面

这篇文章算是对整个引导界面开发专题的一个终结了吧,个人觉得大部分的引导界面基本上都是千篇一律 的,只要熟练掌握了一个,基本上也就没什么好说的了,要是在今后的开发中遇到了更好玩,更有趣的引导界 面,博主也会在这里及时的跟大家分享,今天的内容主要是教大家的应用程序只有在第一次启动的时候显示引 导界面,以后在启动程序的时候就不再显示了. 其实要想实现这样的效果,只要使用 SharedPreferences类,就会让程序变的非常简单,下面来详细介绍一下这个类的使用方法 一. SharedPreferen

艾伟:基于.NET平台的Windows编程实战(三)—— 项目的创建及主界面的设计

第一步:创建一个新的Windows项目 打开VS2005,点击"文件"-->"新建"-->"项目",在弹出的对话框里,在左边选择"Windows",在右边选择"Windows应用程序",并在下面的名称里输入"QuestionnaireSystem",选择相应的保存位置后,点"确定",如下图3-1所示:                            

艾伟_转载:基于.NET平台的Windows编程实战(三)—— 项目的创建及主界面的设计

第一步:创建一个新的Windows项目 打开VS2005,点击"文件"-->"新建"-->"项目",在弹出的对话框里,在左边选择"Windows",在右边选择"Windows应用程序",并在下面的名称里输入"QuestionnaireSystem",选择相应的保存位置后,点"确定",如下图3-1所示:                            

Android UI设计与开发教程 引导界面(二)使用ViewPager实现欢迎引导页面

本系列文章都会以一个程序的实例开发为主线来进行讲解,以求达到一个循序渐进的学习效果,这样更能 加深大家对于程序为什么要这样写的用意,理论加上实际的应用才能达到事半功倍的效果,不是吗? 最下方有源码的下载地址,几乎源码的每一行都有注释,写的通俗易懂,非常清晰,如有不懂的可以留言,本 博主一定尽心尽力,为大家答题解惑,希望大家多多支持,好的,话不多说,让我们回归到今天的正题. 一.实现的效果图 也许是养成了这样一个习惯,每次看别人的代码前,必须要先看实现的效果 图达到了一个什么样的效果,是不是跟自己