Expression Blend 中高度可自定义的数据网格

NetAdvantage® for WPF 用户界面工具集中最主要的控件无疑是 xamDataGrid™。我认为这款 Infragistics® WPF 数据网格的表现优于其他地方发现的类似控件。特别是作为 Microsoft Expression Blend 用户，我发现 Infragistics 的 xamDataGrid 速度快且高度可自定义。由于数据网格高度可自定义，因此您可以通过对象的许多部分进行样式和格式化。在本文中，我将介绍一些自定义网格的常用方法。

您今天就可以下载 NetAdvantage for WPF 的免费试用版，以便亲自体验我在本文中使用的用户界面控件。

创建示例项目

显然，xamDataGrid 最酷的功能是它能智能地为您格式化数据。只需将集合绑定到网格，它就会从属性中提取数据字段并分配具有默认格式的编辑器。为了说明这一点，让我们在 Expression Blend 中创建一个带有示例数据的 WPF 4.0 项目，并将示例数据绑定到 xamDataGrid。

在 Expression Blend 4 中创建一个新的 WPF 应用程序项目。对于此项目，确保选择 .NET 版本 4.0 非常重要。在本项目的某个部分，我们将使用 xamColorPicker™ 控件，它是 NetAdvantage for WPF 中新的 .NET 4.0 控件之一。我将我的测试项目命名为 XDG101。

接下来，向 NetAdvantage for WPF 添加资源。右键单击“项目”面板中的“引用”文件夹。

在 Blend 中，您需要导航到包含程序集 DLL 的文件夹。导航到“Program Files”文件夹并找到“Infragistics\NetAdvantage 2010.2”文件夹（您可能安装了更新版本的 NetAdvantage 工具，本文的大部分内容应同样适用于您，但某些屏幕截图和文件名在后期版本中可能有所不同）。

在此文件夹中有两个我们必须引用的文件夹：WPF 和 WPFCommon 文件夹都包含我们将要使用的 DLL。请注意，WPFCommon 文件夹是为了方便与 NetAdvantage for WPF Data Visualization 共享通用 DLL，后者是一个单独出售的 NetAdvantage 版本，专注于 WPF 上的商业智能开发。

在 *WPFCommon\Bin* 文件夹中，将“InfragisticsWPF4.v10.2.dll”添加到项目的引用中。

返回“添加引用”对话框，并从 *WPF\CLR4.0\Bin* 文件夹中添加以下 DLL：

• InfragisticsWPF4.Controls.Editors.XamColorPicker.v10.2.dll
• InfragisticsWPF4.DataPresenter.v10.2.dll
• InfragisticsWPF4.Editors.v10.2.dll

现在，从 Blend 的“数据”面板中，将要用于运行时的数据添加到项目中。这次我将数据添加到“此文档”，这将把数据源的实例化添加到主窗口而不是应用程序。

添加示例数据后，默认会添加一个由包含两个属性的类组成的集合。第一个属性应为带有 Lorem ipsum 格式的字符串。保留此属性不变，只需单击属性名称即可将其重命名为 'ProductName'。

第二个默认属性应为布尔类型。将此属性重命名为 'ForSale'。

接下来，单击“数据”面板中“集合”右侧的加号图标按钮以添加另一个属性。单击该按钮将添加一个默认的字符串属性。将属性重命名为 'Icon'。在属性的右侧，您可以自定义类型和格式。将新添加的属性更改为 Image 类型。

更改为 Image 类型后，将 Location 字段留空。这将导致 Blend 为您将示例图像添加到项目中。使用 Location，您可以添加自己的图像文件夹到数据中。

接下来，添加一个类型为 Number 且长度为 4 的名为 ID 的属性。

接下来，添加一个类型为 String、格式为 Colors 的名为 ColorKey 的属性。

最后，添加一个类型为 Number 且长度为 2 的名为 Price 的属性。

接下来，我们将把 xamDataGrid 的一个实例添加到主窗口的主布局中。您可以通过“Assets”面板中的搜索字段快速找到 xamDataGrid。

双击“Assets”列表中的 xamDataGrid，或将其拖到窗口的设计区域。

Blend 在添加元素时会通过设置某些布局属性来定位它。要使 xamDataGrid 填满整个窗口，请重置“属性”面板“布局”类别中的所有属性。“重置”是“高级布局”菜单中的一个选项，它会将属性清除为其默认设置。通过单击每个属性右侧的矩形可以访问“高级布局”菜单。

