使用 Visual Studio 2010 在 WPF 中构建数据驱动的大纲/细节业务表

项目
12/10/2009

概述

在本实验中，您将了解如何使用 Visual Studio 2010 工具在 WPF 4.0 中创建和自定义大纲/细节业务表。

目标

完成此实验后，您将学会：

• 如何在 WPF 项目中使用“Data Sources”窗口创建初始支架，以绑定您应用程序的数据

• 如何使用“Data Sources”窗口在现有 WPF 控件中“绘制”数据绑定

• 如何使用“Data Sources”窗口创建大纲/细节支架

• 如何自定义“Data Sources”窗口的输出，在 Visual Studio 2010 属性浏览器中使用数据绑定表达式生成器创建自定义视图

• 如何使用标记扩展智能感知，创建数据绑定表达式

• 如何使用 Visual Studio 2010 中的提取资源功能将常见外观提取到资源中

• 如何使用 Visual Studio 2010 的资源选择器功能将常见外观应用于控件

方案

本实验中构建的应用程序是一种应用程序的只读表示方式，这种应用程序可用于管理和查看房地产代理商办公室内的各个业务项目。所使用的技术可应用于几乎所有的数据驱动客户端应用程序方案。

练习

本次动手实验由以下练习组成：

• 创建应用程序的数据支架

• 创建主大纲/细节支架

• 创建和使用资源

完成本实验的估计时间：45 分钟。

先决条件

在开始本次实验之前，您应对以下产品或技术具有基本的了解：

• 数据驱动应用程序 UI 开发

• Windows Presentation Foundation

系统要求

您必须拥有以下工具才能完成本实验：

• Visual Studio 2010

• .NET Framework 4

初始材料

这次动手实验包括以下初始材料。

• Visual Studio 解决方案：本练习为您提供了一个 Visual Studio 解决方案，您可以使用此解决方案作为实验练习的起点。您可以在以下位置找到该解决方案：%TrainingKitInstallFolder%\Labs\WPF4DataDrivenMasterDetailBusinessForm\Source\Ex01-CreatingTheAppDataScaffolding\begin\C#

◦ Southridge.sln：本解决方案包含一个简单的 WPF 应用程序，该应用程序可用作练习 1 和后续练习的起点。

注意：每个练习都有一个 End 文件夹，其中包含完成练习后生成的解决方案。

• 如果您希望在此实验中使用代码片段，请启动 %TrainingKitInstallFolder%\Labs\WPF4DataDrivenMasterDetailBusinessForm\Setup 下的 WPF4DataDriven.vsi 文件

详细信息

请观看以下构建应用程序的视频：

“Microsoft Visual Studio 2010 中针对 Microsoft Silverlight 和 Microsoft Windows Presentation Foundation (WPF) 开发人员的新增功能”

https://videos.visitmix.com/MIX09/T73M

“Windows Presentation Foundation (WPF) 4 中的新增功能”

https://videos.visitmix.com/MIX09/T39F

安装

使用 Dependency Checker 验证本实验的所有先决条件。要确保正确配置所有内容，请按照以下步骤进行：

注意：要执行安装步骤，您需要使用管理员权限在命令行窗口中运行脚本。

1. 如果之前没有执行，运行 Training Kit 的 Dependency Checker。为此，运行位于 %TrainingKitInstallationFolder%\Labs\WPF4DataDrivenMasterDetailBusinessForm\Setup 文件夹下的 CheckDependencies.cmd 脚本。安装先决条件中没有安装的软件（如有必要请重新扫描），并完成向导。

注意：为了方便，本实验中管理的许多代码都可用于 Visual Studio 代码片段。CheckDependencies.cmd 文件启动 Visual Studio 安装程序文件安装该代码片段。如果在编写解决方案时无法找到该片段，请确保在 Visual Studio 2010 Code Snippets Repository 中安装了该代码片段。

下一步

练习 1：创建应用程序的数据支架，进行基本的自定义

在本练习中，您将创建应用程序的数据绑定支架，并显示第一个数据。您还将对数据源窗口的输出进行一些初始的自定义。

任务 1 –使用数据源向项目添加数据库

1. 导航到 Start | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010。

2. 选择 File | Open | Project/Solution…菜单命令。在 Open Project 对话框中，导航到 %TrainingKitInstallFolder%\Labs\WPF4DataDrivenMasterDetailBusinessForm\Source\Ex01-CreatingTheAppDataScaffolding\begin\C# 并选择 Southridge.sln 文件。

3. 双击 Solution Explorer 中的文件，打开 Window1.xaml 文件。

4. 选择根窗口（注意，您选择的是窗口不是表格 - 您可以通过 Visual Studio 中的属性浏览器窗口或文档大纲窗口来进行选择）。使用属性浏览器将窗口的宽度设置为 800，高度设置为 600。

图 1

更新 Window1 的高度和宽度

