admin 管理员组文章数量: 1086019
2024年4月18日发(作者：java常用线程池)
广州市扬基信息科技有限公司 - 技术研发组
界面规范
[V1.0]
拟 制 人______________________
审 核 人______________________
批 准 人______________________
[二零零七年二月二十六日]
日期
2007/04/05
Created by fanco
作者
范拥华
版本
1.0.0
Page 1 of 49
备注
Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
目 录
1
2
规范性 .................................................................................................................................................................................... 4
系统颜色、字体、图标 ........................................................................................................................................................ 4
2.1
3
设计参考 ........................................................................................................................................................................ 4
FORM控件布局与间距 ........................................................................................................................................................ 5
3.1
设计参考 ........................................................................................................................................................................ 5
4
对齐设置 ................................................................................................................................................................................ 6
4.1
设计参考 ........................................................................................................................................................................ 6
5
BARMANAGER控件 ........................................................................................................................................................... 6
5.1
实现效果 ........................................................................................................................................................................ 6
6
菜单 ........................................................................................................................................................................................ 8
6.1
6.2
6.3
6.4
设计参考 ........................................................................................................................................................................ 8
实现效果 ........................................................................................................................................................................ 8
操作步骤 ........................................................................................................................................................................ 8
实现代码 ........................................................................................................................................................................ 9
7
工具栏 .................................................................................................................................................................................. 10
7.1
7.2
7.3
设计参考 ...................................................................................................................................................................... 10
实现效果 ...................................................................................................................................................................... 10
操作步骤 ...................................................................................................................................................................... 10
8
STATUSBARS控件 ........................................................................................................................................................... 11
8.1
8.2
8.3
设计参考 ...................................................................................................................................................................... 11
实现效果 ...................................................................................................................................................................... 11
操作步骤 ...................................................................................................................................................................... 11
9
控件 ...................................................................................................................................................................................... 11
9.1
网格控件 ...................................................................................................................................................................... 11
9.1.1
GridControl .............................................................................................................................................................. 11
9.1.1.1
9.1.1.2
9.1.2.1
9.1.2.2
9.1.2.3
9.1.3.1
9.1.3.2
9.1.3.3
9.1.4.1
9.1.4.2
9.1.4.3
9.1.4.4
9.1.4.5
9.1.5.1
GridControl描述 ............................................................................................................................................................... 11
GridControl特殊属性........................................................................................................................................................ 17
实现效果 ............................................................................................................................................................................ 23
操作步骤 ............................................................................................................................................................................ 23
属性设置 ............................................................................................................................................................................ 23
实现效果 ............................................................................................................................................................................ 24
操作步骤 ............................................................................................................................................................................ 24
CarView属性设置............................................................................................................................................................. 24
实现效果 ............................................................................................................................................................................ 25
操作步骤 ............................................................................................................................................................................ 25
实现代码 ............................................................................................................................................................................ 26
属性设置 ............................................................................................................................................................................ 26
ColumnEdit列 ................................................................................................................................................................... 26
实现效果 ............................................................................................................................................................................ 28
Page 2 of 49 Created on 4/25/2022 3:17:00 AM
9.1.2
GridView ................................................................................................................................................................. 22
9.1.3
CardView ................................................................................................................................................................. 23
9.1.4
BandedGridView ..................................................................................................................................................... 25
9.1.5
AdvBandedGridView .............................................................................................................................................. 27
Created by fanco
广州市扬基信息科技有限公司 - 技术研发组
9.1.5.2
9.1.5.3
9.1.5.4
操作步骤 ............................................................................................................................................................................ 28
实现代码 ............................................................................................................................................................................ 28
属性设置 ............................................................................................................................................................................ 29
9.2
X
TRA
L
AYOUT
控件 ...................................................................................................................................................... 29
9.2.1
特性 ..................................................................................................................................................................... 29
9.2.2
实现效果 ............................................................................................................................................................. 29
9.2.3
操作步骤 ............................................................................................................................................................. 29
9.3
X
TRA
T
AB
控件 ............................................................................................................................................................. 30
9.3.1
设计参考 ............................................................................................................................................................. 30
9.3.2
效果及代码 ......................................................................................................................................................... 30
9.4
P
IVOT
G
RID
控件 ........................................................................................................................................................... 30
9.4.1
实现效果 ............................................................................................................................................................. 31
9.4.2
操作步骤 ............................................................................................................................................................. 31
9.5
X
TRA
T
REE
L
IST
控件 .................................................................................................................................................... 32
9.5.1
实现效果 ............................................................................................................................................................. 34
9.5.2
操作步骤 ............................................................................................................................................................. 34
9.5.3
实现代码 ............................................................................................................................................................. 36
9.5.4
属性设置 ............................................................................................................................................................. 37
9.6
L
OOK
U
P
E
DIT
控件 ....................................................................................................................................................... 37
9.6.1
实现效果 ............................................................................................................................................................. 37
9.6.2
操作步骤 ............................................................................................................................................................. 37
9.7
G
RID
L
OOK
U
P
E
DIT
控件 ............................................................................................................................................... 39
9.7.1
设计参考 ............................................................................................................................................................. 39
9.7.2
实现效果 ............................................................................................................................................................. 39
9.7.3
操作步骤 ............................................................................................................................................................. 39
9.8
G
RID
P
RINT
控件 ........................................................................................................................................................... 41
9.8.1
实现效果 ............................................................................................................................................................. 42
9.9
B
UTTON
控件 ............................................................................................................................................................... 44
9.9.1
设计参考 ............................................................................................................................................................. 44
9.10
C
HECK
B
OX
控件 .......................................................................................................................................................... 45
9.10.1
设计参考 ............................................................................................................................................................. 45
9.11
G
ROUP
B
OX
控件 .......................................................................................................................................................... 45
9.11.1
设计参考 ............................................................................................................................................................. 45
9.12
L
ABEL
控件 .................................................................................................................................................................. 45
9.12.1
设计参考 ............................................................................................................................................................. 45
9.13
LIST
B
OX
控件 ............................................................................................................................................................... 45
9.13.1
设计参考 ............................................................................................................................................................. 45
9.14
L
IST
V
IEW
控件 ............................................................................................................................................................. 46
9.14.1
设计参考 ............................................................................................................................................................. 46
10
10.1
11
11.1
12
12.1
13
13.1
界面输入控制 .................................................................................................................................................................. 46
设计参考 ...................................................................................................................................................................... 46
弹出子窗体 ...................................................................................................................................................................... 46
设计参考 ...................................................................................................................................................................... 46
消息框设置 ...................................................................................................................................................................... 46
设计参考 ...................................................................................................................................................................... 46
向导使用原则 .................................................................................................................................................................. 47
设计参考 ...................................................................................................................................................................... 47
Created by fanco Page 3 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
14
TAB键和快捷键设置 ......................................................................................................................................................... 47
14.1
15
15.1
16
16.1
17
17.1
18
设计参考 ...................................................................................................................................................................... 47
系统响应时间 .................................................................................................................................................................. 48
设计参考 ...................................................................................................................................................................... 48
登陆窗体与主界面 .......................................................................................................................................................... 48
设计参考 ...................................................................................................................................................................... 48
系统帮助设置 .................................................................................................................................................................. 49
设计参考 ...................................................................................................................................................................... 49
附录 .................................................................................................................................................................................. 49
1 规范性
通常界面设计都按Windows界面的规范来设计，即包含“菜单条、工具栏、工具箱、状态栏、滚动条、
右键快捷菜单”的标准格式，可以说：界面遵循规范化的程度越高，则易用性相应的就越好。
2 系统颜色、字体、图标
2.1 设计参考
Form背景颜色缺省为"#EFEFEF"，大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。
前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等。
如果使用其他颜色，主色要柔和，具有亲和力与磁力，坚决杜绝刺目的颜色。
中文采用标准字体，“宋体”、
宋体的小五号字(9磅)、黑色。
菜单和状态条中通常使用10号字。
字体的大小要与界面的大小比例协调, 通常使用的字体为宋体9-12较为美观，很少使用超过12号
的字体。
避免使用粗体和斜体用粗体来吸引人的注意，用斜体表示着重，但还是要少使用。
避免混合字体任何不包含文档的窗口最多包含两种不同的字体。
不要用字母全为大写的单词，这样看起来像在冲用户大喊大叫一样。
界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。
不同界面中的同一功能应该使用同样的图标和图片。
图标、图片的色调、风格尽量保持一致，隐喻应能确切表示功能的含义。
有标准的图标风格设计，有统一的构图布局，有统一的色调、对比度、色阶，以及图片风格。
Created by fanco Page 4 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
3 Form控件布局与间距
3.1 设计参考
应该将重要信息放在上面和左边。左上角最容易吸引起人们的注意力。
用户首先要看到或操作的控件设置焦点。
屏幕不能拥挤, 拥挤的屏幕让人难以理解，因而难以使用。让人看上去，不能太拥挤，也不能太松
散。
布局要合理,不宜过于密集，也不能过于空旷，如果没有其他内容，那么应尽量使窗口小一些。
按功能将界面划分局域块，完成相同或相近功能的按钮用Frame框起来,并要有功能说明或标题。
控件与窗体的上、下、左、右边距保持10pix,Label 与文本框间距保持10pix。
整个项目，采用统一的控件间距,通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁
可留空部分区域，也不要破坏控件间的行间距。
同一界面上的控件数最好不要太多，太挤时可以考虑使用分页界面显示, 分页界面要支持在页面间
的快捷切换，常用组合快捷键Ctrl+Tab.
DevExpress中LayoutControl布局网格有助于您在不同的窗口之间实现一致性，控件size随Form
缩放。
控件长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。
按钮的大小要与界面的大小和空间要协调，按钮大小基本相近，忌用太长的名称，免得占用过多的
界面位置，避免空旷的界面上放置很大的按钮。
界面空间较小时使用下拉框而不用选项框。
选项数较少时使用选项框，相反使用下拉列表框。
使用缩进和文本来辅助理解；
避免水平滚动条，与垂直滚动条不同，水平滚动条并不受欢迎，因为它会使项目阅读起来比较困难。
Created by fanco Page 5 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
应用程序应该保持为最大化当应用程序占用整个屏幕时，常常能够提高用户的工作效率。
窗体最小化和最大化时，窗体上的控件也要随着窗体而缩放。
FORM要保持一至的界面风格、如背景色、字体、字的大小。
4 对齐设置
4.1 设计参考
左对齐:一般文字、单个数字、日期等。
右对齐:数字、时间、日期加时间。
通常，使用左对齐来使用户界面控件更易于浏览。对于数值文本，应该使用小数点对齐或右对齐。对于
非数值文本，应该避免使用右对齐或居中对齐。不必对什么都使用中间对齐，或者使它们保持对称形式。
在右边或底部保留空白区域更适合习惯。
5 BarManager控件
BarManager 控件，一改Visual Studio 2005 MenuStrip ,ToolStrip,StatusStrip三分天下局面，而
把三个控件揉合在BarManager中统一管理。
5.1 实现效果
BarManager菜单新增时的项：
Created by fanco Page 6 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
菜单，工具，状态栏中的分隔符不再是Visual Studio 2005中添加‘——’来实现，而是勾选Begin a
Group时出现分隔符。
菜单，工具，状态栏要用到图标，必须在BarManager的Images中设置imageList对象，在要用到处的
ImageIndex指定索引。
Created by fanco Page 7 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
6 菜单
6.1 设计参考
菜单通常采用“常用--主要--次要--工具--帮助”的位置排列，符合流行的Windows风格。
常用的有“文件”、“编辑”，“查看”等，几乎每个系统都有这些选项，当然要根据不同的系统有所取
舍。
如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列，菜单深度一般要求最多控制
在三层以内。
主菜单的宽度要接近，字数不应多于四个，每个菜单的字数能相同最好。
菜单前的图标能直观的代表要完成的操作，图标不宜太大，与字高保持一致最好。
完成相同或相近功能的菜单用横线隔开放在同一位置。
保持菜单稳定，将无效菜单置为不可用，而不要删除它们。
用省略号来表示需要更多信息。
用复选标记来开关选项，用单选组来改变模式。
常用菜单要有命令快捷方式.
分配访问键，访问键使用户可以手不离开键盘进行操作。
右键快捷菜单采用与菜单相同的准则。
帮助菜单的“关于”中应有版权和产品信息。
6.2 实现效果
6.3 操作步骤
普通菜单：
1) 从工具箱中拉barManager到主窗体中。
2) 点击click here to add mainmenu。
3) 选择上下文菜单中的Menu(BarSubItem),Caption属性设置为＂系统管理＂。
4) 点击＂系统管理＂，Add new itme ,在上下文菜单中选择button(BarButtonItem), Caption属性
设置为＂重登录＂。
5) 点击＂系统管理＂，Add new itme ,在上下文菜单中选择Menu(BarSubItem) , Caption属性设置
为审核流程管理。添加下级菜单过程重复上一步。
6) 添加分隔符。在审核流程管理菜单项上右键，选择上下文菜单中选择begin a group.
7) 菜单项BarButtonItem的事件为ItemClick.
Created by fanco Page 8 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
8) 带图标的菜单：
9) 从工具箱中拉imagelist到Form中，添加imagelist1位图。
10) 为barmanager1属性Images设置imagelist1。
11) 为添加图标的菜单项的ImageIndex属性选择图标索引。
PopupMenu右键菜单．
PopupMenu快捷菜单如图：
操作步骤：
1) 从工具箱中拖barManager控件到form上。
2) 把popupMenu拖到form上。
3) 在popupMenu上右键选Customize弹出如下界面，不要点击New按钮，而是在Popup Menu Editor
下加上要出现的菜单项。
4) 在要出现快捷菜单的控件上右键属性BarManager上的，选中popupMenu，完成设置。
6.4 实现代码
主菜单实现代码
BarManager barManager1= new ager();
Created by fanco Page 9 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
bar1= new ();
ge(new [] { 1});
bar1添加菜单项
BarSubItem objSubMenuItem = new BarSubItem();
= “objSubMenuItem1”;
n = “系统管理”;
(objSubMenuItem);
“系统管理”菜单添加子菜单项
BarButtonItem objMenuItem = new BarButtonItem();
= “objMenuItem1”;
n = “重登录”;
(objMenuItem);
7 工具栏
7.1 设计参考
工具栏Button的Size大小为42，39。
采用大工具栏按钮、工具栏应该只包含几个带有描述性文字和图形的显眼命令，工具栏的图标能直
观的代表要完成的操作。
相同或相近功能的工具栏放在一起。
工具栏中的每一个按钮要有及时提示信息, 工具提示帮助用户了解工具栏按钮的作用。
保持工具栏稳定，将无效的工具栏按钮置为不可用，而不是将它删除。
提供显示或隐藏工具栏选项。
工具栏太多时可以考虑使用工具箱。
7.2 实现效果
7.3 操作步骤
1) 从工具箱中拉barManager到Main Form中。
2) 点击click here to add toolbar,添加一个工具条。
3) 点击add new item，在上下文菜单中选择large button(barlargebuttonitem),设置caption属性
为＂首笔＂，MinSize(42,39)设置高与宽。
4) 从工具箱中拉imagelist到Form中，添加imagelist1位图。
5) 为barmanager1属性Images设置imagelist1。
6) 设置＂首笔＂工具图标，为属性imageindex选择图标索引，panitstyle属性选择CaptionGlyph。
图片和文字有4种显示方式，在barButtonItem的属性PaintStyle可选择，Standard(只显示图片)，
Caption（只显示文字），CaptionInMenu(显示图片),CaptionGlyph(图片跟文字一起显示)。
7) 在二个工具间添加分隔符，在＂首笔＂按钮右键菜单中选择begin a group。
8) 去掉工具默认最右侧的一栏，BarOptionsbarAllowQuickCustomization = false。
9) 工具栏的事件为ItemClick.
10) 工具栏整行显示，选择bar工具条，设置OptionsBar/UseWholeRow = true
Created by fanco Page 10 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
11) 工具条固定在顶部不允许浮动或拖动到其它的地方，选择bar工具条，设置CanDockStyle 只选一
个top，去掉其它的选项，DockStyle =top。
12) 控件的图标去掉背景颜色，在Visual Studio 2005的ImageList有一个属性TransparentColor可
以处理。
8 StatusBars控件
8.1 设计参考
状态条要能显示用户切实需要的信息，常用的有：
目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间
较长，还应该显示进度条和进程提示。
状态条的高度以放置五号字为宜，滚动条的宽度比状态条的略窄。
8.2 实现效果
8.3 操作步骤
1)
2)
3)
4)
5)
从工具箱中拉barmanager到form中。
点击click here to add statusbar。
点击add new item 在上下文菜单中选择StaticText(BarStaticItem) 。
设置caption属性为公司名称：选择Border属性style3d。
设置AutoSize属性为Content(内容),Spring(扩展到最大宽度) 。
9 控件
9.1 网格控件
9.1.1 GridControl
9.1.1.1 GridControl描述
GridControl是一个功能强大，可定制性强的网格控件。允许你用GridView、CardView、BandedView、
AdvBandedView任何一种方式来呈现数据。GridView是最普通、最常用的一种。CardView显示的效果是
卡片式的，一条记录一个卡片。BandedView则体现在网格可复杂表头。AdvBandedView主要特色是一条
数据的二个字段可做到垂直，也就是字段的放置可以不在一条水平线上（其它三种不行）。您会发现，
超强的功能后面是无数的属性设置，下面是主要的设计时界面。
Created by fanco Page 11 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
序号
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
属性 属性说明
在GridView1ViewsOptionsCustomization有一些属性设置
AllowColumnMoving
AllowColumnResizing
AllowFilter
AllowGroup
AllowRowSizing
AllowSort
是否允许列改变位置。
是否允许列改变宽度。
列标题是否出现过滤的下拉列表。
网格是否允许按某一字段分组。
是否允许改变网格的行高。
是否允许单击列标题进行排序。
在GridView1ViewsOptionsMenu有一些属性设置
EnableColumnMenu
EnableFooterMenu
EnableGroupPanelMenu
显示与隐藏列标题右键菜单。
显示与隐藏网格脚的右键菜单。
显示与隐藏网格组面板的右键菜单。
在GridView1ViewsOptionsSelect有一些属性设置
MultiSelect
MultiSelectMode
是否允许选择数行。
数行选择的方式（
CellSelect，RowSelect
）。
在GridView1ViewsOptionsView有一些属性设置
AllowCellMerge
ColumnAutoWidth
NewItemRowPosition
RowAutoHeight
ShowAutoFilterRow
ShowFooter
ShowIndicator
ShowHorzLines
ShowVertLines
是否允许网格相邻单元格数据相同时合并为一个单元格。
网格的各列按网格的总宽自动调整宽度。
网格新增行时所在位置（
Bottom，Top，None）。
网格的行高根据单元格中字数的多少自动调整高度。
在网格中显示过滤的空白行。
显示与隐藏网格的脚面板。
显示与隐藏网格左侧的标识列。
显示与隐藏网格的水平网格线。
显示与隐藏网格的垂直网格线。
在GridView1Views有一些属性设置
FooterPanelHeight
RowHeight
网格脚面板的高度。
网格的行高。
在GridView1ColumnsOptionsColumn有一些属性设置。
ReadOnly 列是否只读。
在GridView1Columns有一些属性设置。
SummaryItemSummaryType 列汇总的类型（Sum,Max,Min,Average etc）。
Created by fanco Page 12 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
25
26
Fixed
GridControl数据绑定
列固定位置（
Left，Right，None
）。
urce 设置网格的数据源，绑定数据
一．GridControl以GridView、CardView、BandedGridView、AdvBandedGridView四种网格形态来呈现
数据，下图是它的继承关系图。
二．GridControl 控件属性，从工具箱中拖GridControl进入界面，如下图：
点击Click here to change view 可以在四种网格类型中切换，它们的区别是GridView是普通网格，
BandedGridView有Band,一个Band可以包含几个字段，advBandedGridView除了BandedGridView功能
之外，二个或多个字段可垂直堆放，表头能设计得更复杂，GardView则显示成员工卡片样的风格。
在控件的属性中datasource设置数据源。
Created by fanco Page 13 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
点击上图的Run Designer 或是在上图右键菜单中选择Run Designer，弹出设计界面如下：
左侧导航条各按钮的主要功能：
Main/Views 主要控制控件的一些整体的行为，如是否允许列上出现右键菜单，是否网格第一行出
现过滤行，是否出现定制的弹出窗口等。
Main/Columns 添加定制列，如列是否允许编辑等。
Main/Feature Browser 浏览gridControl网格的所有属性，如列信息，汇总信息，列的行为，排
序etc。
Main/Layout 网格的版面设计，在设置好属性后，网格的呈现，可以保存当前的网格版面到XML文
档，也可以从XML文档导入。
Main/Group Summary Items 指定分组的字段及统计类型（最大值，平均值，求和etc）。
Appearance/appearances 网格按区域（band）设计颜色字体等风格。
Appearance/Style Conditions 当某一列当前行的值为XXX条件时，格式化特殊显示如背景红色。
Appearance/Style Schemes 为当前网格披上外衣，显示格式化。
Repository/Viw Repository 浏览gridControl所有View(gridview ,cardview一个网格可以有多
个View)的属性和行为。
Repository/Viw Repository 网格中有TextEdit列时，编辑框的行为。
Printing/Print Appearances 设置网格各band面板的背景，前景及文本对齐等打印属性。
Printing/Printing Settings 设置网格各band面板是否允许打印出来。
往往我们需要关注是Main 栏的Views，Columns, Group summary Items这三个项。下面分别来看看它
们的属性。
Views属性
Created by fanco Page 14 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
Options 有很多可以由我们自由控制的选项，如允许编辑列etc
Options /OptionsBehavior 网格的行为控制，如滚动条的显示，展开组数据行。
Options /OptionsCustomization网格的一些控制，列能不能拖动etc。
Options /OptionsDetail 行数据的子表显示行为的控制。
Options /OptionsFilter 行过滤，过滤窗口列表的控制，如列宽度及显示行数。
Options /OptionsHints 单元格及列标题是否允许提示。
Options /OptionsLayout 列的控制。
Options /OptionsMenu 网格的列，网格脚，列分组的右键菜单是否显示。
Options /OptionsNavigate 控制光标，是否响应Tab键事件etc。
Options /OptionsPrint 网格的各Band面板是否允打印出来。
Options /OptionsSelection 是否允许选中多行等etc.
Options /OptionsView 可控制项最多，大部分操作都在这里，是否自动行高，过滤行是否出现etc.
AllowCellMerge = ture 允许单元格合并（同一列相邻的几行数据相同时，会合并只显示一个数据。）
NewItemRowPosition =(Top,Bottom) 设置新增行时，是在网格的顶部还是底部。
ShowAutoFilterRow = ture 在网格标题下会出现过滤行。便于检索数据。
ShowColumnHeader =false 网格标题顶部隐藏Header面板的出现。
ShowFooter =true 网格底部出现显示汇总信息的面板。
在OptionMenus下的EnableColumnMenu ,EnableFootMenu ,EnableGroupPanelMenu设置为False
不会在列标题，网格脚，组面板出现右键菜单。
Column属性
Created by fanco Page 15 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
如果在设计模式下设定网格的datasource则Field list会出现表中的所有字段。
如果datasource是用代码绑定的，则此处为空，可以点击Add增加字段，在属性FieldName 输入
表中的字段。
如果字段允许编辑的话，在ColumnEdit选择编辑的类型（文本框，按钮，下拉窗etc），如果不允
许编辑在OptionsColumn/AllowEdit=false（不出现编辑控件如日期选择控件）也可以设置
OptionsColumn/ReadOnly=false(出现编辑控件但不能改值)。
如果要整个网格控件列都不允许编辑，只能一个字段一个字段把AllowEdit属性设置为false了。
是否可让字段分组OptionsColumn/AllowGroup=false。
列宽的Width =200
Group summary Items属性
如果要在网格脚增加一些汇总信息，可点击Group summary Items按钮，在它的属性里click Add
按钮，设置FieldName = 字段 ,选择SummaryType =(Sum,Min,Max,Count,etc)。
Appearance 栏定制网格各部分颜色与渐变色。
Style Schema 则是选择网格的风格：
Created by fanco Page 16 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
三．如果您的网格切换到advBandedGridView或BandedGridView，则会在Main中多一个Bands项，如
下：
要添加复杂表头的标题可点击AddNewBand按钮，在属性caption 设置要显示的标题，在
AppearanceHeader/TextOptions/Haligment=（Near,Center,Far）可设置标题对齐方式。
ShowColumnsSelector 显示字段或Band的容器，可把字段拖到上面的网格中。
Delete Selected Band 删除光标所在的Band ，Band中的字段会放在ShowColumnsSelector弹出
的容器中。
9.1.1.2 GridControl特殊属性
一．
显示与隐藏GroupPanel面板,如果数据的显示要以某一字段分组来显示，用户可以拖动网格中的字
Created by fanco Page 17 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
段到Drag a column header here to group by that column
。
实现代码：oupPanel = d ;
二．显示与隐藏网格脚端的汇总值（最大值，平均值，求和等），如下：
实现上图网格脚汇总信息所示效果，界面操作步骤如下：
从工具箱中拖GridControl控件到form上。
单击控件上的Rum Designer,点击弹出窗口的Views,右铡属性栏OptionsView/Showfooter =false ，此
处还可以设置的属性有，AllowCellMerge.
实现代码:
显示网格脚 oter = d;
计算汇总信息
Created by fanco Page 18 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
ge(new
mmaryItem[]new
oupSummaryItem(yItemT
, "OrderID", s["OrderID"], ""),new
oupSummaryItem(yItemT
, "Freight", s["Freight"], "")});
s["OrderID"].yType =
;
s["Freight"].yType=
;
三．网格某一列相邻几个单元格值相同时自动合并，如下：
实现代码：
ellMerge = d;
四．
列字段是否允许编辑状态，如下：
Created by fanco Page 19 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
实现上图所示效果，界面操作步骤如下：
从工具箱中拖GridControl控件到form上。
单击控件上的Rum Designer,点击弹出窗口的Columns,右铡属性栏OptionsColumn/AllowEdit =false ，
此处还可以设置的属性有，ReadOnly.
实现代码：
s[2].dit = d;
五．
禁用与启用某一列列标题上的右键菜单，如下：
实现上图所示效果，界面操作步骤如下：
从工具箱中拖GridControl控件到form上。
单击控件上的Rum Designer,点击弹出窗口的Views,右铡属性栏OptionsMenu/EnableFooterMenu
=false ，此处还可以设置的属性有，EnableColumnMenu. EnableGroupPanelMenu
Created by fanco Page 20 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
实现代码：
ColumnMenu = d;
六．
是否启用网格脚的右键菜单，如下：
实现代码：
FooterMenu = d;
七、GridControl 网格都支持自动过滤功能：
实现代码：
toFilterRow = d;
八、GridControl 网格都支持运行时定制列的功能。订单与订单信息是Band， 每个字段都要放于Band
中，运行时可以调出Customization小窗口，用户可以把Band拖到网格，Column拖到Band下，定制复
杂的网格，如下：
Created by fanco Page 21 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
实现代码：
bool show = false;
private void simpleButton1_Click(object sender, EventArgs e)
{
show = !show;
ShowColumnSelector(show);
}
/// 显示隐藏
private void ShowColumnSelector(bool showForm)
{
if (show)
{
= "Hide Columns &Selector";
sCustomization(); // show form
}
else
{
= "Show Columns &Selector";
yCustomization();// hide small form
}
}
9.1.2 GridView
GridView是GridControl四种类型网格中最常用的一种，主要特性有：支持主从表数据展示，支持按字
段分组，排序和过滤数据，运行时用户定制列，数行选择。
Created by fanco Page 22 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
9.1.2.1 实现效果
9.1.2.2 操作步骤
1) 从工具箱中拖GridControl控件到form上。
2) 显示Group Panel ,单击控件上的Rum Designer,点击弹出窗口的Views,右铡属性栏
OptionsView/ShowGroupPanel =true。
3) 添加列，单击控件上的Rum Designer，弹出窗口，单击Columns ,在右侧单击Add按钮，添加一列，
默认列名为gridColumn1，您此时可以修改列的Name和Caption，Width属性，FieldName设置为
数据集dataset表中对应的字段。依次，添加所有的列。
4) 绑定数据源。
9.1.2.3 属性设置
1) 固定字段在网格的左边或右边，路径:GridView1ColumnsGridColumn1。
2) oHeigh行随单元格内容的多少决定行高。
路径:GridView1ViewsOptionsView。
9.1.3 CardView
CardView数据显示在卡片中,每个卡片中显示单一的一条记录。主要特性有：设计或运行时布局定制，
排序记录，过滤记录，多记录卡选择。
Created by fanco Page 23 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
9.1.3.1 实现效果
9.1.3.2 操作步骤
1) 从工具箱中定位到GridControl控件，并拖到form上。
2) 单击控件上的click here to change view 选择Convert to 选择子菜单CarView，列添加请转到
GridView部分查看。
9.1.3.3 CarView属性设置
1) ShowCardCaption卡标题可见开关设置，路径:CarView1ViewsOptionsView。
2) CardCaptionFormat 卡标题格式化，默认Record N {0}，设置{1}{2}显示第一第二列的值，路径：
CarView1Views。
3) ShowCardExpandButton卡数据收藏与扩展开关， 路径：CarView1ViewsOptionsView。
卡片在运行时，点击Customize,出现下拉页，用户可以勾选要出现在卡片上的字段，达到动态的效果，
如下
：
Created by fanco Page 24 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
Customize按钮也可以屏蔽，单击控件上的Rum Designer,点击弹出窗口的Views,右铡属性栏
OptionsView/ShowQuickCustomizeButton 设置为false。
9.1.4 BandedGridView
BandedGridView提供Band元素组织Columns逻辑分组。
9.1.4.1 实现效果
9.1.4.2 操作步骤
1) 在form 上添加GridControl
2) 在GridControl上的click here to change view 单击Convert to BandedGridView
3) 添加复杂表头
1. 点击AddNewBand按钮，在按钮上方的预览网格上会出现一个gridBand1,在属性caption 设置
要显示的标题，在AppearanceHeader/TextOptions/Haligment=（Near,Center,Far）可设置标
题对齐方式。
2. 您此时可以拖字段到gridBand1下面，如果设计模式下已经绑定到了数据源，但看不到一个字
段，可以点击ShowColumnsSelector，在弹出的小窗口Columns中，有数据源的字段，您可以拖
它们到预览网格的gridBand1下，也可以增加多个gridBand。
3. 如要删除gridBand，请单击Delete Selected Band，如果gridBand下面有字段，也会一起消
Created by fanco Page 25 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
失不见，但不是真正的删除了，而是收藏在ShowColumnsSelector弹出窗口的Columns中，您
可以再次把它拉到网格中。
4) 如果用代码绑定数据源：urce = ["Orders"];
5) AdvBandedGridView复杂表头的实现，跟上面一样，将不再赘述。
9.1.4.3 实现代码
// obtaining the main view and clearing its bands collection
BandedGridView view = ew as BandedGridView;
();
// creating the bands layout
GridBand bandGeneral = ("General Info");
GridBand bandTechnical = ("Technical Info");
GridBand bandEngine = ("Engine Info");
GridBand bandTransmission = ("Transmission Info");
// assigning columns to bands
and = bandGeneral;
and = bandGeneral;
and = bandEngine;
and = bandEngine;
and = bandTransmission;
and = bandTransmission;
9.1.4.4 属性设置
1) llDown属性, 假如向下没Band，Band高度自动垂直向下延伸，路径：
BandedGridView1BandsGridBand1。
2) nt属性，Band高度占用几行,实际是设置行高,路径：
BandedGridView1BandsGridBand1。
3) 属性，设置Band向网格的左边缘或右边缘固定不动。路径：
BandedGridView1BandsGridBand1。
9.1.4.5 ColumnEdit列
列的ColumnEdit下拉列表框有二种，LookUpEdit和GridLookUpEdit。LookUpEdit只能在单元格中输入
文本来过滤数据，GridLookUpEdit除了在单元格中输入文本外，还能在下拉的网格中有一个行过滤的功
能，每一个字段都可以过滤。当然单元格也能设定为不能编辑，而只让下拉网格中的列中的数据来过滤。
其实二者都可以实现同样的效果，但GridLookUpEdit提供更复杂的功能实现，有更多的可控性。下拉
网格的类型还可以为复杂表头。如下图：
Created by fanco Page 26 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
OrderID下拉框实现效果，界面操作步骤如下：
1) 在form 上添加GridControl .
2) 默认上面网格添加了OrderID，CustomerID,OrderDate，Freight等字段。
3) 在Columns的列表中选中OrderID字段，右侧属性ColumnEdit点开下拉，再点开New，选中树中的
LookUpEdit，ColumnEdit赋值为repositoryItemLookUpEdit1。
4) 在添加repositoryItemLookUpEdit1的列，展开ColumnEdit节点。点击Columns右铡的按钮，弹
出窗口，点添加（A）设置FieldName=＂LastName＂，Caption,width。
5) 再添加一列CompanyName．
6) 设置repositoryItemGridLookUpEdit的DataSource的数据源，DisplayMember显示的数据，
ValueMember单元格的值，PopupFormWidth 的弹出窗口的大小,etc。
7) TextEditStyle 设置为tandard，单元格允许编辑，光标出现，单元格的文本可以编辑。设置为
DisableTextEditor，单元格只能输入，不能删除，光标也不在单元格中出现。
8) 绑定数据源urce = ["Orders"];
9) GridLookUpEdit与repositoryItemGridLookUpEdit为同一控件，只是
repositoryItemGridLookUpEdit为GridControl所引用．
9.1.5 AdvBandedGridView
AdvBandedGridView 从BandedGridView继承，是子类，它继承BandedGridView的所有功能，再扩展。
Created by fanco Page 27 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
9.1.5.1 实现效果
9.1.5.2 操作步骤
1) 在form 上添加GridControl
2) 在GridControl上的click here to change view 单击Convert to AdvBandedGridView。
9.1.5.3 实现代码
在Load事件中添加下面的代码：
// assigning columns to bands
and = bandGeneral;
and = bandGeneral;
and = bandTechnical;
and = bandTechnical;
and = bandTechnical;
and = bandTechnical;
and = bandPrice;
// changing the columns layout within bands
dedGridView view = as
dedGridView;
umnPosition(colTrademark, 0, 0);
umnPosition(colModel, 1, 0);
umnPosition(colLiter, 0, 0);
umnPosition(colCylinders, 0, 1);
umnPosition(colSpeedCount, 1, 0);
umnPosition(colTransmission, 1, 1);
// forcing the Price column to stretch its header if needed
llDown = true;
Created by fanco Page 28 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
9.1.5.4 属性设置
1) ex属性， Column所属Band的列位置。
2) ex属性， Column所属Band的行位置。
9.2 XtraLayout控件
9.2.1 特性
界面缩放，里面的控件自动缩放。
控件自动对齐。
几个控件成组或Tab页，取消组或取消Tab页。
界面缩放时，锁定控件的大小。
运行时，用户自定义界面各控件的位置，保存和导入设置的布局。
9.2.2 实现效果
9.2.3 操作步骤
1) 在工具箱中定位到layoutControl控件，拖进FORM。
2) 选中layoutControl，按F4键，设置Dock属性为Fill。
3) 在工具箱中定位到TextEdit拖入layoutControl控件中（创建了一个新的layout Item）。
4)
设置Item的Text属性为User Name。
5) 在工具箱中定位到SimpleButton控件，拖二个到layoutControl控件中，设置SimpleButton1的
Text属性为OK，设置SimpleButton2的Text属性为Cancel。
6) 选中Cancel对应的layoutControlItem3，拖到OK的右侧。
7)
选中任意一个layoutControlItem，右键选择
Show Customization Form
。
8) 在打开的Customiztion Form中，拖Empty Space Item到OK的上面。
9) 再拖一个Empty Space Item到OK按钮的左侧，OK宽度缩小一半。
10) 向右拉动OK的边框，设置OK的宽度与Cancel的宽度一样大。
11) 调整Form及各控件的大小如上图效果。
12) 在选中任意一个layoutControlItem的右键菜单中，还有一些菜单项可以设置。可根据需要进行布
局的设置。
Created by fanco Page 29 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
9.3 XtraTab控件
9.3.1 设计参考
控件的"TabOrder"属性值应该与控件排列顺序一致，即遵循从上到下、从左到右这样一个流程。如
果在PageControl的多个页面中存在类似的控件，应该尽量使得它们在各个页面中出现的位置/大
小比较一致，以免在页面间切换时产生闪烁感。
9.3.2 效果及代码
XtraTabControl，可以多个tab标题重叠来显示，只要设置Multiline属性就可。
实现
代码：
if (d)
ine = ;
else
ine = ;
XtraTabControl，也可以隐藏tab标题的显示，在不同tab页切换时，好像在同一tab页感觉一样。
实现代码：
if(d)
bHeader = ;
else
bHeader = ;
9.4 PivotGrid控件
PivotGridControl是一种对大量数据进行分析的交叉表网格控件，网格的字段分为行字段、列字段、过
Created by fanco Page 30 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
滤字段、数据字段，运行时这些字段可由用户按不同的分析维度拖动到其它的区域。可对字段进行过滤，
指定汇总类型、排序等。网格布局可以保存与还原，汇出数据为Html、pdf、xls等格式的文件或流、
也可打印。
9.4.1 实现效果
9.4.2 操作步骤
1) 拖PivotGridControls到Form上。
2) 在控件上右键，选择Run Designer ，弹出界面如下
Created by fanco Page 31 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
3) 单击Main/Fields，添加字段，点击Add按钮，设置字段的属性Caption,FieldName,Name
4) 点击Layout按钮，拖拉字段，设计显示出来的网格布局，您会看到，在右侧的网格上有文本，Drop
Columns Fields Here , Drop Row Fields Here, Drop Data Items Here,Drop Filter Fields Here
基本上分字段，列字段，行列交叉处的数据字段，还有顶部的过滤字段。您可以把字段拖到各个区
域。
5) 在控件上按F4的属性中您可以设置DataSource为一个数据源，也可以代码绑定数据源
urce = ["Orders"];
9.5 XtraTreeList控件
XtraTreeList树控件，可以绑定多种数据源，也可以树或网格显示，支持节点数据拖拉，子节点动态加
载，树脚显示SUM等摘要信息，支持不同类型的节点数据编辑（datetime,image），树打印，树节点运
行时定制。
序号
1
2
3
4
5
绑定数据源
DataSource
ParentFieldName
KeyFieldName
PreviewFieldName
RoolValue
设置绑定的数据源。
父节点字段。
节点字段。
节点显示的文本字段。
父节点的值。
Page 32 of 49 Created on 4/25/2022 3:17:00 AM
属性 属性说明
Created by fanco
广州市扬基信息科技有限公司 - 技术研发组
6
7
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
OptionsBehavior有一些属性设置
Editable
OptionsView有一些属性设置
AutoWidth
ShowButtons
ShowColumns
ShowHorzLines
ShowVertLines
ShowIndicator
ShowRowFooterSummary
ShowSummaryFooter
字段是否适应树控件的宽度。
显示与隐藏节点上的带加减号的小图标。
显示与隐藏树的列标题。
显示与隐藏树的水平线。
显示与隐藏树的垂直线。
显示与隐藏树的左侧标识列。
显示与隐藏树的父节点的行脚汇总信息。
显示与隐藏树的树脚汇总信息。
所有字段是否可编辑。
TreeListColumns有一些属性设置
ColumnEdit
FieldName
RowFooterSummary
SortOrder
SummaryFooter
Caption
FormatFormatType
FormatFormatString
树的编辑列类型选择。
列字段名。
行的汇总类型（Sum、 Count、Average、Min etc）。
列排序类型（Ascending、Descending、None）。
树脚的汇总类型（Sum、 Count、Average、Min etc）。
列的标题文本。
格式化类型（Custom、Numeric、DateTime、None）。
格式化设置 当Custom 此处设置为c,显示为货币符号。
Created by fanco Page 33 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
9.5.1 实现效果
9.5.2 操作步骤
1) 从工具箱中拖TreeList到form中。
2) 设置TreeList的OptionsView属性,ShowColumns、ShowHorzLines、ShowIndicator、ShowVertLines
属性为false(隐藏列，隐藏水平垂直线);
3) 在TreeList右键菜单中选择Run Designer,弹出下面窗体
Created by fanco Page 34 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
4) 点击上图的Add Button添加列，修改Name,Caption属性。
5) 修改列的属性Width=200,列隐藏VisibleIndex=-1(0显示)。
6) 在TreeList右键菜单中选择Nodes Editor,弹出下面窗体：
Created by fanco Page 35 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
7) 点击Add Root ,Add Child button添加树节点。
8) TreeList用到的事件有FocusedNodeChanged。
9.5.3 实现代码
public virtual void LoadTree(string RootText)
{
ge(new stColumn[] {
Column("Column1", 130, 0),
Column("Column2", 20, -1),
Column("Column3", 20, -1),
Column("Column4", 20, -1)});
s[0].dit = false;
Node(new object[] {"全部","","",""}, -1, 0, 1, -1);
int parentID = 0;
TreeDataTable = eData();
//添加根节点
DataRowView tempDR;
DataView tempView = new DataView(TreeDataTable, CodeField + " = '"
+ TreeRootNode + "'", yField, tRows);
for (int i = 0; i < ; i++)
{
tempDR = tempView[i];
Created by fanco Page 36 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
Node(new object[]
{tempDR[owField].ToString().Trim(),
tempDR[yField].ToString().Trim(),
tempDR[CodeField].ToString().Trim(),
tempDR[rentCodeField].ToString().Trim()}, 0, 0, 1, -1);
parentID = entID(TreeView, "Column2",
tempDR[yField].ToString().Trim());
AddSubNode(tempDR[yField].ToString().Trim(), parentID);
}
All();
}
9.5.4 属性设置
1) ue()获取节点的值，代码：
object cellValue2 = [0].GetValue(columnID);
2) playText()获取节点显示的值，代码：
string cellText = [0].GetDisplayText(columnID);
9.6 LookUpEdit控件
9.6.1 实现效果
LookUpEdit跟gridControl中列编辑出现的下拉窗口repositoryItemLookUpEdit1类似，操作也基本相
同。
9.6.2 操作步骤
1) 在form 上添加LookUpEdit
2) 添加列，在LookUpEdit上右键，选中Edit Columns，在弹出的窗口中，点击添加（A）来添加列，
此时有Caption ,FieldName,Visible,Width,Alignment可以设置。
Created by fanco Page 37 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
3) 其它大多的属性在LookUpEdit的属性的properties中可以设置，下面来看一下有那些可以设置：
Columns列的添加除了上面的右键，也可以在Columns中添加。
DataSource设置网格的数据源。
DisplayMember显示在单元格中的文本。
ValueMember 单元格保留的值。
PopupFormWidth除了设置列的宽外，弹出下拉的窗口的总宽在这里控制。
ShowFooter下拉窗口默认是有一个按钮可以关闭的，设置为false，则不显示那个关闭按钮。
TextEdityStyle 设置单元格允不允许输入文本default可以置光标。
控件的单元格中默认有文本EditValue is null，在NullText可以清除。
4．网格绑定数据源：urce = ["Orders"];
序号
1
2
3
4
5
6
7
8
9
10
属性
EditValue
Text
Text
EditValue
属性说明
取控件当前选中项的值。
取控件当前选中项的文本。
给控件以显示的文本赋值，但如果控件ReadOnly,则失效。
给控件以值的方式赋值，控件自动跳到对应的项显示。
在Properties有一些属性设置
DisplayMember
ValueMember
DataSource
PopupWidth
DropDownRows
设置数据绑定的显示文本字段。
设置数据绑定的值字段。
设置数据绑定的数据源。
下拉列表的宽度。
下拉列表的行数。
DropDownItemHeight 下拉列表的行高。
Page 38 of 49 Created on 4/25/2022 3:17:00 AM Created by fanco
广州市扬基信息科技有限公司 - 技术研发组
11
11
12
13
ShowHeader
ShowFooter
ShowLines
TextEditStyle
显示与隐藏下拉列表的头。
显示与隐藏下拉列表的脚。
显示与隐藏下拉列表的网格线。
枚举值（Standard可以编辑值，HideTextEditor看不到选择
的文本，DisableTextEditor不能编辑文本，只能选择项）。
枚举值（AutoComplete逐个字的过滤，AutoFilter输入一个
字，后面相应的文本会自动显示出来，OnlyInPopup只有完全
输入正确，才定位到相应的项）。
控件没有选择时的空文本设置。
控件的下拉列表不能显示，不能选值或输值，只能通过值的
方式赋值。
14
15
16
SearchMode
NullText
ReadOnly
9.7 GridLookUpEdit控件
9.7.1 设计参考
筛选条件行位于数据行的顶端。
9.7.2 实现效果
GridLookUpEdit跟gridControl中列编辑出现的下拉窗口repositoryItemGridLookUpEdit1是同一对
象，操作也相同，如图：
9.7.3 操作步骤
1) 在form 上添加GridLookUpEdit
Created by fanco Page 39 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
2) 添加列，在GridLookUpEdit上右键，选中DesignView，在弹出的窗口中，点击添加Columns/Add
来添加列，此时有Caption ,FieldName,Visible,Width等属性可以设置，在OptionsColumn中也
有一些属性可以设置。
3) 回顾一下Main/Views/OptionsView下的属性：
ColumnAutoWidth如果在添加列时设置了width属性，如果这里不为false,那里设置的宽将不起作
用。
ShowAutoFilterRow设置是否在下拉窗口的顶部出现一行空白的过滤行，可以输入数据来过滤。
4) ShowColumnHeader是否显示列的标题。
5) ValueMember 单元格保留的值。
6) 在GridLookUpEdit的Properties中也有一些属性设置。如PopupFormWidth，除了设置列的宽外，
弹出下拉的窗口的总宽在这里控制。
ShowFooter，下拉窗口默认是有一个按钮可以关闭的，设置为false，则不显示那个关闭按钮。
TextEdityStyle ,设置单元格允不允许输入文本default可以置光标。
控件的单元格中默认有文本EditValue is null，在NullText可以清除。
ViewType,网格的类型，有defalut,GridView,BandGridViw,AdvBandGridViw,复杂表头也能实现。
7) 网格绑定数据源：urce = ["Orders"]。
8) 如果控件直接绑定到一个表中的字段：("EditValue",
["Orders"], "OrderID"); // EditValue是控件的属性，如果用Text属性则会出
现，选一条记录，焦点离开控件时单元格值会清空。用EditValue属性，则是控件单元格本身应赋
的值。
序号
1
2
3
属性
EditValue
Text
EditValue
属性说明
取控件当前选中项的值。
取控件当前选中项的文本。
给控件以值的方式赋值，控件自动跳到对应的项显示。
Page 40 of 49 Created on 4/25/2022 3:17:00 AM Created by fanco
广州市扬基信息科技有限公司 - 技术研发组
4
5
6
8
9
10
11
12
13
10
11
12
13
14
15
16
17
18
在Properties有一些属性设置
DisplayMember
ValueMember
DataSource
PopupFormWidth
ShowFooter
PopupSizeable
ReadOnly
TextEditStyle
设置数据绑定的显示文本字段。
设置数据绑定的值字段。
设置数据绑定的数据源。
下拉网格的宽度。
显示与隐藏下拉列表的脚。
下拉网格可拉大拉小。
不能选值或输值，只能通过值的方式赋值。
枚举值（Default 、GridView、BandedView、AdvBandedView）。
在PropertiesView有一些属性设置
RowHeight
OptionsView
ColumnAutoWidth
OptionsView
ShowAutoFilterRow
OptionsView
ShowColumnHeaders
OptionsView
ShowIndicator
OptionsView
ShowHorzLines
OptionsView
ShowVertLines
下拉网格的行高。
网格中的列自适应到网格的总宽。
下拉网格的顶端出现一条空白的行可用来过滤。
是否显示网格头。
是否显示网格左侧的标示列。
是否显示网格的水平数据线。
是否显示网格的垂直数据线。
在PropertiesColumns有一些属性设置(Add Column)
FieldName
Caption
Width
输入列绑定的字段。
列的标题。
列的宽度。
9.8 GridPrint控件
打印GridControl控件, GridControl所见即所得，四种类型的网格都可以打印。要显示如下的界面需
要二个打印控件printBarManager和printingSystem，printBarManager拖到界面上后会出现如下图所
示的界面，printingSystem则是指定printBarManager要显示的数据源。如要打印非Grid控件数据，
可以在添加，然后在Link的事件，写要画数
据的文本或图像代码来实现。可以满足不同需求的报表。
Created by fanco Page 41 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
9.8.1 实现效果
下面来看看printingSystem的属性与设定:
1) 点开printingSystem属性，出现下面界面
2) 点击Links属性，弹出如下界面
Created by fanco Page 42 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
要打印GridControl 就要点击Add按钮在下拉项中选择inting.
PrintableComponentLink,添加它，在右侧的属性Compoment选择您要打印的GridControl对象，这里
是gridControl1.点击ok，结束设置。
此界面列出的一些事件可以用来定制打印，如添加打印的标题，（XXX报表）每个不同的事件对应报表
的不同区域，在每个事件中添加画的代码。
private void printableComponentLink1_CreateMarginalHeaderArea(object sender,
CreateAreaEventArgs e)
{
//创建表头
//centers a text string horizontally and vertically
Format = new BrickStringFormat(,
);
= new Font("Batang", 16);
ring("扬基信息科技有限公司网格报表测试", , new Rectangle(200, 25,
400, 25), 阵);
}
Created by fanco Page 43 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
上面事件对应在报表中的位置
要打印GridControl网格在Load事件中添加下面的代码：
Document();这句代码用来启动打印。
因为GridControl网格可在运行时由用户拖动定制字段，所以报表的呈现完全可以由用户拖拉实现。
9.9 Button控件
9.9.1 设计参考
主命令按钮一般情况为75×21象素，如果按钮的文本很长，应该适当加宽按钮的宽度。
"确定"和"取消"按钮一般被映射为Enter键和Esc键，不应该对它们指定访问键。
Created by fanco Page 44 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
默认按钮要支持Enter即选操作，即按Enter后自动执行默认按钮对应操作。
与正在进行的操作无关的按钮应该加以屏蔽(Windows中用灰色显示，没法使用该按钮)。
将命令按钮靠底部或右边放置，人们习惯于从左到右、从上到下进行阅读。
按钮大小基本相近，忌用太长的名称。
避免使用多行或多列的主命令按钮，多行或多列的主命令按钮对用户是一个打击。
右对齐主命令按钮。
绝对不要指定双击行为，用户意料不到命令按钮会响应双击，因此不可能发现这样的行为。
9.10 CheckBox控件
9.10.1 设计参考
避免一组复选框中选项个数超过8个。
竖向对齐，竖向对齐的一组复选框更易于浏览。
要有默认选项。
9.11 GroupBox控件
9.11.1 设计参考
总给组合框提供一个标签，来表明组合框的用途。
避免组合框的列项少于4考虑用单选按钮代替。
9.12 Label控件
9.12.1 设计参考
左对齐静态文本标签，使得标签外观更有条理，且易于浏览。
总在用于标识控件的静态文本标签后带上冒号，表示为控件标签的文本。
宁可将静态文本标签置于相关控件的左边，而不是上面，标签更易于被发现。
不要把静态文本置于凸起的边界上，看起来像按钮，用户会试图单击它。
在标识控件用途的标签文本（Label）和提示信息（Hint）中，应使用半角符号。如果是指导性标
签文本（如解释按钮功能的句子），则使用全角符号。
标签提示:字体为不加重、宋体、黑色、灰底或透明、无边框、右对齐、一般情况为五号（10号）。
绝对不要使用两行以上的标签，最好使用一行标签，但两行也是可接受的，两行以上就太多了。
9.13 listBox控件
9.13.1 设计参考
总给列表框提供一个标签，来标明列表框的用途。
使列表框至少5行长。
对多个选择考虑采用复选框，复选框列表可以突出其多个选择的能力。
对多选列表考虑提供"全部选中"和"全部取消选中"命令。
要有默认选项。
Created by fanco Page 45 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
9.14 ListView控件
9.14.1 设计参考
总给列表视图提供一个标签，必须用标签来标明列表视图的用途。
列表可排序时采用可单击的表头，可单击的表头只应用于排序。
10 界面输入控制
10.1 设计参考
disable而不是not visible。要使一个功能有时允许有时不允许用户使用，则这个控件的不能随
便隐藏，应该使用disable属性进行表示，以免用户发现控件失踪后措手无策。
尽量提供对所有功能的键盘、鼠标访问。
尽量减少用户输入动作的数量。
对于有大量录入项的界面，能让用户不使用鼠标即可完成快速数据录入。
可写控件检测到非法输入后应给出说明并能自动获得焦点。
在当前动作的语境中使不合适的命令不起作用。
提供控件的默认值，最好的默认值是用户最后输入的值。
消除冗余输入。可能的话提供缺省值、绝不要让用户提供程序中可以自动获取或计算出来的信息。
11 弹出子窗体
11.1 设计参考
父窗体或主窗体的中心位置应该在对角线焦点附近。
子窗体位置应该在主窗体的左上角或正中。
多个子窗体弹出时应该依次向右下方偏移，以显示窗体出标题为宜。
屏幕大小1024*768弹出窗体大小尽量不要超过800*600,大小1024*768弹出窗体大小尽量不要超过
640*460, 并且高和宽的比应该大致保持为3:4（或4：3）。
不要在作为二级窗口的对话框中使用菜单栏，使用这种对话框需要付出很多努力，在所有对话框中，
快捷菜单和菜单按钮都是可以接受的。
12 消息框设置
12.1 设计参考
对于模式窗体用“确定”和“取消”，非模式窗体提供“关闭”而不提供“确定”和“取消”按钮。
Created by fanco Page 46 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
问用户问题时，采用"是"和"否"按钮代替"确定"和"取消"按钮。
信息以用户可以理解的术语描述,信息的表达要言简意赅，避免使用冗长的文字给用户反馈。
信息应伴随着视觉上的提示，如特殊的图像、颜色或信息闪烁。
避免错误号图标，除非这个错误号对用户真正有用，否则不要给出错误号。
口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字。
避免激烈的词语，如fatal（致命的）、execute（执行）、kill（杀死、毁掉）、terminate（终
止）、和abort（中止）。信息不能带有判断色彩，即任何情况下不能指责用户。
免在错误消息文字中使用词语bad（糟糕的、坏的）、error（错误）、fatal（致命的）、illegal
（非法）、invalid（无效）和warning（警告），而应该使用更具体的描述性词语解释到底是什么
出了错，提供如何从错误中恢复的建设性意见。
信息应指出错误可能导致那些不量后果，以便用户检查是否出现了这些情况或帮助用户进行改正。
对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。
执行动作要提示, 当用户点击按钮等动作进行一个工作时：
(1) 弹出交互对话框让用户点击确认。
(2) 改变UI中控件参数提示：(处理不用用户确认的提示，有一定延时，或者用户按键后自动清除。)
如：改变标题栏字符串，显示“信息：提交成功”,或者专门设置一个状态栏、TLable等用来进行提
示。
13 向导使用原则
13.1 设计参考
对高级的、复杂的或不常用的任务使用向导，向导对非常高级或复杂的任务十分有用，省去了用户
许多麻烦的操作，对于应用中某些部分的处理流程是固定的， 使用户得到必要的引用应该使用向
导，处理流程应该不少于3个处理步骤。
14 Tab键和快捷键设置
14.1 设计参考
在一个窗口中按tab键,移动聚焦的顺序不能杂乱无章,tab 的顺序是先从上至下，再从左至右。一
屏中首先应输入的和重要信息的控件在tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。
布局力求简洁、有序、易于操作。
在Windows及其应用软件中快捷键的使用大多是一致的。
面向事务的:
Ctrl-D 删除
Ctrl-F 寻找
Ctrl-I 插入
Ctrl-N 新记录
Ctrl-S 保存
查询/列表:
Ctrl-O打开
Ctrl-R
其它:
Ctrl-C 拷贝
Created by fanco Page 47 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
Ctrl-H 帮助
Ctrl-P 打印
Ctrl-V 粘贴
Ctrl-W 关闭
Ctrl-X 剪切
MS Windows保留键:
Ctrl-Tab 下一窗口
Ctrl-Esc 任务列表
Ctrl-F4 关闭窗口
Alt-F4 结束应用
Alt-Tab 下一应用
Enter 缺省按钮/确认*作
Esc 取消按钮/取消*作
Shift-F1 上下文相关帮助
其它快捷键 ，其它快捷键使用汉语拼音的开头字母，不常用的可以没有快捷键。
界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。
保持分配的快捷键的一致性组合功能键和Ctrl键用于快捷键。习惯上不将Alt键用于组合键，
业务Alt键常常被用于访问键。尽量避免使用Alt键和Ctrl键。
15 系统响应时间
15.1 设计参考
鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况，例如某些软件中一个手的形状就有
4种不同的样子
。
系统响应时间包括两个方面：时间长度和时间的易变性。用户响应时间应该适中，系统响应时间过
长，用户就会感到不安和沮丧，而响应时间过短有时会造成用户加快动作节奏，从而导致错误。
响应时间长度 界面设计
0-10 秒 鼠 标 显 示 成 为 沙 漏
10 到18 秒 由微帮助来显示处理进度
18 秒 以 上 显示处理窗口，或显示进度条
一个长时间的处理完成时 应给予完成警告信息
16 登陆窗体与主界面
16.1 设计参考
登录界面上要有本产品的标志，同时包含公司图标。
主界面，最好是大多数界面上要有公司图标。
公司的系列产品要保持一直的界面风格，如背景色、字体、菜单排列方式、图标、安装过程、按钮
用语等应该大体一致。
Created by fanco Page 48 of 49 Created on 4/25/2022 3:17:00 AM
广州市扬基信息科技有限公司 - 技术研发组
17 系统帮助设置
17.1 设计参考
帮助菜单的“关于”中应有版权和产品信息。
帮助文档中的性能介绍与说明要与系统性能配套一致。
操作时要提供及时调用系统帮助的功能，常用F1。
最好提供目前流行的联机帮助格式或HTML帮助格式。
帮助信息的构造，采用分层式帮助。
用户可以用关键词在帮助索引中搜索所要的帮助，当然也应该提供帮助主题词。
在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置，也就是说帮助要有即时针对
性。
微帮助提供，由状态栏提供，或控件上的提示文本。
如果没有提供书面的帮助文档的话，最好有打印帮助的功能。
在帮助中应该提供我们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式。
打包新系统时，对作了修改的地方在帮助文档中要做相应的修改。
18 附录
美工作为界面美化的主要人员，不但拥有艺术设计、包装设计的才能，还应该穿插整个项目，给界面程
序设计人员提出系统参考意见。
1、软件设计前期，美工参与需求了解，分析同类软件界面有缺点，提出主色调、典型界面风格、以及
构思整个美术包装等。
2、界面原型设计过程中，与开发人员共同修改、商榷最终表现样式，以及确立UI标准。
3、程序开发过程中，提供标准风格的资源文件（icon,cur,bmp等），并总结出统一风格的资源的设计
过程，形成规范文档。
4、产品化方面，协助制作帮助文件、网站风格以及参与制作，制作附带宣传图片、动画、产品包装、
海报等。
Created by fanco Page 49 of 49 Created on 4/25/2022 3:17:00 AM
版权声明：本文标题：DevExpress控件使用详细说明 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1713372439a631383.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论