チュートリアル: WPF デザイナーでのサンプル データの使用

このチュートリアルでは、WPF Designer for Visual Studio のサンプル データを使用してデザイン時にデータ バインディングを作成する方法について説明します。 デザイン時にサンプル データを表示することによって、実行時にレイアウトが正しく動作することを確認できます。 デザイナーのコントロールからサンプル データにアクセスできるようにするには、DesignData ビルド アクションをサンプル データ ファイルに適用し、DesignData デザイン時属性にあるそのファイルを参照します。

このチュートリアルでは次のタスクを行います。

• プロジェクトを作成する。

• Customer クラスのビジネス オブジェクトを作成する。

• サンプル データを保持する XAML ファイルを作成する。

• TextBox コントロールと DataGrid コントロールをサンプル データにバインドする。

タスクを完了すると、デザイン時に TextBox コントロールと DataGrid コントロールがサンプル データにバインドされます。 データ バインディングは、WPF デザイナー で設定されます。

必須コンポーネント

このチュートリアルを実行するには、次のコンポーネントが必要です。

• Visual Studio 2010.

プロジェクトの作成

まず、WPF アプリケーション プロジェクトを作成し、デザイン時のプロパティを有効にします。

プロジェクトを作成するには

1. Visual C# で、DesignDataDemo という名前の新しい WPF アプリケーション プロジェクトを作成します。 詳細については、「方法 : 新しい WPF アプリケーション プロジェクトを作成する」を参照してください。

   WPF デザイナーで MainWindow.xaml が開きます。

2. デザイン ビュー で、MainWindow の右下隅にあるルート サイズ タグ () をクリックし、ルート サイズを自動サイズに設定します。

   XAML ビューで、デザイナーによって d 名前空間の割り当てが追加されます。これにより、DesignInstance、DataContext などのデザイン時のプロパティにアクセスできます。

ビジネス オブジェクトの作成

次に、ビジネス オブジェクトを作成します。 ビジネス オブジェクトは、FirstName、LastName、および CustomerID の各プロパティを持つ単純な Customer クラスです。

ビジネス オブジェクトを作成するには

1. Customer という名前の新しいクラスをプロジェクトに追加します。

2. 自動的に生成されたコードを次のコードで置き換えます。

   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] ビルド アクションを使用してこの動作をオーバーライドし、デザイナーにサンプル データ型のインスタンスを作成するよう指示します。

デザイン時データ ファイルを作成するには

1. ソリューション エクスプローラーで、DesignData という名前の新しいフォルダーをプロジェクトに追加します。

2. DesignData フォルダーに SampleCustomer.xaml という名前の新しいテキスト ファイルを追加します。

   XAML ビューで SampleCustomer.xaml が開きます。

   注意

   リソース ディクショナリを使用することもできます。

3. 次の XAML を追加します。

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

4. DesignData フォルダーに SampleCustomers.xaml という名前の新しいテキスト ファイルを追加します。

   XAML ビューで SampleCustomers.xaml が開きます。

5. 次の 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>
   

6. ソリューション エクスプローラーで、両方のサンプル データ ファイルを選択します。

7. [プロパティ] ウィンドウで [ビルド アクション] を [DesignData] に設定し、[出力ディレクトリにコピー] が [コピーしない] に設定されていることを確認します。さらに、[カスタム ツール] を空にします。

   注意

   [ビルド アクション] では、[DesignDataWithDesignTimeCreatableTypes] を選択してもかまいません。

デザイン時のデータ コンテキストの設定

サンプル データを提供するデザイン時のデータ コンテキストを作成するには、d:DesignData マークアップ拡張機能で d:DataContext デザイン時属性を使用します。

デザイン時のデータ コンテキストを設定するには

1. WPF デザイナーで MainWindow.xaml を開きます。

2. XAML ビューで、Window 開始タグに次の名前空間のマッピングを追加します。 詳細については、「方法 : 名前空間を XAML にインポートする」を参照してください。

   xmlns:local="clr-namespace:DesignDataDemo"
   

3. ソリューションをビルドします。

4. デザイン ビューで、Grid コントロールの中心付近に水平グリッド線を追加し、2 つの行を定義します。 詳細については、「方法 : グリッドに行と列を追加する」を参照してください。

5. ツールボックスから、StackPanel コントロールを一番上の行にドラッグします。

6. 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 をサンプル データにバインドするには

1. ツールボックスから、TextBox コントロールを StackPanel コントロールにドラッグします。

2. [プロパティ] ウィンドウで、Text プロパティまでスクロールします。

3. 左の列の端にある [プロパティ マーカー] () をクリックします。

   メニューが表示されます。

   ヒント

   行を右クリックしてメニューを表示することもできます。

4. [データ バインドの適用] をクリックします。

   データ バインディング ビルダーが表示され、[パス] ペインが開きます。

5. [FirstName] プロパティをクリックします。

   

6. デザイン ビューでは、SampleCustomer.xaml ファイルで指定された FirstName 値が TextBox コントロールに表示されます。

   

サンプル データのコレクションへのバインディング

次の手順では、DataGrid コントロールを SampleCustomers.xaml ファイルにある Customer オブジェクトのコレクションにバインドする方法について説明します。

DataGrid コントロールをサンプル データのコレクションにバインドするには

1. ツールボックスから、DataGrid コントロールをグリッドの 2 行目にドラッグし、その行が埋まるようにそのコントロールのサイズを調整します。

2. XAML ビューで、DataGrid 要素を次の XAML に置き換えます。

   <DataGrid Grid.Row="1" d:DataContext="{d:DesignData Source=./DesignData/SampleCustomers.xaml}" />
   

   この XAML によって、DataGrid のデザイン時のデータ コンテキストが確立され、データ バインディングにサンプル データが使用できるようになります。

3. DataGrid を選択します。

4. [プロパティ] ウィンドウで、ItemsSource プロパティまでスクロールします。

5. 左の列の端にある [プロパティ マーカー] () をクリックします。

6. [データ バインドの適用] をクリックします。

   データ バインディング ビルダーが表示され、[パス] ペインが開きます。

   

7. デザイン ビューでは、SampleCustomers.xaml ファイルで指定された Customer インスタンスが DataGrid コントロールに表示されます。

   

参照

処理手順

チュートリアル: WPF デザイナーによるデータ バインディングの作成

チュートリアル: デザイナーでの DesignInstance によるデータへのバインド

参照

DataGrid

TextBox