5. 单击 Data | Show Data Sources 打开“Data Sources”窗口

6. 单击 Add New Data Source…创建一个新的数据源

图 2

数据源

7. 选择 Database 作为数据源类型。单击 Next。

8. 选择 DataSet 作为数据库模型，并单击 Next。

9. 单击 New Connection…并选择以下选项：

a. Data source:Microsoft SQL Server Database File

b. Database file name:%TrainingKitInstallFolder%\Labs\WPF4DataDrivenMasterDetailBusinessForm\Source\Assets\Southridge.mdf

c. Log on to server：Use Windows Authentication

10. 单击 Next。单击 Yes 将文件复制到您的本地项目。

11. 单击 Next，保留默认连接字符串名称。

12. 在 Choose Your Database Objects 屏幕上：

a. 在 Tables | Listings 下，选中 MLS、Title、Price 和 PrimaryPhoto

b. 选择 Tables | Neighborhoods

c. 选择 Tables | Viewings

13. 单击 Finish。

14. 您现在应可以看到 Data Sources 窗口中已经填充了数据库架构。您也可以在 Solution Explorer 中看到相关的 XSD 强类型数据集。

15. 编译解决方案–应不会看到任何编译错误

任务 2 –使用数据源在窗口中添加数据绑定控件

1. 在 Data Sources 窗口中，单击 Listings 下拉列表，并选择 Details。

图 3

Listings 详细信息

2. 将 Listings 下拉列表拖放到 Windows1 上

3. 注意，这会自动创建数据绑定和控件。检查创建的 XAML 并观察其与 SouthridgeDataSet 数据源的关系。

图4

WPF Designer 中 Listings 详细信息

4. 在 Design 窗格中，删除 Primary Photo Label 和 Textbox。

5. 将 Toolbox 中的 Image 拖放到详细信息表格的右侧。

6. 在 Data Sources 窗口中，展开 Listings 表格，将 PrimaryPhoto 字段拖放到 Image 控件上。这将在控件上“绘制”数据绑定信息。

图 5

添加 Image 控件

7. 按 Ctrl-F5 运行应用程序。您将看到一张图片，以及数据库第一行中的数据。

图 6

运行应用程序

下一步

练习 2：创建大纲/细节数据支架，进行更详细的自定义

在本练习中，将在窗口中添加其他一些详细信息。您还将为用户提供一种方法来在列表中前后导航。为了更好地显示数据，我们还将改写一个默认模板，并以可视方式指示列表是否继续进行操作。

任务 1 –在窗口中添加列表详细信息表格

1. 对于此练习，您可以继续使用练习 1 中的解决方案，也可以打开以下位置中的初始解决方案：%TrainingKitInstallFolder%\Labs\WPF4DataDrivenMasterDetailBusinessForm\Source\Ex02-CreatingMasterDetailDataScaffolding\begin\C#。您需要编译解决方案（单击 Build | Build Solution），然后设计器才会显示我们在练习 1 中执行的 WPF 工作。

2. 如果 Data Sources 窗口未显示，单击 Data | Show Data Sources。

图 7

Data Sources 窗口中的 Viewings

3. 将 Data Sources 窗口中 Listings 下的 Viewings 外键表拖放到 Window 中，以制定一个大纲/细节视图。注意，Data Sources 窗口中包含保持两个视图同步的所有详细信息，并会创建一个 DataGrid，将所有字段包含在不同的列中：

图8

在设计器中添加 Viewings

任务 2 –设计前后导航按钮

1. 将 2 个新的按钮从工具箱拖放到设计界面上

2. 将第一个按钮的 Name 设置为 forwardButton。

3. 将 forwardButton 的 Content 属性设置为 Forward。

图9

前进按钮属性

4. 双击设计器界面上的 forwardButton。Visual Studio 将切换到代码视图并为该按钮添加一个单击处理程序。

5. 将以下代码插入到该单击处理程序中。

（代码片段 – WPF 大纲/细节实验–练习 2 ForwardClickHandler C#）

CollectionViewSource cvs = (this.FindResource("listingsViewSource"))

as CollectionViewSource;

cvs.View.MoveCurrentToNext();

6. 右键单击代码编辑器，选择 View Designer 切换回视图设计器。

7. 将第二个按钮的 Name 设置为 backButton。

8. 将 backButton 的 Content 属性设置为 Back。

图 10

后退按钮属性

9. 双击设计器界面上的 backButton。Visual Studio 将切换到代码视图并为该按钮添加一个单击处理程序。

10. 将以下代码插入到该单击处理程序中。

（代码片段 – WPF 大纲/细节实验–练习 2 BackClickHandler C#）

CollectionViewSource cvs = (this.FindResource("listingsViewSource"))

as CollectionViewSource;

cvs.View.MoveCurrentToPrevious();

11. 单击 Debug | Start without Debugging（或按 Ctrl-F5）运行应用程序。注意，您可以在数据集中前后浏览，查看所选项的详细信息。