要将数据分配给 xamDataGrid，请在“对象和时间轴”面板中选择该控件，并在“属性”面板“内容”类别中找到 DataSource 属性。

访问 DataSource 的高级布局菜单并选择“数据绑定”选项。

在随后的“创建数据绑定”对话框中，我们将把集合分配给绑定表达式。这位于“数据字段”选项卡中。

选择集合并关闭对话框后，您会发现 xamDataGrid 已填充了我们创建的数据。

数据格式化

接下来，我将演示一些可以自定义数据格式化的操作。首先，请注意每个标题的标签，它们与属性名称匹配。我们将需要覆盖标签的文本。我们将需要覆盖图标的宽度和高度。我们将把图标移动到网格的第一个字段。我们将删除 ID 字段上的浮点数。我们将把 Price 数字字段格式化为货币。最后，我们将把 xamColorPicker 元素分配给 ColorKey 字段的编辑器。

要覆盖字段的生成方式，我们需要禁用 xamDataGrid 的 AutoGenerateFields 功能。此属性位于数据网格的 FieldLayoutSettings 属性中。在属性面板中找到 FieldLayoutSettings（应在“行为”类别中）。单击此属性旁边的“新建”按钮将添加此属性的一个实例，我们可以对其进行自定义。Blend 会展开以显示 FieldLayoutSettings 中的属性。在此找到并勾选 AutoGenerateFields 属性。

接下来，我们需要添加一个自定义 FieldLayout，它将定义每个字段在 xamDataGrid 中的显示方式。在“属性”中找到 FieldLayouts (Collection) 属性（应在“杂项”类别中）。单击带有省略号的按钮将显示一个对话框，提示我们添加 FieldLayout 的实例。

在 FieldLayout Collection Editor 对话框中，添加一个 FieldLayout 实例。

在添加的 FieldLayout 的属性中，您会找到一个 Fields Collection 属性。单击“Fields Collection”按钮以显示 Field Collection Editor 对话框。在这里，我们将为数据源中的每个属性添加一个 Field。

单击“添加另一个项”按钮将调用“选择对象”对话框。在这里，您可以在添加 Field 或 Unbound Field 之间进行选择。顾名思义，Unbound Fields 用于添加不直接派生自数据源属性的字段。

添加一个 Field 对象。

一个 Field 将显示在 Field Collection Editor 对话框中，其属性出现在对话框的右侧。在这里，我们可以使第一个字段指向 Icon 属性。为此，我们必须将 Field Name 属性设置为与绑定数据的属性名称匹配。

在 Name 字段中键入“Icon”。

我们不需要图标图像的标签，因此在 Label 字段中键入一个空格。

最后，要限制图标的宽度和高度，请在 Width 和 Height 字段中都键入 30。

要添加和自定义下一个字段，我们需要在 Field Collection Editor 中“添加另一个项”。如果您单击“确定”按钮并关闭了编辑器，只需在 FieldLayout Collection Editor 对话框中再次单击“Fields”省略号按钮即可。

添加一个新的 Field。

下一个字段我们将分配给 ProductName 属性。由于 ProductName 需要用空格分隔才能更人性化，因此将 'ProductName' 分配给 Field Name 属性，将 'Product Name' 分配给 Label 属性。还将此属性的 Width 设置为 '160'。

添加第三个 Field 并设置以下属性：

Name: ‘ForSale’
Label: ‘For Sale’
Width: ‘70’

添加第四个 Field 并设置以下属性：

Name: ‘ID’
Label: ‘ID’
Width: ‘60’

添加第五个 Field 并设置以下属性：

Name: ‘ColorKey’
Label: ‘Color Key’

最后，添加最后一个 Field 并设置以下属性：

Name: ‘Price’
Label: ‘Price’
Width: ‘70’

按两次对话框上的“确定”以同时关闭它们。生成或运行项目，您将看到网格已更新为新的字段布局。

以下是 Blend 为我们生成的 XAML：

编辑器格式化

为了完成格式化，我们需要添加一些样式。要使用 Expression Blend 创建样式，您需要有一个您想为其设置样式的对象的实例。当您想为其设置样式的对象已存在于 Blend 无法访问的上下文中时，这会很麻烦。例如，xamDataGrid 会为每种字段类型实例化 xamEditors™ 的派生类。由于实例是隐式分配的，因此 Blend 不允许我们为其中一个编辑器创建样式，因为没有 Blend 可以引用的显式实例。为了解决这个问题，您可以在 XAML 文本编辑器中创建样式，或者暂时添加一个您想为其设置样式的编辑器实例，为编辑器创建样式，删除编辑器的临时实例，然后将样式分配给 xamDataGrid 字段。我们将采用后者。

