Clever Geek Handbook

WPFバインディング：マスター詳細スクリプト。

最も単純なマスター/ディテールシナリオでは、ItemsControlの特定のアイテムをクリックすると、この要素に関する詳細情報が別のコントロールに表示されます。 たとえば、プログラムは顧客名のリストを表示でき、特定の顧客をクリックすると、その顧客の住所、電話番号、生年月日がTextBlocksに表示されます。



この投稿では、惑星を含む太陽系をデータソースとして使用します。ListBoxで惑星の名前をクリックすると、惑星の画像とその情報がContentControlに表示されます。 ListBoxはウィザードの役割を果たし、ContentControlは詳細情報を提供します。



リソースセクションのWindowクラスには、惑星データを含むXmlDataProviderと、プロバイダーに関連付けられたSourceプロパティを持つCollectionViewSourceがあります。 このコードは、ListBoxをCollectionViewSourceに関連付けます。

<! – master – > < ListBox ItemsSource =”{ Binding Source ={ StaticResource cvs }}” DisplayMemberPath =”@ Name ” Padding =” 5 ″ Margin =” 0 , 0 , 5 , 0 ″ /> * This source code was highlighted with Source Code Highlighter .



  1. <! – master – > < ListBox ItemsSource =”{ Binding Source ={ StaticResource cvs }}” DisplayMemberPath =”@ Name ” Padding =” 5 ″ Margin =” 0 , 0 , 5 , 0 ″ /> * This source code was highlighted with Source Code Highlighter .



  2. <! – master – > < ListBox ItemsSource =”{ Binding Source ={ StaticResource cvs }}” DisplayMemberPath =”@ Name ” Padding =” 5 ″ Margin =” 0 , 0 , 5 , 0 ″ /> * This source code was highlighted with Source Code Highlighter .



<! – master – > < ListBox ItemsSource =”{ Binding Source ={ StaticResource cvs }}” DisplayMemberPath =”@ Name ” Padding =” 5 ″ Margin =” 0 , 0 , 5 , 0 ″ /> * This source code was highlighted with Source Code Highlighter .





また、選択したアイテムに関する詳細情報を表示するために使用されるContentControlも必要です。 以下のコードは最初は少し奇妙に見えるかもしれません：ContentControl（1つの要素を表示する）を要素のコレクションに関連付けていますか？ （このバインディングは上記のListBoxと同じであることに注意してください。）データバインディングエンジンは2つの目標の違いを見つけるのに十分スマートであるため、このコードは問題なく機能します。 ItemsControlがコレクションにバインドされると、コレクションが取得されます。 ContentControlがコレクションにバインドされると、コレクションの現在の（現在の）要素を取得します。 これにより、WPFでマスター/詳細スクリプトを非常に簡単に使用できます。





  1. <！ -詳細- >
  2. < ContentControl ContentTemplate =” { StaticResource detailTemplate }” Content =” { Binding Source = { StaticResource cvs }}” />
*このソースコードは、 ソースコードハイライターで強調表示されました。


ContentControlで詳細情報を表示する方法を決定するには、DataTemplateを使用します。 次のコードは、このテンプレートの最も興味深い部分を説明しています。 バインディングはXMLで発生するため、パスではなくXPathを使用します。





  1. < DataTemplate x：Key =” detailTemplate ” >
  2. （...）
  3. < Image Source =” { Binding XPath = Image 、 Converter = { StaticResource stringToImageSource }}” />
  4. （...）
  5. < StackPanel Orientation =” Horizo​​ntal ” Margin =” 5、5、5、0 ？ >
  6. < TextBlock Text =” Orbit： ” FontWeight =” Bold ” />
  7. < TextBlock Text =” { バインディング XPath = オービット }” />
  8. </ stackpanel >
  9. < StackPanel Orientation =” Horizo​​ntal ” Margin =” 5、0、5、0 ？ >
  10. < TextBlock Text =” Diameter： ” FontWeight =” Bold ” />
  11. < TextBlock Text =” { バインディング XPath = Diameter }” />
  12. </ stackpanel >
  13. < StackPanel Orientation =” Horizo​​ntal ” Margin =” 5、0、5、5 ？ >
  14. < TextBlock Text =” Mass： ” FontWeight =” Bold ” />
  15. < TextBlock Text =” { バインディング XPath = Mass }” />
  16. </ stackpanel >
  17. （...）
  18. </ DataTemplate >
*このソースコードは、 ソースコードハイライターで強調表示されました。


完成したサンプルのスクリーンショットを次に示します。









ここでは、記事で使用されたコードを含むVisual Studioのプロジェクトを見つけることができます。


More articles:


All Articles