09
8月
2020

XtraReports创建计算字段和自定义报告外观

让我们继续DevExpress中XtraReports创建薪资报告应用程序的实践,这一期我们将学习创建计算字段和自定义报告外观,本文假定你已看过我以下的视频教程:

使用DevExpress的XtraReports控件创建员工薪资报告应用程序

在前面的教程中,我们设计了一个报告,如图1所示:

guide1

图1-Report设计(点击图片可放大)

该报告显示员工数据,如图2所示:

guide2

图2-Report效果(点击图片可放大)

可以看到这个报告显示的只是员工的基本薪资,并没有针对加班另计薪水,我们可以通过使用计算字段的方法计算每个员工完整的薪水数字。计算字段是自定义计算的虚拟字段,是数据源中不存在的派生字段,仅用于存储基于其他数据值的计算结果。

计算字段提供两种方式计算定制值:

1)在计算字段的表达式编辑器中定义;

2)在CalculatedField.GetValue事件的后台代码处理,可以根据需要设计复杂的自定义计算。

在本文中,我们将使用第一种方法——Expressions,让我们为调整后的工资添加一个CalculatedField。

一、添加计算字段

步骤1.创建一个CalculatedField实例

在解决方案资源管理器中双击EmployeeReport以激活报表设计器,确保“Field List”面板可见,如果找不到请展开“主菜单-> XtraReports”菜单项,然后选择“Field List”,如图1-1所示:

guide3

图1-1-打开Field List面板(点击图片可放大)

找到“Field List”面板后,右键单击“ Full Emp Data Query”数据成员,然后在菜单栏中选择“ Add Calculated Field”,如图1-2所示:

guide4

图1-2-添加计算字段(点击图片可放大)

你将看到“ Full Emp Data Query”中包含一个新元素“ calculatedField1”,如图1-3所示:

guide5

图1-3-成功添加计算字段(点击图片可放大)

我们应该将计算出的字段名称更改为描述性名称,在“calculatedField1”的“ 属性”窗口中将“名称”属性设置为“ totalPayment”,如图1-4所示:

guide6

图1-4-修改calculatedField1的名称为totalPayment(点击图片可放大)

步骤2.定义CalculatedField属性

我们需要自定义CalculatedField属性来满足我们的要求:

1)将FieldType设置为 Float,这样一来我们就将CalculatedField的数值定义为浮点数据类型,如图1-5所示;

guide7

图1-5-将FieldType设置为 Float(点击图片可放大)

2)添加计算表达式,每个月平均有22个工作日,基本员工工资除以22是每天加班的平均日薪,将平均日薪乘以加班天数,然后将其加到基本薪水值中,即可得到总薪水。

通过单击计算字段的“ 属性”窗口中“ Expression”右侧的省略号按钮,打开“ 表达式编辑器”,如图1-6所示:

 

guide8

图1-6-打开计算字段的“ 表达式编辑器”

定义表达式,双击字段即可轻松插入字段名称,函数名称等,如图1-7所示:

guide9

图1-7-定义表达式(点击图片可放大)

步骤3.将CalculatedField放在报表布局上

创建计算字段后,我们就可以将其添加到报表布局中,将其从“ Field List”拖放到“ Detail”区域,这样报表的布局将如图1-8所示:

guide10

图1-8-将CalculatedField放在报表布局上(点击图片可放大)

打开XRLabel智能标记,然后选择“Format String”设置“prefix”为“总付款:” ,Format String改成“总付款:{0:c2}”,如图1-9所示:

guide11

图1-9-修改字符串格式

编译运行,我们可以看到每位员工信息都添加了总支付字段,OT一分都不能少!如图1-10所示:

guide12

图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:

guide13

图2-1-PageHeader原样式(点击图片可放大)

guide14

图2-2-PageHeader新样式(点击图片可放大)

如图2-2所示,PageHeader控件将使用统一的字体颜色。此外,XRLabel和XRPageInfo共享文本对齐方式,XRControlStyle支持全局定义控件外观设置。
打开报告智能标记,然后单击“ Style Sheet”属性右侧的省略号(“…”)以调用“ 样式编辑器”对话框,如图2-3所示:

guide15

图2-3-打开“样式编辑器”(点击图片可放大)

在此对话框中,单击“添加样式”以创建新的XRControlStyle:

guide16

图2-4-创建新的XRControlStyle(点击图片可放大)

将样式命名为“ xrPageHeaderStyle”,将TextAlignment属性设置为BottomCenter,前景色属性允许从下拉编辑器或“R,G,B”值选择预定颜色,使用RGB格式将此属性设置为“84、132、213” (浅蓝色)。现在,样式设置如图2-5所示:

guide17

图2-5-xrPageHeaderStyle样式属性(点击图片可放大)

就这样, xrPageHeaderStyle样式已创建,打开PageHeader属性窗口,找到并展开样式属性,设置样式属性为xrPageHeaderStyle,如图2-6所示:

guide18

图2-6-设置样式属性为xrPageHeaderStyle(点击图片可放大)

现在,我们可以看到页面标题( “员工薪资报告”)有点小而且不太醒目,如图2-7所示:

guide19

图2-7-页面标题

我们可以使用XRLabel字体设置来解决此问题,执行下列操作,如图2-8所示:

1)选择标题XRLabel并进入“ 属性”窗口;
2)找到并展开Font属性;
3)将Font.Size属性设置为18pt;
4)将Font.Name属性设置为Tahoma。

guide20

图2-8-设置XRLabel字体属性(点击图片可放大)

修改后可看到新的页面标题展示效果,如图2-9所示:

guide21

图2-9-新页面标题(点击图片可放大)

步骤2.自定义Detail外观

将Detail由图2-10转换成2-11:

guide22

图2-10-Detail原样式(点击图片可放大)

guide23

图2-11-Detail新样式(点击图片可放大)

我们需要创建和应用三个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。

guide23

图2-12-xrControlHeaderStyle样式属性(点击图片可放大)

创建一个“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。

guide24

图2-13-xrTableHeaderStyle样式属性(点击图片可放大)

创建一个“xrTableCellStyle”样式定义以下属性,如图2-14所示:
1)Font.Name = SimSun;
2)Font.Size = 9.75pt ;
3)TextAlignment = MiddleLeft ;
4) Padding.Left = 20(移位XRControl文本到右,以避免子单元格文本与头单元格的背景颜色是重叠的)。

guide25

图2-14-xrTableCellStyle样式属性(点击图片可放大)

最后,按住Shift键单击Detail 带中所有的标题以选择这些控件并设置其Styles.Style属性为“ xrControlHeaderStyle” ,对表标题和值单元格执行相同的操作选择对应样式。

编译运行可看到全新的报告预览效果,如图2-15所示:

guide26

图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

You may also like...

发表评论

邮箱地址不会被公开。

微信 OR 支付宝 扫描二维码
为本文作者 打个赏
pay_weixin pay_weixin
最喜欢你一言不合就打赏的样子了^_^