DataTemplate-ListBox

DataTemplate?の説明として一番簡単と思われるListBox?を利用して説明していきます。
DataTemplate?の説明なので、XmlDataProvider、Bindingなどの説明は割愛させていただきます。

リストボックスを配置した比較できるプログラム bookmark

まずは、DataTemplate?を利用した場合の比較ができるように、リストボックスを2つ配置したフォームを作成します。
リストボックスのItemsSource?には、modelフィールドをバインドしています。

画面レイアウト

デザイン時でも、既に上段のリストボックスには、アイテムが表示されています。(リアルですね)
下段のリストボックスは、配置しただけなので、アイテムは表示されていません。これから、DataTemplate?を利用して下段のリストボックスにアイテムが表示されるようにしていきます。

XmlDataProviderのSourceを表示の関係上改行していますが、実際のコードでは改行しないで下さい。

DataTemplate?の実装 bookmark

では、実際にDataTemplate?を実装したXAMLを見てみます。

14-16行目がDataTemplate?の定義部分です。14行目のx:Keyでテンプレートの名前を指定、15行目で実際に表示される内容を指定しています。
ここでは、上段のリストボックスと同じになるように、TextBlock?を用いて、modelフィールドを表示するようにしています。
36行目でリストボックスのアイテムに摘要されるテンプレートを指定しています。ListItemTemplate?は、14行目で定義した名前を指定します。

実行画面

このように上下のコンボボックスが同じようになりました。この事から、DataTemplate?の定義(14-16行目)を変えれば、表示されるアイテムの外観を変更できるのが分かります。

複数列表示してみる bookmark

上記XAMLの、14-16行目を以下のように変えるだけで、複数列表示が行えます。

と言う事は、アイテム個々の表示の仕方は自由にカスタマイズできると言う事です。(便利!)
じゃぁ、もっと格好良くするとどうなるか・・・

画像や色々な情報を表示する bookmark

DataTemplate?の内容を変更するだけで・・・

画像や色々な情報を表示した画面

クリックされた関連URLを表示してみる bookmark

上記のリストボックスを利用して、アイテムがクリックされたら関連するURLを表示するようにしてみます。

クリックされた関連URLを表示した画面

58行目のIsSynchronizedWithCurrentItem?="True"は、選択されたアイテムとの同期を取る為で、これが無ければ、リストボックスのアイテムが選択されても、関連URL(linkフィールド)は表示されません。