让我们继续DevExpress中XtraReports创建薪资报告应用程序的实践,这一期我们将学习创建计算字段和自定义报告外观,本文假定你已看过我以下的视频教程:
使用DevExpress的XtraReports控件创建员工薪资报告应用程序
在前面的教程中,我们设计了一个报告,如图1所示:
该报告显示员工数据,如图2所示:
可以看到这个报告显示的只是员工的基本薪资,并没有针对加班另计薪水,我们可以通过使用计算字段的方法计算每个员工完整的薪水数字。计算字段是自定义计算的虚拟字段,是数据源中不存在的派生字段,仅用于存储基于其他数据值的计算结果。
计算字段提供两种方式计算定制值:
1)在计算字段的表达式编辑器中定义;
2)在CalculatedField.GetValue事件的后台代码处理,可以根据需要设计复杂的自定义计算。
在本文中,我们将使用第一种方法——Expressions,让我们为调整后的工资添加一个CalculatedField。
一、添加计算字段
步骤1.创建一个CalculatedField实例
在解决方案资源管理器中双击EmployeeReport以激活报表设计器,确保“Field List”面板可见,如果找不到请展开“主菜单-> XtraReports”菜单项,然后选择“Field List”,如图1-1所示:
找到“Field List”面板后,右键单击“ Full Emp Data Query”数据成员,然后在菜单栏中选择“ Add Calculated Field”,如图1-2所示:
你将看到“ Full Emp Data Query”中包含一个新元素“ calculatedField1”,如图1-3所示:
我们应该将计算出的字段名称更改为描述性名称,在“calculatedField1”的“ 属性”窗口中将“名称”属性设置为“ totalPayment”,如图1-4所示:
步骤2.定义CalculatedField属性
我们需要自定义CalculatedField属性来满足我们的要求:
1)将FieldType设置为 Float,这样一来我们就将CalculatedField的数值定义为浮点数据类型,如图1-5所示;
2)添加计算表达式,每个月平均有22个工作日,基本员工工资除以22是每天加班的平均日薪,将平均日薪乘以加班天数,然后将其加到基本薪水值中,即可得到总薪水。
通过单击计算字段的“ 属性”窗口中“ Expression”右侧的省略号按钮,打开“ 表达式编辑器”,如图1-6所示:
定义表达式,双击字段即可轻松插入字段名称,函数名称等,如图1-7所示:
步骤3.将CalculatedField放在报表布局上
创建计算字段后,我们就可以将其添加到报表布局中,将其从“ Field List”拖放到“ Detail”区域,这样报表的布局将如图1-8所示:
打开XRLabel智能标记,然后选择“Format String”设置“prefix”为“总付款:” ,Format String改成“总付款:{0:c2}”,如图1-9所示:
编译运行,我们可以看到每位员工信息都添加了总支付字段,OT一分都不能少!如图1-10所示:
到目前为止一切顺利。但是,报告的样式非黑即白看起来非常单调,让我们设计自定义的报告外观以使其变得更加丰富多彩!
XtraReports提供了各种各样的外观自定义选项,以下是常用的外观相关属性列表:
1)XRControl.BackColor -控制背景颜色;
2)XRControl.BorderColor -控制边框颜色;
3)XRControl.Borders -控制边界每一侧的枚举值;
4)XRControl.Font -字体设置;
5)XRControl.ForeColor -控制前景色(文本颜色)。
我们可以使用样式自定义外观。如果要更改某些控件的外观属性,使用这种方法无需遍历报告中的控件即可更改样式:只需选择相关的样式并更改其设置即可。
二、自定义报告外观
步骤1.自定义PageHeader外观
我们将PageHeader样式由图2-1转换图2-2:
如图2-2所示,PageHeader控件将使用统一的字体颜色。此外,XRLabel和XRPageInfo共享文本对齐方式,XRControlStyle支持全局定义控件外观设置。
打开报告智能标记,然后单击“ Style Sheet”属性右侧的省略号(“…”)以调用“ 样式编辑器”对话框,如图2-3所示:
在此对话框中,单击“添加样式”以创建新的XRControlStyle:
将样式命名为“ xrPageHeaderStyle”,将TextAlignment属性设置为BottomCenter,前景色属性允许从下拉编辑器或“R,G,B”值选择预定颜色,使用RGB格式将此属性设置为“84、132、213” (浅蓝色)。现在,样式设置如图2-5所示:
就这样, xrPageHeaderStyle样式已创建,打开PageHeader属性窗口,找到并展开样式属性,设置样式属性为xrPageHeaderStyle,如图2-6所示:
现在,我们可以看到页面标题( “员工薪资报告”)有点小而且不太醒目,如图2-7所示:
我们可以使用XRLabel字体设置来解决此问题,执行下列操作,如图2-8所示:
1)选择标题XRLabel并进入“ 属性”窗口;
2)找到并展开Font属性;
3)将Font.Size属性设置为18pt;
4)将Font.Name属性设置为Tahoma。
修改后可看到新的页面标题展示效果,如图2-9所示:
步骤2.自定义Detail外观
将Detail由图2-10转换成2-11:
我们需要创建和应用三个XRControlStyles:
创建一个“ xrControlHeaderStyle”样式定义以下属性,如图2-12所示:
1)Font.Bold = True ;
2)Font.Name = SimSun;
3)Font.Size = 14.25pt ;
4)ForeColor = 243,120,0;
5)TextAlignment = MiddleLeft。
创建一个“xrTableHeaderStyle”样式定义以下属性,如图2-13所示:
1)BackColor =84,132,213;
2)BoderColor = White ;
3)Borders = Buttom;
4)Font.Bold = True ;
5)Font.Name =SimSun;
6)Font.Size = 9.75pt ;
7)ForeColor = White ;
8)TextAlignment = MiddleLeft。
创建一个“xrTableCellStyle”样式定义以下属性,如图2-14所示:
1)Font.Name = SimSun;
2)Font.Size = 9.75pt ;
3)TextAlignment = MiddleLeft ;
4) Padding.Left = 20(移位XRControl文本到右,以避免子单元格文本与头单元格的背景颜色是重叠的)。
最后,按住Shift键单击Detail 带中所有的标题以选择这些控件并设置其Styles.Style属性为“ xrControlHeaderStyle” ,对表标题和值单元格执行相同的操作选择对应样式。
编译运行可看到全新的报告预览效果,如图2-15所示:
总结:
在本文中,我们创建了一个CalculatedField,定义了一个表达式,并将其显示在EmployeeReport中,我们创建了不同的样式来定制报告的外观。
原文链接:https://www.daboke.com/devexpress/xtrareportsapp2.html
B站up主-编程自修室:https://space.bilibili.com/580719958
源码下载:https://pan.baidu.com/s/1Yvru8J20wVDzKHAktTnHZg 提取码:7l86