演练：使用 WPF 设计器中的示例数据

项目
08/12/2011

本演练演示如何使用适用于 Visual Studio 的 WPF 设计器中的示例数据在设计时创建数据绑定。如果示例数据在设计时显示，则可以确保布局在运行时的行为正确。若要使示例数据可供设计器中的控件访问，请向示例数据文件应用**“DesignData”**生成操作，并在 DesignData 设计时特性中引用该文件。

在本演练中，您将执行下列任务：

创建项目。
创建 Customer 类业务对象。
创建包含示例数据的 XAML 文件。
将 TextBox 和 DataGrid 控件绑定到示例数据。

在完成后，TextBox 和 DataGrid 控件将在设计时绑定到示例数据。数据绑定是在 WPF 设计器中设置的。

提示

显示的对话框和菜单命令可能会与“帮助”中的描述不同，具体取决于您现用的设置或版本。若要更改设置，请在“工具”菜单上选择“导入和导出设置”。有关更多信息，请参见使用设置。

系统必备

您需要以下组件来完成本演练：

Visual Studio 2010.

创建项目

第一步是创建 WPF 应用程序项目并启用设计时属性。

创建项目

使用 Visual C# 新建一个名为 DesignDataDemo 的 WPF 应用程序项目。有关更多信息，请参见如何：创建新的 WPF 应用程序项目。

MainWindow.xaml 将在 WPF 设计器中打开。
在“设计”视图中，单击 MainWindow 右下部分中的根大小标记 () 将根大小设置为自动大小。

在 XAML 视图中，设计器添加 d 命名空间映射，该映射允许访问 DesignInstance 和 DataContext 之类的设计时属性。

创建业务对象

接下来，创建业务对象。业务对象是一种拥有 FirstName、LastName 和 CustomerID 属性的简单 Customer 类。

创建业务对象

将一个名为 Customer 的新类添加到项目中。

用下面的代码替换自动生成的代码。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace DesignDataDemo
{
    // The Customer class defines a simple Customer business object.
    class Customer
    {
        // Default constructor is required for usage as sample data 
        // in the WPF and Silverlight Designer.
        public Customer() {}

        public string FirstName { get; set; }
        public string LastName { get; set; }
        public Guid CustomerID { get; set; }
        public int Age { get; set; }
    }

    // The CustomerCollection class defines a simple collection
    // for Customer business objects.
    class CustomerCollection : List<Customer>
    {
        // Default constructor is required for usage in the WPF Designer.
        public CustomerCollection() {}
    }
}

创建设计时数据文件

通过在 XAML 文件中创建业务对象的实例来定义示例设计时数据。您可以通过将**“生成操作”**设置为 DesignData 来指定 XAML 文件包含示例数据。

设计器使用自动生成的设计时类型替换在 XAML 文件中声明的实例，设计时类型与示例类型具有相同的属性。这样可以消除可能干扰设计器的运行时行为（如数据库查询）。这些属性是只读的，可在示例数据文件中设置它们。

使用 DesignDataWithDesignTimeCreatableTypes 生成操作以覆盖此行为，并指示设计器将创建示例数据类型的实例。

创建设计时数据文件

在解决方案资源管理器中，将一个名为 DesignData 的新文件夹添加到项目中。
在 DesignData 文件夹中，添加一个名为 SampleCustomer.xaml 的新文本文件。

SampleCustomer.xaml 在 XAML 视图中打开。

提示

还可以使用资源字典。

添加以下 XAML。

<local:Customer 
    xmlns:local="clr-namespace:DesignDataDemo" 
    FirstName="Syed" LastName="Abbas" Age="23" CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />

在 DesignData 文件夹中，添加一个名为 SampleCustomers.xaml 的新文本文件。

SampleCustomers.xaml 在 XAML 视图中打开。

添加以下 XAML。

    <local:CustomerCollection 
    xmlns:local="clr-namespace:DesignDataDemo" >

    <local:Customer FirstName="Syed" LastName="Abbas" Age="23" CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />
    <local:Customer FirstName="Brenda" LastName="Diaz" Age="55" CustomerID="BB638D72-8B72-495A-B0F9-79F37964BBAE" />
    <local:Customer FirstName="Lori" LastName="Kane" Age="17" CustomerID="B168D811-5548-4D28-8171-318F9A4D7219" />

</local:CustomerCollection>

在解决方案资源管理器中，选择这两个示例数据文件。
在“属性”窗口中，将**“生成操作”设置为 DesignData，确保“复制到输出目录”设置为“不复制”，并清除“自定义工具”**字段。

提示

对于“生成操作”，也可以选择 DesignDataWithDesignTimeCreatableTypes。

设置设计时数据上下文

若要创建一个提供示例数据的设计时数据上下文，请使用 d:DataContext 设计时特性和 d:DesignData 标记扩展。

设置设计时数据上下文

在 WPF 设计器中打开 MainWindow.xaml。
在 XAML 视图中，将以下命名空间映射添加到 Window 开始标记中。有关更多信息，请参见如何：将命名空间导入 XAML。
```
xmlns:local="clr-namespace:DesignDataDemo"
```
生成解决方案。
在“设计”视图中，在靠近 Grid 控件中心的位置添加一条水平网格线来定义两行。有关更多信息，请参见如何：向网格中添加行和列。
从工具箱中，将 StackPanel 控件拖到顶部行中。
在 XAML 视图中，用下面的 XAML 替换 StackPanel 元素。
```
<StackPanel d:DataContext="{d:DesignData Source=./DesignData/SampleCustomer.xaml}" Grid.Row="0"></StackPanel>
```
此 XAML 为 StackPanel 及其子控件建立设计时数据上下文。而且，它会使示例数据可用于进行数据绑定。

绑定到示例数据的单个实例

您可以绑定到 SampleCustomer.xaml 文件中 Customer 实例的任何属性。下面的过程演示如何使用数据绑定生成器将 FirstName 属性绑定到 TextBox 控件。有关更多信息，请参见演练：使用 WPF 设计器创建数据绑定。

将 TextBox 绑定到示例数据

将 TextBox 控件从“工具箱”拖到 StackPanel 控件中。
在“属性”窗口中，滚动到 Text 属性。
在左列的边缘，单击**“属性标记”**()。

此时出现一个菜单。

提示

您还可以右击该行以显示菜单。
单击**“应用数据绑定”**。

数据绑定生成器随即显示，且**“路径”**窗格处于打开状态。
单击**“FirstName”**属性。
请注意，在“设计”视图中，TextBox 控件显示 SampleCustomer.xaml 文件中所指定的 FirstName 值。

绑定到示例数据的集合

下面的过程演示如何将 DataGrid 控件绑定到 SampleCustomers.xaml 文件中 Customer 对象的集合。

将 DataGrid 控件绑定到示例数据的集合

将 DataGrid 控件从“工具箱”拖到网格中的第二行并调整其大小，使其适合该行。
在 XAML 视图中，用下面的 XAML 替换 DataGrid 元素。
```
<DataGrid Grid.Row="1" d:DataContext="{d:DesignData Source=./DesignData/SampleCustomers.xaml}" />
```
此 XAML 为 DataGrid 建立设计时数据上下文，并使示例数据可用于进行数据绑定。
选择 DataGrid。
在“属性”窗口中，滚动到 ItemsSource 属性。
在左列的边缘，单击**“属性标记”**()。
单击**“应用数据绑定”**。

数据绑定生成器随即显示，且**“路径”**窗格处于打开状态。
请注意，在“设计”视图中，DataGrid 控件用 SampleCustomers.xaml 文件中的 Customer 实例进行填充。