データ テンプレートの作成と変更
.png "このページは WPF および Silverlight 2 に適用されます")
データ テンプレートでは、データを表現する構造と形式を定義します。詳細については、「データ処理の概要」のデータ テンプレートのセクションを参照してください。完全な例については、「試してみよう : RSS ニュース リーダーの作成」を参照してください。
データ テンプレートを作成するには
アートボード上、または [組み合わせ] パネルの [オブジェクトとタイムライン] の下で、データ バインドの作成対象のオブジェクトをクリックします。このオブジェクトに、データ ソースからデータが流し込まれます。
[プロパティ] パネルで、バインド先として使用するプロパティの横にある [詳細プロパティ オプション]
.png "Cc294682.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(ja-jp,Expression.10).png")
ボタンをクリックします。このプロパティが、バインドされたデータを実際に保持します。ポップアップ ウィンドウで、[データ バインド] をクリックします。[データ バインドの作成] ダイアログ ボックスが表示されます。
.gif "メモ")
メモ :データ テンプレートをサポートしているプロパティを選択する必要があります。テンプレートをサポートしていないプロパティを選択した場合は、[データ バインドの作成] ダイアログ ボックスに [データ テンプレートの定義] ボタンが表示されません。アイテムのリストを表すプロパティ (アイテム コントロールの ItemsSource プロパティ) やコンテンツを表すプロパティ (Content プロパティ) は、データ テンプレートをサポートしています。
作成するデータ バインドの種類に応じて、[データ バインドの作成] ダイアログ ボックスの上部にあるタブのいずれかを選択します。これらのタブについては、「データ処理の概要」のデータ バインドのセクションを参照してください。
次のいずれかの操作を行い、[データ テンプレートの定義] ボタンを有効にします。
[データ フィールド] タブを選択している場合は、データ ソースを指定し、目的のフィールドを選択します。データ ソースが存在しない場合は、[データ ソース] ウィンドウの下部にあるボタンのいずれかをクリックして新規作成する必要があります。例については、「データ ソースの追加と削除」または「試してみよう : RSS ニュース リーダーの作成」を参照してください。
[要素プロパティ] タブを選択している場合は、左側に表示されているリストから要素を選択します。選択した要素のプロパティが右側に表示されるため、その中から 1 つ選択します。
[明示的なデータ コンテキスト] タブを選択している場合は、フィールドを選択します。フィールドが 1 つも表示されない場合は、[データ フィールド] タブを使用します。または、先に、このオブジェクトあるいはオブジェクト階層でこのオブジェクトよりも上位にあるオブジェクトに対して DataContext プロパティを定義しておく必要があります。詳細については、「プロパティまたは要素へのデータのバインド」または「試してみよう : RSS ニュース リーダーの作成」を参照してください。
ダイアログ ボックスの下部にある [データ テンプレートの定義] ボタンをクリックします。[データ テンプレートの作成] ダイアログ ボックスが開きます。
[データ テンプレートの作成] ダイアログ ボックスには次の 3 つのオプションがあります。
既定のコントロール スタイリング 選択したコントロールの既定のスタイリングを使用します。アイテムのリストにバインドする場合は、通常、既定のスタイリングとして一連のテキスト ボックスが使用されます。詳細については、MSDN の「データ テンプレートの概要」のページを参照してください。
現在または定義済みのデータ テンプレート ドロップダウン ボックスから、現在使用されているか以前に定義済みのデータ テンプレート リソースを選択します。選択したコントロールに適したデータ テンプレート リソースが存在しない場合は、このオプションは選択できません。
新しいデータ テンプレートと表示フィールド このオプションを使用すると、テンプレートに含めるデータ フィールドと、各データ フィールドに割り当てるコントロールの型を選択できます。たとえば、文字列データのフィールドがある場合、このフィールドの表示に使用される既定のコントロールは TextBlock です。[TextBlock] の横にあるドロップダウン矢印をクリックし、そのデータ フィールドの表示用として別のコントロールを選択できます。同様に、最上位アイテム用として表示されているコントロール名の横にあるドロップダウン矢印をクリックして、すべてのフィールドを内包するコンテナ要素の型を選択できます。データ フィールドの表示順序を指定するには、矢印ボタンを使用します。ライブ データ バインドが存在しない場合は、[サンプル データの生成] チェック ボックスをオンにします。これにより、サンプル データを使用してアートボード上にコントロールを表示し、テンプレートの外観が適切かどうかを確認できます。
[プレビュー] ウィンドウで、テンプレートの外観が適切かどうかを確認します。データ テンプレートのオプションの設定が完了したら、[OK] をクリックします。アートボード上の該当オブジェクトに、テンプレートが適用された状態でデータが表示されます。
.gif "Cc294682.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif")
先頭に戻る
データ テンプレートを変更するには
[組み合わせ] パネルの [オブジェクトとタイムライン] で、変更対象のオブジェクトを右クリックし、[他のテンプレートの編集] をポイントします。次に、[生成アイテムの編集] をポイントし、[テンプレートの編集] をクリックします。Expression Blend がテンプレート編集モードに移行し、[オブジェクトとタイムライン] の下にテンプレート構造が表示されます。
メモ :既存のデータ テンプレートを編集する際に、既にデータ テンプレートを作成したプロパティの横にある [詳細プロパティ オプション]
ボタンをクリックし、[データ バインド] をクリックして [データ テンプレートの定義] ボタンをクリックしてから編集しようとした場合、実際には新しいデータ テンプレートが作成されます。Expression Blend がテンプレート編集モードに移行し、[オブジェクトとタイムライン] の下にデータ テンプレートの構造が表示されます。この編集モードでは、コントロールをテンプレートに追加し、[プロパティ] パネルのデータ バインドを使用して、追加したコントロールのプロパティをデータ ソースの新しいアイテムにバインドできます。
ルート パネル オブジェクトをダブルクリックしてアクティブにし、子オブジェクトを追加できる状態にします。
[ツールボックス] から、テンプレートに追加するコントロールを選択します。たとえば、表示する文字列データ要素が他にもある場合は、ツールボックスから TextBlock
.png "Cc294682.42165963-00f7-4a33-abcd-b0849edebada(ja-jp,Expression.10).png")
などのテキスト コントロールを選択し、そのアイコンをダブルクリックしてテンプレートに追加します。[オブジェクトとタイムライン] の下で新しいコントロールを選択した状態で、[プロパティ] パネルで、データをバインドするプロパティを探します。TextBlock の場合、通常は Text プロパティを使用します。
メモ :テキスト コントロールをアートボードに追加すると、Expression Blend はコントロールの編集モードに移行します。そのため、コントロールにコンテンツをすぐに入力できますが、コントロールのすべてのプロパティを操作することはできません。コントロールの編集モードを終了するには、Esc キーを押すか、[選択内容] ツールをクリックします。
選択したプロパティの横にある [詳細プロパティ オプション]
ボタンをクリックし、[データ バインド] をクリックします。[データ バインドの作成] ダイアログ ボックスが表示されます。
プロパティをバインドする対象のデータ アイテムを選択し、[完了] をクリックします。
テンプレートの編集モードを終了するには、[オブジェクトとタイムライン] で [上へスコープ]
.png "Cc294682.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.10).png")
ボタンをクリックします。
先頭に戻る