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

[アーティクル]
08/09/2011

このチュートリアルでは、実行時に割り当てられるデータコンテキストのデザイン時に WPF Designer for Visual Studioを使用してデータバインディングを作成する方法を説明します。データバインディングを作成するには、データバインディングビルダーを使用して、特殊なデザイン時データコンテキストを作成し、DesignInstance をビジネスオブジェクト型に設定します。 DesignInstance はデザイン時プロパティです。

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

プロジェクトを作成する。
Customer クラスのビジネスオブジェクトを作成する。
TextBox コントロールを、データコンテキスト内の Customer クラスのデザイン時インスタンスにデータバインドする。

タスクを終了すると、実行時にテキストボックスがビジネスオブジェクトにバインドされます。データバインディングは、WPF デザイナーで設定されます。

注意

実際に画面に表示されるダイアログボックスとメニューコマンドは、アクティブな設定またはエディションによっては、ヘルプの説明と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「設定の操作」を参照してください。

必須コンポーネント

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

Visual Studio 2010.

プロジェクトの作成

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

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

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

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

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

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

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

注意

ビジネスオブジェクト型は、デザイン時のデータバインディングで使用するために作成可能にする必要はありません。たとえば、デザイン時に抽象クラスにバインドできます。

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

Customer という名前の新しいクラスをプロジェクトに追加します。詳細については、「方法 : 新しいプロジェクト項目を追加する」を参照してください。

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

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

namespace DataBindingDemo
{
    public class Customer
    {   
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

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

データバインディングを作成するには、データバインディングビルダーを使用して、特殊なデザイン時データコンテキストを作成し、DesignInstance をビジネスオブジェクト型に設定します。

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

WPF デザイナーで MainWindow.xaml を開きます。
XAML ビューで、MainWindow の開始タグに次の名前空間の割り当てを追加します。詳細については、「方法 : 名前空間を XAML にインポートする」を参照してください。
```
xmlns:local="clr-namespace:DataBindingDemo"
```
Grid の開始タグを次の XAML に置き換えます。
```
<Grid d:DataContext="{d:DesignInstance Type=local:Customer}" Name="_grid">
```
この XAML によって、デザイン時のデータコンテキストが確立され、Customer クラスがデータバインディングの作成に使用できるようになります。
ソリューションをビルドします。

データバインディングの作成

データバインディングビルダーを使用することで、Customer ビジネスオブジェクトへのデータバインディングを作成できます。次の手順では、TextBox コントロールを Customer オブジェクトの FirstName プロパティにバインドする方法について説明します。

データバインディングを作成するには

[ツールボックス] から TextBox コントロールを Window にドラッグします。
[プロパティ] ウィンドウで、Text プロパティまでスクロールします。
左の列の端にある [プロパティマーカー] () をクリックします。

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

ヒント

行を右クリックしてメニューを表示することもできます。
[データバインドの適用] をクリックします。

データバインディングビルダーが表示され、[パス] ペインが開きます。
[FirstName] をクリックし、Enter キーを押します。

XAML ビューで、Text プロパティに Customer 型の FirstName プロパティへのデータバインディングが作成されます。

実行時のデータコンテキストの設定

最後に、実行時のデータコンテキストを割り当てます。デザイン時に作成したデータバインディングは、XAML やコードを変更しなくても実行時に動作します。

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

コードエディターで MainWindow.xaml.cs または MainWindow.xaml.vb を開きます。

自動的に生成された MainWindow コンストラクターを次のコードに置き換えます。

public MainWindow()
{
    InitializeComponent();

    Customer c = new Customer();
    c.FirstName = "Brenda";
    c.LastName = "Diaz";

    this._grid.DataContext = c;
}

F5 キーを押してアプリケーションを実行します。

テキストボックスに、実行時に作成された Customer オブジェクトの名が表示されます。

次の手順

デザイン時のサンプルデータにバインドできます。このデータは、実際のデータを使用できる場合に実行時に正しいレイアウト動作を構築するのに役立ちます。詳細については、「チュートリアル: WPF デザイナーでのサンプルデータの使用」を参照してください。

参照

DataContext

その他の技術情報

デザイン時属性

WPF デザイナーでのデータバインディング

次の方法で共有

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

必須コンポーネント