任务 3 –在列表 DataGrid 中显示数据

在本任务中，对刚创建的 DataGrid 进行更加详细的自定义设置。目的在于将显示 CheckBox 控件的某一列更改为显示一个简单的红/绿交通灯样式的矩形指示器。为此，我们将使用项目中已创建的 BooleanToBrushConverter，将列中的 Boolean 值转换为红色或绿色的刷子。

1. 在设计器界面上，单击 DataGrid 控件将其选中。右键单击设计器界面，并选择 Document Outline。

图 11

Document Outline 中的 DataGrid

2. 展开 Document Outline 中的 DataGrid 节点，找到 DataGrid 中从底往上第三列。此列是一个 DataGridCheckBoxColumn，并且您将注意到 XAML 编辑器会突出显示相关代码。

图 12

Document Outline 中的 DataGridCheckBoxColumn

3. 在 XAML 编辑器中，注释 DataGridCheckBoxColumn 并插入下面的 DataGridTemplateColumn。

XAML

<!-- <DataGridCheckBoxColumn Binding="{Binding Path=Proceeding}"

Header="Proceeding" Width="SizeToHeader" /> -->

<DataGridTemplateColumn.CellTemplate>

</DataTemplate>

</DataGridTemplateColumn.CellTemplate>

</DataGridTemplateColumn>

4. 将光标放在 <Rectangle /> 代码上，Properties 窗格将显示该矩形的属性。

5. 在 Properties 窗口中，使用 Search 字段查找 Fill 属性。

图 13

矩形的 Fill 属性

6. 单击 Fill 旁边的黑色小方块。单击 Apply Data Binding。

7. 在 Data Binding 窗口中，单击 Converter 窗格并选择 Southridge、BooleanToBrushConverter 和 Create New…

图 14

添加 BooleanToBrushConverter

8. 在 Create Resource 对话框中单击 OK，保留 Key 的默认值。

9. 在 Parameter 字段中键入 Proceeding。这将通知 Converter 在当前的行中获取哪个字段的值。

图 15

BooleanToBrushConverter 参数

10. 单击 Debug | Start without Debugging（或按 Ctrl-F5），将会在 Proceeding 列中看到红绿交通灯!

图 16

运行应用程序

下一步

练习 3：创建和使用资源

任务 1 –通过按钮的 Background 属性创建资源

1. 对此练习，您可以继续使用练习 2 中的解决方案，也可以打开以下位置中的初始解决方案： %TrainingKitInstallFolder%\Labs\WPF4DataDrivenMasterDetailBusinessForm\Source\Ex03-CreatedAndUsingResources\begin\C#。您需要编译解决方案（单击 Build | Build Solution），然后设计器才会显示我们在练习 2 中执行的 WPF 工作。

2. 打开 Window1.xaml 并选择在练习 2 中创建的 forwardButton。

3. 在 Properties 窗口中，使用 Search 工具查找 Background 属性。

图 17

设置 Background 属性

4. 单击 Background 属性后将出现画笔编辑器。单击取色器工具，从屏幕的任意位置选取一种颜色。您将看到背景发生了变化。

5. 现在，在属性浏览器中单击 Background 标签旁边的黑色方块，选择“Extract to Resource”选项。

图 18

Extract Value to Resource

6. 在 Create Resource 对话框中单击 OK，接受默认值。可以在此窗口中将属性值提取到可重用的资源中。在本例中，将在 Window1.xaml 中创建此资源。

7. 查看 XAML 代码编辑器，您会在 <Window.Resources /> 中找到 SolidColorBrush

XAML

<Window.Resources>

<SolidColorBrush x:Key="LightOrangeBrushKey">#FFFFF0D0</SolidColorBrush>

</Window.Resources>

任务 2 –使用该资源更新另一个按钮的 Background 属性

1. 选择 backButton 并在属性窗口中找到 Background 属性。

2. 单击属性窗口中 Background 属性标签旁边的黑色方块，选择 Apply Resource...

图 19

Apply Resource

3. 从 Local 扩展器中选择资源

图 20

Apply Resource

4. 现在，forwardButton 和 backButton 共享相同的资源，定义 Background。

下一步

总结

在本实验中，您学习了如何在 WPF 4.0 中创建和自定义大纲/细节业务表。您为应用程序创建了简单的和大纲/细节数据支架。

对于其他功能，您还了解了如何通过属性浏览器使用数据绑定表达式来自定义数据源输出，创建自定义视图，并使用标记扩展智能感知创建数据绑定表达式。

另外，您还了解了如何将常见外观提取到资源中并使用资源选取器对其进行应用。

Visual Studio 2010 最新版本中的所有这些工具、平台和语言都能够帮助您创建一个强大的大纲/细节业务应用程序。

使用 Visual Studio 2010 在 WPF 中构建数据驱动的大纲/细节业务表

其他资源