确保选中“对象和时间轴”面板中的 LayoutRoot，然后再继续。

在 Assets 中，键入 xamNumericEditor™ 并双击编辑器控件将其添加到窗口。

在“对象和时间轴”中选择临时的 xamNumericEditor，然后从顶部菜单栏中选择 **Object -> Edit Style -> Create Empty** 菜单项。

在随后的“创建样式资源”对话框中，将样式命名为 'NumericEditorIDStyle'，并确保将其添加到当前文档。

Blend 会将设计器置于样式编辑模式。在此模式下，对属性的任何更改都将成为当前样式中的 Setter。

要将 xamNumericEditor 格式化为不显示小数点后的数字，我们需要为 Mask 属性分配一个掩码。

在 Mask 属性中键入 'nnnnn'（这种字符模式将匹配任何 5 位数字序列）。

单击“返回作用域”按钮以退出样式编辑模式。

现在我们有了样式，就不需要 xamNumericEditor 了。

在“对象和时间轴”面板中删除 xamNumericEditor 元素。

但是，我们已经将样式添加到了窗口的 Resource Dictionary 中。

要应用样式，我们需要将其分配给 ID 字段的 Field.Settings.EditorStyle 属性。

要返回到此编辑器，请单击 xamDataGrid 的 FieldLayouts (Collection) 属性的省略号按钮，在 FieldLayout Collection Editor 对话框中单击 Fields (Collection) 的省略号按钮，在 Field Collection Editor 对话框中选择第四个 Field，然后单击 ID 字段的 Settings 属性旁边的“新建”按钮。

Settings 将展开以显示该字段的附加设置属性。找到 EditorStyle 属性。在 EditorStyle 的高级选项中，Local Resources 选项是禁用的，因此我们将添加一个自定义表达式。

在 Custom Expression 弹出对话框中添加以下文本：

{StaticResource NumericEditorIDStyle}

这应该会立即将格式应用于 ID 字段。

要将货币格式应用于 Price 字段，我们只需将 Editor Type 从 xamNumericEditor 更改为 xamCurrencyEditor™。此更改将以与 ID 字段类似的方式进行，只是我们不需要样式。在此之前，我们需要对 mscorlib 程序集命名空间进行引用。

以下说明是您必须切换到 XAML 编辑器的唯一说明。将以下文本添加到 XAML 编辑器中的 Window 标记：

xmlns:sys="clr-namespace:System;assembly=mscorlib"

正如您可以想象的那样，如果 Expression Blend 能够引用命名空间并能够将样式添加到任何类型的对象，那就太好了。也许在未来的版本中。

返回设计编辑器，并通过返回 xamDataGrid 的 FieldLayouts、Fields 对话框来打开 Price Field 属性。最后一个 Field 是 Price Field。单击 Settings 的“新建”按钮。

在 Settings 属性中，找到 EditAsType 并在其高级选项中将以下文本添加到 Custom Expression 选项：

{x:Type sys:Decimal}

最后，将以下自定义表达式添加到 EditorType 属性的高级选项中：

{x:Type igEditors:XamCurrencyEditor}

由两个添加的自定义表达式生成的 XAML 如下：

按两次对话框上的“确定”后，Price 字段将更新为显示当前本地化格式的货币。

CellValuePresenter DataTemplate 覆盖

我们将对网格进行的最后一个自定义格式化更改是 ColorKey 字段。在这里，我们将创建一个 CellValuePresenter 样式，其中包含一个 DataTemplate 定义。DataTemplate 将 ColorKey 值绑定到 xamColorPicker 控件上的 SelectedColor 属性。

如果您参考 Infragistics 关于创建 CellValuePresenter 样式的文档，您会找到各种 XAML 示例。再一次，这是 Blend 无法从头开始创建此样式而无需一点帮助的另一种情况，因为 CellValuePresenter 是为每个字段在后台创建的另一个对象。CellValuePresenter 定义了每个单元格的值在 xamDataGrid Record 的 UI 中如何呈现。

此外，由于 xamDataGrid 始终会实例化此控件的实例，因此该元素不会添加到 Blend 读取以了解要在 Assets 中显示的内容的 XML 中。为了解决这些 Blend 的限制，我们将最后一次简要回到 XAML 编辑器。

