逐步解說：使用 WPF 設計工具中的範例資料

發行項
08/12/2011

本逐步解說示範如何在設計階段，使用 WPF Designer for Visual Studio 中的範例資料來建立資料繫結。在設計階段中顯示範例資料，可確保您的配置能夠在執行階段正確運作。若要讓設計工具中的控制項能夠存取範例資料，請將 DesignData 建置動作套用到範例資料檔，並在 DesignData 設計階段屬性中參考該檔案。

在這個逐步解說中，您會執行下列工作：

建立專案。
建立 Customer 類別商務物件。
建立保存範例資料的 XAML 檔案。
將 TextBox 和 DataGrid 控制項繫結至範例資料。

完成這些工作之後，您就會擁有在設計階段繫結至範例資料的 TextBox 和 DataGrid 控制項。資料繫結是在 WPF 設計工具中設定。

注意事項
根據您目前使用的設定或版本，您所看到的對話方塊與功能表指令可能會與 [說明] 中描述的不同。若要變更設定，請從 [工具] 功能表中選取 [匯入和匯出設定]。如需詳細資訊，請參閱使用設定。

必要條件

您需要下列元件才能完成此逐步解說：

Visual Studio 2010。

建立專案

第一個步驟是建立 WPF 應用程式專案並啟用設計階段屬性。

若要建立專案

在 Visual C# 中，建立名為 DesignDataDemo 的新 WPF 應用程式專案。如需詳細資訊，請參閱 HOW TO：建立新的 WPF 應用程式專案。

MainWindow.xaml 隨即在 WPF 設計工具中開啟。
在 [設計] 檢視中，按一下 MainWindow 右下角的原始大小調整標籤 ()，將原始大小設定為自動調整大小。

在 [XAML] 檢視中，設計工具會加入 d 命名空間對應，讓您可以存取諸如 DesignInstance 和 DataContext 等設計階段屬性。

建立商務物件

接下來，請建立商務物件。商務物件是簡單的 Customer 類別，具有 FirstName、LastName 和 CustomerID 屬性。

若要建立商務物件

將名為 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]。

注意事項
您也可以針對 [建置動作] 選取 [DesignDataWithDesignTimeCreatableTypes]。

設定設計階段資料內容

若要建立提供範例資料的設計階段資料內容，請將 d:DataContext 設計階段屬性與 d:DesignData 標記延伸搭配使用。

若要設定設計階段資料內容

在 WPF 設計工具中開啟 MainWindow.xaml。
在 [XAML] 檢視中，將下列命名空間對應加入至 Window 開始標記。如需詳細資訊，請參閱 HOW TO：將命名空間匯入 XAML。
```
xmlns:local="clr-namespace:DesignDataDemo"
```
建置方案。
在 [設計] 檢視中，將水平格線加入靠近 Grid 控制項中央的位置，以定義兩個資料列。如需詳細資訊，請參閱 HOW TO：在方格中加入資料列和資料行。
從 [工具箱] 中，將 StackPanel 控制項拖曳至頂端資料列中。
在 [XAML] 檢視中，將 StackPanel 項目替換成下列 XAML。
```
<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] 檢視中，將 DataGrid 項目替換成下列 XAML。
```
<DataGrid Grid.Row="1" d:DataContext="{d:DesignData Source=./DesignData/SampleCustomers.xaml}" />
```
這個 XAML 會建立 DataGrid 的設計階段資料內容，並讓範例資料能夠用於資料繫結。
選取 DataGrid。
在 [屬性] 視窗中，捲動到 ItemsSource 屬性。
在左欄的邊緣，按一下 [屬性標記] ()。
按一下 [套用資料繫結]。

資料繫結產生器隨即顯示，並開啟 [路徑] 窗格。
請注意，在 [設計] 檢視中，DataGrid 控制項會填入 SampleCustomers.xaml 檔案中的 Customer 執行個體。