8月

2020

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

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

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

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

图1-Report设计（点击图片可放大）

该报告显示员工数据，如图2所示：

图2-Report效果（点击图片可放大）

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

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

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

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

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

一、添加计算字段

步骤1.创建一个CalculatedField实例

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

图1-1-打开Field List面板（点击图片可放大）

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

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

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

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

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

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

步骤2.定义CalculatedField属性

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

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

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

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

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

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

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

图1-7-定义表达式（点击图片可放大）

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

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

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

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

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

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

图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-1-PageHeader原样式（点击图片可放大）

图2-2-PageHeader新样式（点击图片可放大）

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

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

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

图2-4-创建新的XRControlStyle（点击图片可放大）

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

图2-5-xrPageHeaderStyle样式属性（点击图片可放大）

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

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

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

图2-7-页面标题

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

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

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

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

图2-9-新页面标题（点击图片可放大）

步骤2.自定义Detail外观

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

图2-10-Detail原样式（点击图片可放大）

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

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

图2-13-xrTableHeaderStyle样式属性（点击图片可放大）

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