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

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

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

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

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

2、界面分析和设计

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3)列表展示界面

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

时间: 2024-10-11 04:07:41

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

Android ActionBar应用实战,高仿微信主界面的设计

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对较为深刻的理解了.唯一欠缺的是,前面我们都只是学习了理论知识而已,虽然知识点已经掌握了,但是真正投入到项目实战当中时会不会掉链子还很难说.那么不用担心,本篇文章我就将带领大家一起进入ActionBar的应用实战,将理论和实践完美结合到一起. 如果你还没有看过我的前两篇文章,建议先去阅读一下 Andr

【Qt编程】基于Qt的词典开发系列<三>--界面美化设计

本文讲一讲界面设计,作品要面向用户,界面设计的好坏直接影响到用户的体验.现在的窗口设计基本都是扁平化的,你可以从window  XP与window 8的窗口可以明显感觉出来.当然除了窗口本身的效果,窗口中各种控件的特效也是特别重要的一环.下面讲讲我在词典软件中的一些设计:说到界面美化的设计,不得不提到美工,一个好的美工是想当的重要!软件毕竟少不了图标,而不懂美工的我,也就只能在网上使用别人的图标了. 如何得到网上的图标? 直接百度就可以了,当然还有另一种方法:就是从别人的文件中提取这些图标文件.

iOS开发之主界面的左右滑动

前言:可能很多iOS开发者在学习之初都会对QQ的主界面的左滑与右滑动感到好奇,今天开始写我人生中的第一篇博客,即:iOS开发之Slide(主界面侧滑侧边栏). 正文: 首先,新建类(HomeViewController:命名随自己)继承ViewController. 然后我们需要声明这些属性: //滑动速度系数-建议在0.5-1之间.默认为0.5 @property (nonatomic, assign) CGFloat speedf; //左侧窗控制器 @property (nonatomic

26两种主界面的设计

两种均模仿了微信6.0底部菜单栏的效果,第一种在左右滑动的时候有动画,第二种没有,首先看第一种: 布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:im="http://schemas.android.com/apk/res/com.dystu.impro" xmlns:tools="http://schemas.android.com

商业级项目——基金客户端的架构设计与开发(上)

本项目是通力基金的商业级项目,声明:在此仅用于交流学习.该项目主要有三个主要功能模块:1.基金模块:包括基金的查询.展示等功能:2.账户模块:包括登录.充值.提现.收藏等功能:3.辅助模块:消息中心.帮助.意见反馈等. 项目运行首先会有一个闪屏页,然后进入的是一个新手引导页(只显示一次),可以向右滑动,共4页图片,当滑到最后一张时,图片中会有一个进入的按钮,点击这个按钮进可以进入到App的主页. 主页中:下面是4个导航,根据用户点击的不同,会切换至不同的界面. ok,我们现在开始来分享一下这个软

Winform_devexpress开发框架主界面设计

做了好多年的C#开发,从.Net.Winform及第三方的 DevExpress.无论什么样的系统,主界面的设计及风格无疑非常重要.从客户的角度考虑,要求功能区清晰,整体美观大方,这样才会有可能从第一视觉或印象中吸引客户. 之前也自己做过很多.Net 和Winform的界面框架,接触DevExpress后,感觉色彩搭配及界面整体感觉不错,所以设计出如下界面. DevExpress样式主界面介绍 在WinForm 框架中,界面分多个区展现,简洁易区分,并且可根据需要,对部分功能进行隐藏,使功能界面

什么是响应式设计?为什么要做响应式设计?响应式设计的基本原理是什么?

页面的设计和开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.css media query的使用等.无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率.图片尺寸及相关脚本功能等,以适应不同设备:换句话说,页面应该有能力去自动响应用户的设备环境. 响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发

基于Bootstrap框架的临床数据管理系统的设计与开发

    基于Bootstrap框架的临床数据管理系统的设计与开发     2018年11月10日 目  录 第一章绪论... 6 1.1 选题背景及其意义... 6 1.2国内外研究现状... 7 1.2.1 临床大数据管理系统发展现状... 7 1.2.2医疗电子表单管理发展现状... 8 1.3研究目标... 9 1.4 研究内容... 10 1.5论文整体结构... 10 第二章相关技术研究... 12 2.1 AngularJS技术简述... 12 2.2 RESTful API +sw

C#课程设计:基于Access的会员管理系统

C#课程设计:基于Access数据库的会员管理系统 本会员管理系统使用Access作为数据库,编写语言为C#,运行环境为.net4.0以上,本例程可以作为课程设计,感兴趣的同学当然也可以下载学习,有啥需要改进的地方希望大家也可以提提意见,对于相关源码我就不介绍了,直接展示部分图片吧.相关源码:点击下载