DevExpress控件使用详细说明_第1页
DevExpress控件使用详细说明_第2页
DevExpress控件使用详细说明_第3页
DevExpress控件使用详细说明_第4页
DevExpress控件使用详细说明_第5页
已阅读5页,还剩42页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

界面规范[V]拟制人______________________审核人______________________批准人______________________[二零零七年二月二十六日]日期作者版本备注200范拥华目录TOC\o1 规范性 42 系统颜色、字体、图标 4 设计参考 43 Form控件布局与间距 5 设计参考 54 对齐设置 6 设计参考 65 BarManager控件 6 实现效果 66 菜单 8 设计参考 8 实现效果 8 操作步骤 8 实现代码 97 工具栏 10 设计参考 10 实现效果 10 操作步骤 108 StatusBars控件 11 设计参考 11 实现效果 11 操作步骤 119 控件 11 网格控件 11 GridControl 11 GridControl描述 11 GridControl特殊属性 16 GridView 21 实现效果 22 操作步骤 22 属性设置 22 CardView 22 实现效果 23 操作步骤 23 CarView属性设置 23 BandedGridView 24 实现效果 24 操作步骤 24 实现代码 25 属性设置 25 ColumnEdit列 25 AdvBandedGridView 26 实现效果 27 操作步骤 27 实现代码 27 属性设置 28 XtraLayout控件 28 特性 28 实现效果 28 操作步骤 28 XtraTab控件 29 设计参考 29 效果及代码 29 PivotGrid控件 29 实现效果 30 操作步骤 30 XtraTreeList控件 31 实现效果 31 操作步骤 32 实现代码 33 属性设置 34 LookUpEdit控件 34 实现效果 34 操作步骤 34 GridLookUpEdit控件 35 设计参考 35 实现效果 35 操作步骤 36 GridPrint控件 37 实现效果 37 Button控件 40 设计参考 40 CheckBox控件 40 设计参考 40 GroupBox控件 40 设计参考 40 Label控件 41 设计参考 41 listBox控件 41 设计参考 41 ListView控件 41 设计参考 4110 界面输入控制 41 设计参考 4111 弹出子窗体 42 设计参考 4212 消息框设置 42 设计参考 4213 向导使用原则 43 设计参考 4314 Tab键和快捷键设置 43 设计参考 4315 系统响应时间 44 设计参考 4416 登陆窗体与主界面 44 设计参考 4417 系统帮助设置 44 设计参考 4418 附录 44规范性通常界面设计都按Windows界面的规范来设计,即包含“菜单条、工具栏、工具箱、状态栏、滚动条、右键快捷菜单”的标准格式,可以说:界面遵循规范化的程度越高,则易用性相应的就越好。系统颜色、字体、图标设计参考Form背景颜色缺省为"#EFEFEF",大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C前景与背景色搭配合理协调,反差不宜太大,最好少用深色,如大红、大绿等。如果使用其他颜色,主色要柔和,具有亲和力与磁力,坚决杜绝刺目的颜色。中文采用标准字体,“宋体”、宋体的小五号字(9磅)、黑色。菜单和状态条中通常使用10号字。字体的大小要与界面的大小比例协调,通常使用的字体为宋体9-12较为美观,很少使用超过12号的字体。避免使用粗体和斜体用粗体来吸引人的注意,用斜体表示着重,但还是要少使用。避免混合字体任何不包含文档的窗口最多包含两种不同的字体。不要用字母全为大写的单词,这样看起来像在冲用户大喊大叫一样。界面风格要保持一致,字的大小、颜色、字体要相同,除非是需要艺术处理或有特殊要求的地方。不同界面中的同一功能应该使用同样的图标和图片。图标、图片的色调、风格尽量保持一致,隐喻应能确切表示功能的含义。有标准的图标风格设计,有统一的构图布局,有统一的色调、对比度、色阶,以及图片风格。Form控件布局与间距设计参考应该将重要信息放在上面和左边。左上角最容易吸引起人们的注意力。用户首先要看到或操作的控件设置焦点。屏幕不能拥挤,拥挤的屏幕让人难以理解,因而难以使用。让人看上去,不能太拥挤,也不能太松散。布局要合理,不宜过于密集,也不能过于空旷,如果没有其他内容,那么应尽量使窗口小一些。按功能将界面划分局域块,完成相同或相近功能的按钮用Frame框起来,并要有功能说明或标题。控件与窗体的上、下、左、右边距保持10pix,Label与文本框间距保持10pix。整个项目,采用统一的控件间距,通过调整窗体大小达到一致,即使在窗体大小不变的情况下,宁可留空部分区域,也不要破坏控件间的行间距。同一界面上的控件数最好不要太多,太挤时可以考虑使用分页界面显示,分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab.DevExpress中LayoutControl布局网格有助于您在不同的窗口之间实现一致性,控件size随Form缩放。控件长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度。按钮的大小要与界面的大小和空间要协调,按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置,避免空旷的界面上放置很大的按钮。界面空间较小时使用下拉框而不用选项框。选项数较少时使用选项框,相反使用下拉列表框。使用缩进和文本来辅助理解;避免水平滚动条,与垂直滚动条不同,水平滚动条并不受欢迎,因为它会使项目阅读起来比较困难。应用程序应该保持为最大化当应用程序占用整个屏幕时,常常能够提高用户的工作效率。窗体最小化和最大化时,窗体上的控件也要随着窗体而缩放。FORM要保持一至的界面风格、如背景色、字体、字的大小。对齐设置设计参考左对齐:一般文字、单个数字、日期等。右对齐:数字、时间、日期加时间。通常,使用左对齐来使用户界面控件更易于浏览。对于数值文本,应该使用小数点对齐或右对齐。对于非数值文本,应该避免使用右对齐或居中对齐。不必对什么都使用中间对齐,或者使它们保持对称形式。在右边或底部保留空白区域更适合习惯。BarManager控件BarManager控件,一改VisualStudio2005MenuStrip,ToolStrip,StatusStrip三分天下局面,而把三个控件揉合在BarManager中统一管理。实现效果BarManager菜单新增时的项:菜单,工具,状态栏中的分隔符不再是VisualStudio2005中添加‘——’来实现,而是勾选BeginaGroup时出现分隔符。菜单,工具,状态栏要用到图标,必须在BarManager的Images中设置imageList对象,在要用到处的ImageIndex指定索引。菜单设计参考菜单通常采用“常用--主要--次要--工具--帮助”的位置排列,符合流行的Windows风格。常用的有“文件”、“编辑”,“查看”等,几乎每个系统都有这些选项,当然要根据不同的系统有所取舍。如果菜单选项较多,应该采用加长菜单的长度而减少深度的原则排列,菜单深度一般要求最多控制在三层以内。主菜单的宽度要接近,字数不应多于四个,每个菜单的字数能相同最好。菜单前的图标能直观的代表要完成的操作,图标不宜太大,与字高保持一致最好。完成相同或相近功能的菜单用横线隔开放在同一位置。保持菜单稳定,将无效菜单置为不可用,而不要删除它们。用省略号来表示需要更多信息。用复选标记来开关选项,用单选组来改变模式。常用菜单要有命令快捷方式.分配访问键,访问键使用户可以手不离开键盘进行操作。右键快捷菜单采用与菜单相同的准则。帮助菜单的“关于”中应有版权和产品信息。实现效果操作步骤普通菜单:从工具箱中拉barManager到主窗体中。点击clickheretoaddmainmenu。选择上下文菜单中的Menu(BarSubItem),Caption属性设置为"系统管理"。点击"系统管理",Addnewitme,在上下文菜单中选择button(BarButtonItem),Caption属性设置为"重登录"。点击"系统管理",Addnewitme,在上下文菜单中选择Menu(BarSubItem),Caption属性设置为审核流程管理。添加下级菜单过程重复上一步。添加分隔符。在审核流程管理菜单项上右键,选择上下文菜单中选择beginagroup.菜单项BarButtonItem的事件为ItemClick.带图标的菜单:从工具箱中拉imagelist到Form中,添加imagelist1位图。为barmanager1属性Images设置imagelist1。为添加图标的菜单项的ImageIndex属性选择图标索引。PopupMenu右键菜单.PopupMenu快捷菜单如图:操作步骤:从工具箱中拖barManager控件到form上。把popupMenu拖到form上。在popupMenu上右键选Customize弹出如下界面,不要点击New按钮,而是在PopupMenuEditor下加上要出现的菜单项。在要出现快捷菜单的控件上右键属性BarManager上的,选中popupMenu,完成设置。实现代码主菜单实现代码BarManagerbarManager1=newDevExpress.XtraBars.BarManager();DevExpress.XtraBars.Barbar1=newDevExpress.XtraBars.Bar();barManager1.Bars.AddRange(newDevExpress.XtraBars.Bar[]{this.bar1});bar1添加菜单项BarSubItemobjSubMenuItem=newBarSubItem();objSubMenuItem.Name=“objSubMenuItem1”objSubMenuItem.Caption=“系统管理”;.Add(objSubMenuItem);“系统管理”菜单添加子菜单项BarButtonItemobjMenuItem=newBarButtonItem();objMenuItem.Name=“objMenuItem1”objMenuItem.Caption=“重登录”;.Add(objMenuItem);工具栏设计参考工具栏Button的Size大小为42,39。采用大工具栏按钮、工具栏应该只包含几个带有描述性文字和图形的显眼命令,工具栏的图标能直观的代表要完成的操作。相同或相近功能的工具栏放在一起。工具栏中的每一个按钮要有及时提示信息,工具提示帮助用户了解工具栏按钮的作用。保持工具栏稳定,将无效的工具栏按钮置为不可用,而不是将它删除。提供显示或隐藏工具栏选项。工具栏太多时可以考虑使用工具箱。实现效果操作步骤从工具箱中拉barManager到MainForm中。点击clickheretoaddtoolbar,添加一个工具条。点击addnewitem,在上下文菜单中选择largebutton(barlargebuttonitem),设置caption属性为"首笔",MinSize(42,39)设置高与宽。从工具箱中拉imagelist到Form中,添加imagelist1位图。为barmanager1属性Images设置imagelist1。设置"首笔"工具图标,为属性imageindex选择图标索引,panitstyle属性选择CaptionGlyph。图片和文字有4种显示方式,在barButtonItem的属性PaintStyle可选择,Standard(只显示图片),Caption(只显示文字),CaptionInMenu(显示图片),CaptionGlyph(图片跟文字一起显示)。在二个工具间添加分隔符,在"首笔"按钮右键菜单中选择beginagroup。去掉工具默认最右侧的一栏,Bar\Optionsbar\AllowQuickCustomization=false。工具栏的事件为ItemClick.工具栏整行显示,选择bar工具条,设置OptionsBar/UseWholeRow=true工具条固定在顶部不允许浮动或拖动到其它的地方,选择bar工具条,设置CanDockStyle只选一个top,去掉其它的选项,DockStyle=top。控件的图标去掉背景颜色,在VisualStudio2005的ImageList有一个属性TransparentColor可以处理。StatusBars控件设计参考状态条要能显示用户切实需要的信息,常用的有:

