データへのオブジェクトのバインド
データは、データのアイテムをアートボードのオブジェクトにバインドすることにより表示します。
データ バインディングは、次の 2 つの部分で構成されています。
データ コンテキスト データの取得元のデータ ソースを識別する手段です。 データ コンテキストは継承できるので、親オブジェクトにデータ コンテキストを割り当てて、すべての子オブジェクトが同じデータにアクセスできるようにします。 これは、同じデータ ソースにあるデータに複数のオブジェクトをバインドする場合や、リストと詳細をリンクしたデザインを作成する場合に便利です。
詳細については、「リスト-詳細データ バインドの作成」を参照してください。
プロパティのバインド プロパティをバインドする特定のアイテムを識別する方法です。 たとえば、TextBlock オブジェクトの Text プロパティをデータ ソースの文字列アイテムにバインドしたり、ListBox の ItemsSource プロパティをデータ ソースにあるコレクションにバインドしたりします。 プロパティのバインドは、必ずしもデータ コンテキストと同じオブジェクトに設定する必要はありません。ツリーの上位にあるオブジェクトにデータ コンテキストが設定されている限り、プロパティのバインドも機能します。
データ バインディングを作成するには、[データ] パネルからアイテムをドラッグするか、[プロパティ] パネルで、データ コンテキストとプロパティのバインドを手動で設定します。
[データ] パネルからアイテムをドラッグしてデータをバインドするには
[データ] パネルで、以下のいずれかを実行します。
[リスト モード]
.png "JJ170055.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(ja-jp,VS.120).png")
をクリックして、アイテム コントロール (ListBox、DataGrid、TreeView、ComboBox など) のデータを表示します。 [リスト モード] は、コレクションにあるデータの一覧を作成するときに使用します。[詳細モード]
.png "JJ170055.7786ee28-da1d-41b2-93fd-b4caeb75ab98(ja-jp,VS.120).png")
をクリックして、コレクション内の 1 つのレコード、またはデータの 1 つのアイテムを表示します。
[データ] パネル で、データのアイテムを 1 つまたは複数選択して、アートボードにドラッグします。 アートボードの空白の部分と、既存のオブジェクトのどちらにでもドラッグできます。
ドラッグしているデータの種類によって、Blend for Visual Studio で行われる処理が異なります。 次の表に、Blend がデータをどのように取り扱うかをモード別に示します。
アクション
リスト モード
詳細モード
コレクション、またはコレクション内のアイテムをアートボードの空白の部分にドラッグします。
1 行に 1 レコードずつデータを表示する ListBox オブジェクトが作成されます。 ListBox の ItemsSource プロパティが、コレクションの名前になります。 親のレイアウト パネルに、DataContext プロパティが設定されます。
例については、「リスト-詳細データ バインドの作成」を参照してください。
データコレクションにある 1 つのレコードの選択されたすべてのアイテムを表示するオブジェクトが作成されます。
リスト モードで同じコレクションからアイテムをドラッグした後で、詳細モードでこの操作を行うと、リストと詳細データの関係が自動的に設定されます。
詳細については、「リスト-詳細データ バインドの作成」を参照してください。
リスト モードでバインドを作成していない場合は、コレクションにある最初のレコードのデータだけが表示されます。
階層構造のコレクション、または階層構造のコレクション内のアイテムをアートボードの空白の部分にドラッグします。
1 行に 1 レコードずつデータを表示する TreeView オブジェクトが作成されます。 TreeView の ItemsSource プロパティが、コレクションの名前になります。 親のレイアウト パネルに、DataContext プロパティが設定されます。
例については、「TreeView コントロールを使用する」を参照してください。
データコレクションにある 1 つのレコードの選択されたすべてのアイテムを表示するオブジェクトが作成されます。
リスト モードで同じコレクションからアイテムをドラッグした後で、詳細モードでこの操作を行うと、リストと詳細データの関係が自動的に設定されます。
詳細については、「リスト-詳細データ バインドの作成」を参照してください。
リスト モードでバインドを作成していない場合は、コレクションにある最初のレコードのデータだけが表示されます。
コレクションまたはコレクション内のアイテムを既存のアイテム コントロール (ListBox、DataGrid、TreeView、ComboBox など) にドラッグします。
アイテム コントロールの 1 行に 1 レコードずつデータが表示されます。 アイテム コントロール の ItemsSource プロパティが、コレクションの名前になります。 親のレイアウト パネルに、DataContext プロパティが設定されます。
例については、「DataGrid コントロールの使用」を参照してください。
データコレクションにある 1 つのレコードの選択されたすべてのアイテムを表示するオブジェクトが作成されます。
リスト モードで同じコレクションからアイテムをドラッグした後で、詳細モードでこの操作を行うと、リストと詳細データの関係が自動的に設定されます。
詳細については、「リスト-詳細データ バインドの作成」を参照してください。
リスト モードでバインドを作成していない場合は、コレクションにある最初のレコードのデータだけが表示されます。
コレクションに含まれていないデータのアイテムを 1 つだけアートボードの空白の部分にドラッグします。
そのデータを表示するオブジェクトが作成されます。 たとえば、文字列または数値のデータの場合は、TextBlock が作成されます。 ブール型の値の場合は、CheckBox が作成されます。 パスかイメージ ファイルの場合は、イメージが Image オブジェクトに表示されます。
リスト モードと同じ。
コレクションに含まれていないデータのアイテムを 1 つだけ既存のオブジェクトにドラッグします。
Blend によって、オブジェクトのどのプロパティにデータをバインドすればよいかが決められます。 たとえば、文字列や数値のデータの場合は、Content プロパティか Text プロパティにバインドされます。 ブール型の値の場合は、IsEnabled や IsChecked などのブール型のプロパティにバインドされます。 パスかイメージ ファイルの場合は、Source プロパティにバインドされます。
バインド先の適切なプロパティが見つからない場合は、[データ バインディングの作成] ダイアログ ボックスが表示されます。 [データ バインディングの作成] ダイアログ ボックスの [<オブジェクト名> のプロパティ] ドロップダウン リストで、データのバインド先のプロパティを選択できます。 たとえば、データが色を表す 16 進数値の文字列の場合に、ドキュメントの背景色を変更するには、ドキュメントのルート オブジェクトに、Shift キーを押しながらデータ アイテムをドラッグし、[データ バインディングの作成] ダイアログ ボックスで [Background] プロパティを選択します。
リスト モードと同じ。
[プロパティ] パネルを使用してデータをバインドするには
[オブジェクトとタイムライン] パネルで、データをバインドするオブジェクト、データを表示させるオブジェクト、またはツリーの上位にあるオブジェクト (レイアウト パネルなど) を選択します。
ここが、データ コンテキストを設定する場所になります。
ヒント
または、[オブジェクトとタイムライン] パネルでオブジェクトを右クリックします。要素がコンテンツ コントロールの場合は、[Content を Data にデータ バインディング] を選択します。要素がアイテム コントロールの場合は、[ItemsSource を Data にデータ バインディング] を選択します。このヒントに従って操作する場合は、手順 3 に進みます。
[プロパティ] パネルで DataContext プロパティの横にある [詳細オプション]
.png "JJ170055.12e06962-5d8a-480d-a837-e06b84c545bb(ja-jp,VS.120).png")
をクリックし、[データ バインディング] をクリックします。[データ バインディングの作成] ダイアログ ボックスの [データ フィールド] タブをクリックします。
[データ ソース] で、データのバインド元のデータ ソースを選択します。
[OK] をクリックして、[データ バインディングの作成]ダイアログ ボックスを閉じます。
これで、このオブジェクトや子オブジェクトのプロパティに、選択したデータ ソースのデータ アイテムをバインドできるようになります。
データを表示させるオブジェクト、またはデータをバインドするオブジェクトを選択します。
[プロパティ] パネルで、データをバインドするプロパティを見つけます。 プロパティの型が、バインドするデータ アイテムの型と合っていることを確認します。 たとえば、コレクションにあるデータ アイテムをバインドする場合は、ListBox、DataGrid、TreeView、ComboBox などのアイテム コントロールにある ItemsSource プロパティを選択します。 文字列や数値のデータ アイテムをバインドする場合は、文字列型のプロパティを選択します。
選択したプロパティの横にある [詳細オプション]
をクリックして、[データ バインディング] をクリックします。[データ バインディングの作成] ダイアログ ボックスの [明示的なデータ コンテキスト] タブをクリックします。
[フィールド] で、プロパティにバインドするデータ アイテムを選択します。
ヒント
型が一致したデータ アイテムだけが表示されます。すべてのアイテムを表示するには、[表示] ドロップダウン リストで [すべてのプロパティ] を選択します。
必要に応じて、[データ バインディングの作成] ダイアログ ボックスで別の設定を行います。 たとえば、データ型がプロパティの型と一致しない場合は、値コンバーターを選択する必要が生じることがあります。 Blend はデータの変換を試みますが、変換できない場合はデータは表示されません。 この場合は、値コンバーターを自分で作成して、そのコンバーターを [データ バインディングの作成] ダイアログ ボックスで選択する必要があります。
詳細については、「試してみよう: データのタイプ変更」を参照してください。
[OK] をクリックして、[データ バインディングの作成]ダイアログ ボックスを閉じます。
サンプル データを使用している場合は、そのデータがアートボードに表示されます。 ライブ データを使用している場合は、F5 キーを押してデータを表示します。
ヒント
同じデータを複数のオブジェクトにバインドできます。また、リストと詳細をリンクしたデザイン、つまり一覧のアイテムを選択すると、そのアイテムの詳細が別のオブジェクト表示されるデザインを作成することもできます。
詳細については、「リスト-詳細データ バインドの作成」を参照してください。