在 XAML 编辑器中，将以下文本添加到 LayoutRoot 内容中（在 xamDataGrid XAML 块之前或之后）。

<igDP:CellValuePresenter/>

返回设计器后，CellValuePresenter 将出现在“对象和时间轴”中。现在我们有了一个可以设置样式的对象。

选择 CellValuePresenter，然后从顶部菜单栏的“对象”菜单中选择“编辑样式” -> “创建空白”选项。

在“创建样式资源”对话框中，将样式命名为 'ColorKeyCellStyle'。

要将非 xamEditor 控件分配给单元格值呈现器，我们需要创建一个连接该控件的 DataTemplate。在样式编辑器中，顶部的面包屑控件提供了一个用于此目的的菜单。

在设计器顶部，一个控件将显示 CellValuePresenter 标签旁边的调色板菜单。这将显示此样式可用的所有模板编辑器。选择第二个模板编辑器以编辑 ContentTemplate。在此处创建一个空模板。

在“创建 DataTemplate 资源”对话框中，添加以下样式名称：'ColorCellDataTemplate'。

Blend 将设计器置于 DataTemplate 的编辑模式。

将 Assets 中的 xamColorPicker 控件添加到 DataTemplate Grid 中。

在确保 xamColorPicker 已在“对象和时间轴”面板中选中后，找到 xamColorPicker 属性类别中的 SelectedColor 属性。

接下来，转到 SelectedColor 的高级选项，然后选择“数据绑定”选项。

在“创建数据绑定”对话框中，确保选中“数据上下文”选项卡，并将以下文本添加到“使用自定义路径表达式”字段：

值

同时确保所有布局属性都设置为默认值。Blend 可能会将 HorizontalAlignment 设置为 Left。这将导致混淆的结果。因此，同时将 Horizontal 和 Vertical Alignment 设置为 Stretch 非常重要。

返回到窗口布局的作用域，并从 LayoutRoot 中删除临时的 CellValuePresenter。

要将样式分配给 ColorKey 字段，请返回 xamDataGrid 的 FieldLayouts 和 FieldLayout 的 Fields。

在 Field Collection Editor 对话框中选择倒数第二个 Field。

为 ColorKey 字段添加新的 Settings。

找到 CellValuePresenterStyle 属性并选择高级选项。

高级选项将允许我们从 Local Resources 选项中选择 ColorKeyCellStyle。

还有一个最后的注意事项需要处理。Blend 始终使用 DynamicResource 关键字来分配样式。您可能会遇到在运行时使用 DynamicResource 分配 CellValuePresenter 样式的麻烦。由于样式是本地定义的，我们可以将 DynamicResource 更改为 StaticResource。您可以通过 XAML 进行此操作，或者通过在高级选项中选择 Custom Expression 来完成。由于我们已经分配了本地资源，Custom Expression 字段将显示表达式。在此处将 DynamicResource 更改为 StaticResource。

通过按两次“确定”来关闭打开的对话框并运行应用程序。您将看到 xamColorPicker 显示 ColorKey 字段中的颜色。

在“数据”面板中，您可以通过添加更多记录来自定义示例数据。

如果元素未显示，则 XAML 中可能存在拼写错误，或者样式未正确分配。如果元素显示但位置不当，则分配了需要清除的布局属性。

我已附上我的 使用 WPF 数据网格的项目，以供参考。

尽管在使用 Expression Blend 处理自定义样式时存在一些注意事项，但让 Blend 自动生成 XAML 可以限制手动 XAML 拼写错误，并且在 XAML 显示属性和事件名称方面非常有用，它还提供了用于处理样式和模板的专用编辑器。

在未来的文章中，我将演示如何应用样式来覆盖单元格、标题标签和行摘要的背景、高亮和悬停画笔，以及如何覆盖单元格和标签的文本样式。

目前，您可以 下载 Infragistics NetAdvantage for WPF 用户界面控件的免费试用版，亲自尝试这些 使用 WPF 数据网格、颜色选择器、编辑器等 Infragistics 项目。

版权所有 © 2010-2011 Infragistics, Inc. 保留所有权利。Infragistics 和 NetAdvantage 是 Infragistics, Inc. 的注册商标。xamDataGrid, xamEditor, xamCurrencyEditor, xamNumericEditor 和 xamColorPicker 是 Infragistics, Inc. 的商标。所有其他标记或商标均为其各自所有者/公司的财产。