目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等,如果某一操作需要的时间较长,还应该显示进度条和进程提示。状态条的高度以放置五号字为宜,滚动条的宽度比状态条的略窄。

实现效果操作步骤从工具箱中拉barmanager到form中。点击clickheretoaddstatusbar。点击addnewitem在上下文菜单中选择StaticText(BarStaticItem)。设置caption属性为公司名称:选择Border属性style3d。设置AutoSize属性为Content(内容),Spring(扩展到最大宽度)。控件网格控件GridControlGridControl描述GridControl是一个功能强大,可定制性强的网格控件。允许你用GridView、CardView、BandedView、AdvBandedView任何一种方式来呈现数据。GridView是最普通、最常用的一种。CardView显示的效果是卡片式的,一条记录一个卡片。BandedView则体现在网格可复杂表头。AdvBandedView主要特色是一条数据的二个字段可做到垂直,也就是字段的放置可以不在一条水平线上(其它三种不行)。您会发现,超强的功能后面是无数的属性设置,下面是主要的设计时界面。序号属性属性说明在GridView1\Views\OptionsCustomization有一些属性设置1AllowColumnMoving是否允许列改变位置。2AllowColumnResizing是否允许列改变宽度。3AllowFilter列标题是否出现过滤的下拉列表。4AllowGroup网格是否允许按某一字段分组。5AllowRowSizing是否允许改变网格的行高。6AllowSort是否允许单击列标题进行排序。在GridView1\Views\OptionsMenu有一些属性设置7EnableColumnMenu显示与隐藏列标题右键菜单。8EnableFooterMenu显示与隐藏网格脚的右键菜单。9EnableGroupPanelMenu显示与隐藏网格组面板的右键菜单。在GridView1\Views\OptionsSelect有一些属性设置10MultiSelect是否允许选择数行。11MultiSelectMode数行选择的方式(CellSelect,RowSelect)。在GridView1\Views\OptionsView有一些属性设置12AllowCellMerge是否允许网格相邻单元格数据相同时合并为一个单元格。13ColumnAutoWidth网格的各列按网格的总宽自动调整宽度。14NewItemRowPosition网格新增行时所在位置(Bottom,Top,None)。15RowAutoHeight网格的行高根据单元格中字数的多少自动调整高度。16ShowAutoFilterRow在网格中显示过滤的空白行。17ShowFooter显示与隐藏网格的脚面板。18ShowIndicator显示与隐藏网格左侧的标识列。19ShowHorzLines显示与隐藏网格的水平网格线。20ShowVertLines显示与隐藏网格的垂直网格线。在GridView1\Views有一些属性设置21FooterPanelHeight网格脚面板的高度。22RowHeight网格的行高。在GridView1\Columns\OptionsColumn有一些属性设置。23ReadOnly列是否只读。在GridView1\Columns有一些属性设置。24SummaryItem\SummaryType列汇总的类型(Sum,Max,Min,Averageetc)。25Fixed列固定位置(Left,Right,None)。GridControl数据绑定26设置网格的数据源,绑定数据一.GridControl以GridView、CardView、BandedGridView、AdvBandedGridView四种网格形态来呈现数据,下图是它的继承关系图。二.GridControl控件属性,从工具箱中拖GridControl进入界面,如下图:点击Clickheretochangeview可以在四种网格类型中切换,它们的区别是GridView是普通网格,BandedGridView有Band,一个Band可以包含几个字段,advBandedGridView除了BandedGridView功能之外,二个或多个字段可垂直堆放,表头能设计得更复杂,GardView则显示成员工卡片样的风格。在控件的属性中datasource设置数据源。点击上图的RunDesigner或是在上图右键菜单中选择RunDesigner,弹出设计界面如下:左侧导航条各按钮的主要功能:Main/Views主要控制控件的一些整体的行为,如是否允许列上出现右键菜单,是否网格第一行出现过滤行,是否出现定制的弹出窗口等。Main/Columns添加定制列,如列是否允许编辑等。Main/FeatureBrowser浏览gridControl网格的所有属性,如列信息,汇总信息,列的行为,排序etc。Main/Layout网格的版面设计,在设置好属性后,网格的呈现,可以保存当前的网格版面到XML文档,也可以从XML文档导入。Main/GroupSummaryItems指定分组的字段及统计类型(最大值,平均值,求和etc)。Appearance/appearances网格按区域(band)设计颜色字体等风格。Appearance/StyleConditions当某一列当前行的值为XXX条件时,格式化特殊显示如背景红色。Appearance/StyleSchemes为当前网格披上外衣,显示格式化。Repository/ViwRepository浏览gridControl所有View(gridview,cardview一个网格可以有多个View)的属性和行为。Repository/ViwRepository网格中有TextEdit列时,编辑框的行为。Printing/PrintAppearances设置网格各band面板的背景,前景及文本对齐等打印属性。Printing/PrintingSettings设置网格各band面板是否允许打印出来。往往我们需要关注是Main栏的Views,Columns,GroupsummaryItems这三个项。下面分别来看看它们的属性。Views属性Options有很多可以由我们自由控制的选项,如允许编辑列etcOptions/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属性如果在设计模式下设定网格的datasource则Fieldlist会出现表中的所有字段。如果datasource是用代码绑定的,则此处为空,可以点击Add增加字段,在属性FieldName输入表中的字段。如果字段允许编辑的话,在ColumnEdit选择编辑的类型(文本框,按钮,下拉窗etc),如果不允许编辑在OptionsColumn/AllowEdit=false(不出现编辑控件如日期选择控件)也可以设置OptionsColumn/ReadOnly=false(出现编辑控件但不能改值)。如果要整个网格控件列都不允许编辑,只能一个字段一个字段把AllowEdit属性设置为false了。是否可让字段分组OptionsColumn/AllowGroup=false。列宽的Width=200GroupsummaryItems属性如果要在网格脚增加一些汇总信息,可点击GroupsummaryItems按钮,在它的属性里clickAdd按钮,设置FieldName=字段,选择SummaryType=(Sum,Min,Max,Count,etc)。Appearance栏定制网格各部分颜色与渐变色。StyleSchema则是选择网格的风格:三.如果您的网格切换到advBandedGridView或BandedGridView,则会在Main中多一个Bands项,如下:要添加复杂表头的标题可点击AddNewBand按钮,在属性caption设置要显示的标题,在AppearanceHeader/TextOptions/Haligment=(Near,Center,Far)可设置标题对齐方式。ShowColumnsSelector显示字段或Band的容器,可把字段拖到上面的网格中。DeleteSelectedBand删除光标所在的Band,Band中的字段会放在ShowColumnsSelector弹出的容器中。GridControl特殊属性一.显示与隐藏GroupPanel面板,如果数据的显示要以某一字段分组来显示,用户可以拖动网格中的字段到Dragacolumnheaderheretogroupbythatcolumn。实现代码:this.gridView1.OptionsView.ShowGroupPanel=checkEdit1.Checked;二.显示与隐藏网格脚端的汇总值(最大值,平均值,求和等),如下:实现上图网格脚汇总信息所示效果,界面操作步骤如下:从工具箱中拖GridControl控件到form上。单击控件上的RumDesigner,点击弹出窗口的Views,右铡属性栏OptionsView/Showfooter=false,此处还可以设置的属性有,AllowCellMerge.实现代码: 显示网格脚this.gridView1.OptionsView.ShowFooter=checkEdit2.Checked; 计算汇总信息this.gridView1.GroupSummary.AddRange(this.gridView1.GroupSummary.AddRange(newDevExpress.XtraGrid.GridSummaryItem[]newDevExpress.XtraGrid.GridGroupSummaryItem(DevExpress.Data.SummaryItemType.Count,"OrderID",this.gridView1.Columns["OrderID"],""),newDevExpress.XtraGrid.GridGroupSummaryItem(DevExpress.Data.SummaryItemType.Max,"Freight",this.gridView1.Columns["Freight"],"")});this.gridView1.Columns["OrderID"].SummaryItem.SummaryType=DevExpress.Data.SummaryItemType.Count;this.gridView1.Columns["Freight"].SummaryItem.SummaryType=DevExpress.Data.SummaryItemType.Max;三.网格某一列相邻几个单元格值相同时自动合并,如下:实现代码: this.gridView1.OptionsView.AllowCellMerge=checkEdit4.Checked;四.列字段是否允许编辑状态,如下:实现上图所示效果,界面操作步骤如下:从工具箱中拖GridControl控件到form上。单击控件上的RumDesigner,点击弹出窗口的Columns,右铡属性栏OptionsColumn/AllowEdit=false,此处还可以设置的属性有,ReadOnly.实现代码: this.gridView1.Columns[2].OptionsColumn.AllowEdit=checkEdit8.Checked;五.禁用与启用某一列列标题上的右键菜单,如下:实现上图所示效果,界面操作步骤如下:从工具箱中拖GridControl控件到form上。单击控件上的RumDesigner,点击弹出窗口的Views,右铡属性栏OptionsMenu/EnableFooterMenu=false,此处还可以设置的属性有,EnableColumnMenu.EnableGroupPanelMenu实现代码: this.gridView1.OptionsMenu.EnableColumnMenu=checkEdit5.Checked;六.是否启用网格脚的右键菜单,如下:实现代码: this.gridView1.OptionsMenu.EnableFooterMenu=checkEdit6.Checked;七、GridControl网格都支持自动过滤功能:实现代码: thisptionsView.ShowAutoFilterRow=checkEdit1.Checked;八、GridControl网格都支持运行时定制列的功能。订单与订单信息是Band,每个字段都要放于Band中,运行时可以调出Customization小窗口,用户可以把Band拖到网格,Column拖到Band下,定制复杂的网格,如下:实现代码: boolshow=false; privatevoidsimpleButton1_Click(objectsender,EventArgse){show=!show;ShowColumnSelector(show);}///显示隐藏privatevoidShowColumnSelector(boolshowForm){if(show){="HideColumns&Selector";advBandedGridView1.ColumnsCustomization();//showform}else{simpleButton1.Text="ShowColumns&Selector";advBandedGridView1.DestroyCustomization();//hidesmallform}}GridViewGridView是GridControl四种类型网格中最常用的一种,主要特性有:支持主从表数据展示,支持按字段分组,排序和过滤数据,运行时用户定制列,数行选择。实现效果操作步骤从工具箱中拖GridControl控件到form上。显示GroupPanel,单击控件上的RumDesigner,点击弹出窗口的Views,右铡属性栏OptionsView/ShowGroupPanel=true。添加列,单击控件上的RumDesigner,弹出窗口,单击Columns,在右侧单击Add按钮,添加一列,默认列名为gridColumn1,您此时可以修改列的Name和Caption,Width属性,FieldName设置为数据集dataset表中对应的字段。依次,添加所有的列。绑定数据源。属性设置GridColumn.Fixed固定字段在网格的左边或右边,路径:GridView1\Columns\GridColumn1。GridOptionView.RowAutoHeigh行随单元格内容的多少决定行高。路径:GridView1\Views\OptionsView。CardViewCardView数据显示在卡片中,每个卡片中显示单一的一条记录。主要特性有:设计或运行时布局定制,排序记录,过滤记录,多记录卡选择。实现效果操作步骤从工具箱中定位到GridControl控件,并拖到form上。单击控件上的clickheretochangeview选择Convertto选择子菜单CarView,列添加请转到GridView部分查看。CarView属性设置ShowCardCaption卡标题可见开关设置,路径:CarView1\Views\OptionsView。CardCaptionFormat卡标题格式化,默认RecordN{0},设置{1}{2}显示第一第二列的值,路径:CarView1\Views。ShowCardExpandButton卡数据收藏与扩展开关,路径:CarView1\Views\OptionsView。卡片在运行时,点击Customize,出现下拉页,用户可以勾选要出现在卡片上的字段,达到动态的效果,如下: Customize按钮也可以屏蔽,单击控件上的RumDesigner,点击弹出窗口的Views,右铡属性栏OptionsView/ShowQuickCustomizeButton设置为false。BandedGridViewBandedGridView提供Band元素组织Columns逻辑分组。实现效果操作步骤在form上添加GridControl在GridControl上的clickheretochangeview单击ConverttoBandedGridView添加复杂表头点击AddNewBand按钮,在按钮上方的预览网格上会出现一个gridBand1,在属性caption设置要显示的标题,在AppearanceHeader/TextOptions/Haligment=(Near,Center,Far)可设置标题对齐方式。您此时可以拖字段到gridBand1下面,如果设计模式下已经绑定到了数据源,但看不到一个字段,可以点击ShowColumnsSelector,在弹出的小窗口Columns中,有数据源的字段,您可以拖它们到预览网格的gridBand1下,也可以增加多个gridBand。如要删除gridBand,请单击DeleteSelectedBand,如果gridBand下面有字段,也会一起消失不见,但不是真正的删除了,而是收藏在ShowColumnsSelector弹出窗口的Columns中,您可以再次把它拉到网格中。如果用代码绑定数据源:repositoryItemLookUpEdit1.DataSource=dsOrder.Tables["Orders"];AdvBandedGridView复杂表头的实现,跟上面一样,将不再赘述。实现代码//obtainingthemainviewandclearingitsbandscollectionBandedGridViewview=gridControl1.MainViewasBandedGridView;view.Bands.Clear();//creatingthebandslayoutGridBandbandGeneral=view.Bands.Add("GeneralInfo");GridBandbandTechnical=view.Bands.Add("TechnicalInfo");GridBandbandEngine=bandTechnical.Children.Add("EngineInfo");GridBandbandTransmission=bandTechnical.Children.Add("TransmissionInfo");//assigningcolumnstobandscolTrademark.OwnerBand=bandGeneral;colModel.OwnerBand=bandGeneral;colLiter.OwnerBand=bandEngine;colCylinders.OwnerBand=bandEngine;colSpeedCount.OwnerBand=bandTransmission;colTransmission.OwnerBand=bandTransmission;属性设置属性,假如向下没Band,Band高度自动垂直向下延伸,路径:BandedGridView1\Bands\GridBand1。属性,Band高度占用几行,实际是设置行高,路径:BandedGridView1\Bands\GridBand1。属性,设置Band向网格的左边缘或右边缘固定不动。路径: BandedGridView1\Bands\GridBand1。ColumnEdit列列的ColumnEdit下拉列表框有二种,LookUpEdit和GridLookUpEdit。LookUpEdit只能在单元格中输入文本来过滤数据,GridLookUpEdit除了在单元格中输入文本外,还能在下拉的网格中有一个行过滤的功能,每一个字段都可以过滤。当然单元格也能设定为不能编辑,而只让下拉网格中的列中的数据来过滤。其实二者都可以实现同样的效果,但GridLookUpEdit提供更复杂的功能实现,有更多的可控性。下拉网格的类型还可以为复杂表头。如下图:OrderID下拉框实现效果,界面操作步骤如下:在form上添加GridControl.默认上面网格添加了OrderID,CustomerID,OrderDate,Freight等字段。在Columns的列表中选中OrderID字段,右侧属性ColumnEdit点开下拉,再点开New,选中树中的LookUpEdit,ColumnEdit赋值为repositoryItemLookUpEdit1。在添加repositoryItemLookUpEdit1的列,展开ColumnEdit节点。点击Columns右铡的按钮,弹出窗口,点添加(A)设置FieldName="LastName",Caption,width。再添加一列CompanyName.设置repositoryItemGridLookUpEdit的DataSource的数据源,DisplayMember显示的数据,ValueMember单元格的值,PopupFormWidth的弹出窗口的大小,etc。TextEditStyle设置为tandard,单元格允许编辑,光标出现,单元格的文本可以编辑。设置为DisableTextEditor,单元格只能输入,不能删除,光标也不在单元格中出现。绑定数据源repositoryItemGridLookUpEdit1.DataSource=dsOrder.Tables["Orders"];GridLookUpEdit与repositoryItemGridLookUpEdit为同一控件,只是 repositoryItemGridLookUpEdit为GridControl所引用.AdvBandedGridViewAdvBandedGridView从BandedGridView继承,是子类,它继承BandedGridView的所有功能,再扩展。实现效果操作步骤在form上添加GridControl在GridControl上的clickheretochangeview单击ConverttoAdvBandedGridView。实现代码在Load事件中添加下面的代码://assigningcolumnstobandscolTrademark.OwnerBand=bandGeneral;colModel.OwnerBand=bandGeneral;colLiter.OwnerBand=bandTechnical;colCylinders.OwnerBand=bandTechnical;colSpeedCount.OwnerBand=bandTechnical;colTransmission.OwnerBand=bandTechnical;colPrice.OwnerBand=bandPrice;//changingthecolumnslayoutwithinbandsDevExpress.XtraGrid.Views.BandedGrid.AdvBandedGridViewview=colTrademark.ViewasDevExpress.XtraGrid.Views.BandedGrid.AdvBandedGridView;view.SetColumnPosition(colTrademark,0,0);view.SetColumnPosition(colModel,1,0);view.SetColumnPosition(colLiter,0,0);view.SetColumnPosition(colCylinders,0,1);view.SetColumnPosition(colSpeedCount,1,0);view.SetColumnPosition(colTransmission,1,1);//forcingthePricecolumntostretchitsheaderifneededcolPrice.AutoFillDown=true;属性设置属性,Column所属Band的列位置。属性,Column所属Band的行位置。XtraLayout控件特性界面缩放,里面的控件自动缩放。控件自动对齐。几个控件成组或Tab页,取消组或取消Tab页。界面缩放时,锁定控件的大小。运行时,用户自定义界面各控件的位置,保存和导入设置的布局。实现效果操作步骤在工具箱中定位到layoutControl控件,拖进FORM。选中layoutControl,按F4键,设置Dock属性为Fill。在工具箱中定位到TextEdit拖入layoutControl控件中(创建了一个新的layoutItem)。设置Item的Text属性为UserName。在工具箱中定位到SimpleButton控件,拖二个到layoutControl控件中,设置SimpleButton1的Text属性为OK,设置SimpleButton2的Text属性为Cancel。选中Cancel对应的layoutControlItem3,拖到OK的右侧。选中任意一个layoutControlItem,右键选择ShowCustomizationForm。在打开的CustomiztionForm中,拖EmptySpaceItem到OK的上面。再拖一个EmptySpaceItem到OK按钮的左侧,OK宽度缩小一半。向右拉动OK的边框,设置OK的宽度与Cancel的宽度一样大。调整Form及各控件的大小如上图效果。在选中任意一个layoutControlItem的右键菜单中,还有一些菜单项可以设置。可根据需要进行布局的设置。XtraTab控件设计参考控件的"TabOrder"属性值应该与控件排列顺序一致,即遵循从上到下、从左到右这样一个流程。如果在PageControl的多个页面中存在类似的控件,应该尽量使得它们在各个页面中出现的位置/大小比较一致,以免在页面间切换时产生闪烁感。效果及代码XtraTabControl,可以多个tab标题重叠来显示,只要设置Multiline属性就可。实现代码:if(checkEdit2.Checked)xtraTabControl2.MultiLine=DevExpress.Utils.DefaultBoolean.True;elsextraTabControl2.MultiLine=DevExpress.Utils.DefaultBoolean.False;XtraTabControl,也可以隐藏tab标题的显示,在不同tab页切换时,好像在同一tab页感觉一样。实现代码: if(checkEdit1.Checked)xtraTabControl2.ShowTabHeader=DevExpress.Utils.DefaultBoolean.True;elsextraTabControl2.ShowTabHeader=DevExpress.Utils.DefaultBoolean.False;PivotGrid控件PivotGridControl是一种对大量数据进行分析的交叉表网格控件,网格的字段分为行字段、列字段、过滤字段、数据字段,运行时这些字段可由用户按不同的分析维度拖动到其它的区域。可对字段进行过滤,指定汇总类型、排序等。网格布局可以保存与还原,汇出数据为Html、pdf、xls等格式的文件或流、也可打印。实现效果操作步骤拖PivotGridControls到Form上。在控件上右键,选择RunDesigner,弹出界面如下单击Main/Fields,添加字段,点击Add按钮,设置字段的属性Caption,FieldName,Name点击Layout按钮,拖拉字段,设计显示出来的网格布局,您会看到,在右侧的网格上有文本,DropColumnsFieldsHere,DropRowFieldsHere,DropDataItemsHere,DropFilterFieldsHere基本上分字段,列字段,行列交叉处的数据字段,还有顶部的过滤字段。您可以把字段拖到各个区域。在控件上按F4的属性中您可以设置DataSource为一个数据源,也可以代码绑定数据源pivotGridControl1.DataSource=dsOrder.Tables["Orders"];XtraTreeList控件XtraTreeList树控件,可以绑定多种数据源,也可以树或网格显示,支持节点数据拖拉,子节点动态加载,树脚显示SUM等摘要信息,支持不同类型的节点数据编辑(datetime,image),树打印,树节点运行时定制。序号属性属性说明绑定数据源1DataSource设置绑定的数据源。2ParentFieldName父节点字段。3KeyFieldName节点字段。4PreviewFieldName节点显示的文本字段。5RoolValue父节点的值。OptionsBehavior有一些属性设置6Editable所有字段是否可编辑。OptionsView有一些属性设置7AutoWidth字段是否适应树控件的宽度。13ShowButtons显示与隐藏节点上的带加减号的小图标。14ShowColumns显示与隐藏树的列标题。15ShowHorzLines显示与隐藏树的水平线。16ShowVertLines显示与隐藏树的垂直线。17ShowIndicator显示与隐藏树的左侧标识列。18ShowRowFooterSummary显示与隐藏树的父节点的行脚汇总信息。19ShowSummaryFooter显示与隐藏树的树脚汇总信息。TreeList\Columns有一些属性设置20ColumnEdit树的编辑列类型选择。21FieldName列字段名。22RowFooterSummary行的汇总类型(Sum、Count、Average、Minetc)。23SortOrder列排序类型(Ascending、Descending、None)。24SummaryFooter树脚的汇总类型(Sum、Count、Average、Minetc)。25Caption列的标题文本。26Format\FormatType格式化类型(Custom、Numeric、DateTime、None)。27Format\FormatString格式化设置当Custom此处设置为c,显示为货币符号。实现效果操作步骤从工具箱中拖TreeList到form中。设置TreeList的OptionsView属性,ShowColumns、ShowHorzLines、ShowIndicator、ShowVertLines属性为false(隐藏列,隐藏水平垂直线);在TreeList右键菜单中选择RunDesigner,弹出下面窗体点击上图的AddButton添加列,修改Name,Caption属性。修改列的属性Width=200,列隐藏VisibleIndex=-1(0显示)。在TreeList右键菜单中选择NodesEditor,弹出下面窗体:点击AddRoot,AddChildbutton添加树节点。TreeList用到的事件有FocusedNodeChanged。实现代码publicvirtualvoidLoadTree(stringRootText){TreeView.Columns.AddRange(newDevExpress.XtraTreeList.Columns.TreeListColumn[]{DevTreeView.CreateColumn("Column1",130,0),DevTreeView.CreateColumn("Column2",20,-1),DevTreeView.CreateColumn("Column3",20,-1),DevTreeView.CreateColumn("Column4",20,-1)});TreeView.Columns[0].OptionsColumn.AllowEdit=false;TreeView.AppendNode(newobject[]{"全部","","",""},-1,0,1,-1);intparentID=0;TreeDataTable=ObjSingle2.GetTreeData();//添加根节点DataRowViewtempDR;DataViewtempView=newDataView(TreeDataTable,ObjSingle2.ParentCodeField+"='"+TreeRootNode+"'",ObjSingle2.TreeKeyField,DataViewRowState.CurrentRows);for(inti=0;i<tempView.Count;i++){tempDR=tempView[i];TreeView.AppendNode(newobject[]{tempDR[ObjSingle2.TreeShowField].ToString().Trim(),tempDR[ObjSingle2.TreeKeyField].ToString().Trim(),tempDR[ObjSingle2.ParentCodeField].ToString().Trim(),tempDR[ObjSingle2.FullParentCodeField].ToString().Trim()},0,0,1,-1);parentID=DevTreeView.GetParentID(TreeView,"Column2",tempDR[ObjSingle2.TreeKeyField].ToString().Trim());AddSubNode(tempDR[ObjSingle2.TreeKeyField].ToString().Trim(),parentID);}TreeView.ExpandAll();}属性设置TreeListNode.GetValue()获取节点的值,代码:objectcellValue2=treeList1.Nodes[0].GetValue(columnID);TreeListNode.GetDisplayText()获取节点显示的值,代码: stringcellText=treeList1.Nodes[0].GetDisplayText(columnID);LookUpEdit控件实现效果LookUpEdit跟gridControl中列编辑出现的下拉窗口repositoryItemLookUpEdit1类似,操作也基本相同。操作步骤在form上添加LookUpEdit添加列,在LookUpEdit上右键,选中EditColumns,在弹出的窗口中,点击添加(A)来添加列,此时有Caption,FieldName,Visible,Width,Alignment可以设置。其它大多的属性在LookUpEdit的属性的properties中可以设置,下面来看一下有那些可以设置:Columns列的添加除了上面的右键,也可以在Columns中添加。DataSource设置网格的数据源。DisplayMember显示在单元格中的文本。ValueMember单元格保留的值。PopupFormWidth除了设置列的宽外,弹出下拉的窗口的总宽在这里控制。ShowFooter下拉窗口默认是有一个按钮可以关闭的,设置为false,则不显示那个关闭按钮。TextEdityStyle设置单元格允不允许输入文本default可以置光标。控件的单元格中默认有文本EditValueisnull,在NullText可以清除。4.网格绑定数据源:lookUpEdit1.Properties.DataSource=dsOrder.Tables["Orders"];序号属性属性说明1EditValue取控件当前选中项的值。2Text取控件当前选中项的文本。3Text给控件以显示的文本赋值,但如果控件ReadOnly,则失效。4EditValue给控件以值的方式赋值,控件自动跳到对应的项显示。在Properties有一些属性设置5DisplayMember设置数据绑定的显示文本字段。6ValueMember设置数据绑定的值字段。7DataSource设置数据绑定的数据源。8PopupWidth下拉列表的宽度。9DropDownRows下拉列表的行数。10DropDownItemHeight下拉列表的行高。11ShowHeader显示与隐藏下拉列表的头。11ShowFooter显示与隐藏下拉列表的脚。12ShowLines显示与隐藏下拉列表的网格线。13TextEditStyle枚举值(Standard可以编辑值,HideTextEditor看不到选择的文本,DisableTextEditor不能编辑文本,只能选择项)。14SearchMode枚举值(AutoComplete逐个字的过滤,AutoFilter输入一个字,后面相应的文本会自动显示出来,OnlyInPopup只有完全输入正确,才定位到相应的项)。15NullText控件没有选择时的空文本设置。16ReadOnly控件的下拉列表不能显示,不能选值或输值,只能通过值的方式赋值。GridLookUpEdit控件设计参考筛选条件行位于数据行的顶端。实现效果GridLookUpEdit跟gridControl中列编辑出现的下拉窗口repositoryItemGridLookUpEdit1是同一对象,操作也相同,如图:操作步骤在form上添加GridLookUpEdit添加列,在GridLookUpEdit上右键,选中DesignView,在弹出的窗口中,点击添加Columns/Add来添加列,此时有Caption,FieldName,Visible,Width等属性可以设置,在OptionsColumn中也有一些属性可以设置。回顾一下Main/Views/OptionsView下的属性:ColumnAutoWidth如果在添加列时设置了width属性,如果这里不为false,那里设置的宽将不起作用。ShowAutoFilterRow设置是否在下拉窗口的顶部出现一行空白的过滤行,可以输入数据来过滤。ShowColumnHeader是否显示列的标题。ValueMember单元格保留的值。在GridLookUpEdit的Properties中也有一些属性设置。如PopupFormWidth,除了设置列的宽外,弹出下拉的窗口的总宽在这里控制。ShowFooter,下拉窗口默认是有一个按钮可以关闭的,设置为false,则不显示那个关闭按钮。TextEdityStyle,设置单元格允不允许输入文本default可以置光标。控件的单元格中默认有文本EditValueisnull,在NullText可以清除。ViewType,网格的类型,有defalut,GridView,BandGridViw,AdvBandGridViw,复杂表头也能实现。网格绑定数据源:gridLookUpEdit1.Properties.DataSource=dsOrder.Tables["Orders"]。如果控件直接绑定到一个表中的字段:gridLookUpEdit1.DataBindings.Add("EditValue",dsOrder.Tables["Orders"],"OrderID");//EditValue是控件的属性,如果用Text属性则会出现,选一条记录,焦点离开控件时单元格值会清空。用EditValue属性,则是控件单元格本身应赋的值。序号属性属性说明1EditValue取控件当前选中项的值。2Text取控件当前选中项的文本。3EditValue给控件以值的方式赋值,控件自动跳到对应的项显示。在Properties有一些属性设置4DisplayMember设置数据绑定的显示文本字段。5ValueMember设置数据绑定的值字段。6DataSource设置数据绑定的数据源。8PopupFormWidth下拉网格的宽度。9ShowFooter显示与隐藏下拉列表的脚。10PopupSizeable下拉网格可拉大拉小。11ReadOnly不能选值或输值,只能通过值的方式赋值。12TextEditStyle枚举值(Default、GridView、BandedView、AdvBandedView)。在Properties\View有一些属性设置13RowHeight下拉网格的行高。10OptionsView\ColumnAutoWidth网格中的列自适应到网格的总宽。11OptionsView\ShowAutoFilterRow下拉网格的顶端出现一条空白的行可用来过滤。12OptionsView\ShowColumnHeaders是否显示网格头。13OptionsView\ShowIndicator是否显示网格左侧的标示列。14OptionsView\ShowHorzLines是否显示网格的水平数据线。15OptionsView\ShowVertLines是否显示网格的垂直数据线。在Properties\Columns有一些属性设置(AddColumn)16FieldName输入列绑定的字段。17Caption列的标题。18Width列的宽度。GridPrint控件打印GridControl控件,GridControl所见即所得,四种类型的网格都可以打印。要显示如下的界面需要二个打印控件printBarManager和printingSystem,printBarManager拖到界面上后会出现如下图所示的界面,printingSystem则是指定printBarManager要显示的数据源。如要打印非Grid控件数据,可以在PrintingSystem.Links\DevExpress.XtraPrinting.Link添加,然后在Link的事件,写要画数据的文本或图像代码来实现。可以满足不同需求的报表。实现效果下面来看看printingSystem的属性与设定:点开printingSystem属性,出现下面界面点击Links属性,弹出如下界面要打印GridControl就要点击Add按钮在下拉项中选择DevExpress.XtraPrinting.PrintableComponentLink,添加它,在右侧的属性Compoment选择您要打印的GridControl对象,这里是gridControl1.点击ok,结束设置。此界面列出的一些事件可以用来定制打印,如添加打印的标题,(XXX报表)每个不同的事件对应报表的不同区域,在每个事件中添加画的代码。privatevoidprintableComponentLink1_CreateMarginalHeaderArea(objectsender,CreateAreaEventArgse){//创建表头//centersatextstringhorizontallyandverticallye.Graph.StringFormat=newBrickStringFormat(StringAlignment.Center,StringAlignment.Center);e.Graph.Font=newFont("Batang",16);e.Graph.DrawString("扬基信息科技有限公司网格报表测试",Color.Red,newRectangle(200,25,400,25),阵BorderSide.None);}上面事件对应在报表中的位置要打印GridControl网格在Load事件中添加下面的代码:this.printableComponentLink1.CreateDocument();这句代码用来启动打印。 因为GridControl网格可在运行时由用户拖动定制字段,所以报表的呈现完全可以由用户拖拉实现。Button控件设计参考主命令按钮一般情况为75×21象素,如果按钮的文本很长,应该适当加宽按钮的宽度。"确定"和"取消"按钮一般被映射为Enter键和Esc键,不应该对它们指定访问键。默认按钮要支持Enter即选操作,即按Enter后自动执行默认按钮对应操作。与正在进行的操作无关的按钮应该加以屏蔽(Windows中用灰色显示,没法使用该按钮)。将命令按钮靠底部或右边放置,人们习惯于从左到右、从上到下进行阅读。按钮大小基本相近,忌用太长的名称。避免使用多行或多列的主命令按钮,多行或多列的主命令按钮对用户是一个打击。右对齐主命令按钮。绝对不要指定双击行为,用户意料不到命令按钮会响应双击,因此不可能发现这样的行为。CheckBox控件设计参考避免一组复选框中选项个数超过8个。竖向对齐,竖向对齐的一组复选框更易于浏览。要有默认选项。GroupBox控件设计参考总给组合框提供一个标签,来表明组合框的用途。避免组合框的列项少于4考虑用单选按钮代替。Label控件设计参考左对齐静态文本标签,使得标签外观更有条理,且易于浏览。总在用于标识控件的静态文本标签后带上冒号,表示为控件标签的文本。宁可将静态文本标签置于相关控件的左边,而不是上面,标签更易于被发现。不要把静态文本置于凸起的边界上,看起来像按钮,用户会试图单击它。在标识控件用途的标签文本(Label)和提示信息(Hint)中,应使用半角符号。如果是指导性标签文本(如解释按钮功能的句子),则使用全角符号。标签提示:字体为不加重、宋体、黑色、灰底或透明、无边框、右对齐、一般情况为五号(10号)。绝对不要使用两行以上的标签,最好使用一行标签,但两行也是可接受的,两行以上就太多了。listBox控件设计参考总给列表框提供一个标签,来标明列表框的用途。使列表框至少5行长。对多个选择考虑采用复选框,复选框列表可以突出其多个选择的能力。对多选列表考虑提供"全部选中"和"全部取消选中"命令。要有默认选项。ListView控件设计参考总给列表视图提供一个标签,必须用标签来标明列表视图的用途

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论