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

项目
05/28/2012

[本文档仅供预览，在以后的发行版中可能会发生更改。包含的空白主题用作占位符。]

本演练演示适用于 Visual Studio 的 WPF 设计器演示如何使用示例数据在设计时创建数据绑定。包含示例数据在设计时显示，则可以确保布局正常运行在运行时。若要使示例数据可访问设计器中的控件，将应用于 DesignData 生成事件示例数据文件并引用在 DesignData 设计时特性的文件。

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

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

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

备注

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

系统必备

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

Visual Studio 2012 RC.

创建项目

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

创建项目

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

在 MainWindow.xaml WPF Designer打开。
在设计视图中，单击根大小标记 ()。 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 文件。您指定 XAML 文件包含示例数据通过设置 生成操作 到 DesignData。

设计器替换在使用自动生成的设计时类型的 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:DesignData 标记扩展的 d:DataContext 设计时特性。

设置设计时数据上下文

打开在 WPF Designer的 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 及其子控件的设计时数据上下文。此外，它使示例数据可用于进行数据绑定。

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

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

将 textbox 绑定到示例数据

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

出现菜单。

提示

还可以右击该行以显示菜单。
单击 应用程序数据绑定。

数据绑定生成器出现，与打开 path 的窗格。
单击 FirstName 属性。
在 " 设计 " 视图中，请注意 TextBox 控件显示 SampleCustomer.xaml 文件中指定的 FirstName 值。

绑定到示例数据的集合

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

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

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

数据绑定生成器出现，与打开 path 的窗格。
在 " 设计 " 视图中，请注意 DataGrid 控件用 SampleCustomers.xaml 文件中 Customer 实例。