Home .NET WPF Binding: Master-detail script.

WPF Binding: Master-detail script.

by admin

In the simplest master-detail script, clicking on a certain item in the ItemsControl causes detailed information about that item to be displayed on another control. For example, the program can display a list of customer names, and clicking on a particular customer will cause the address, phone number and date of birth of this customer will be displayed in the TextBlocks.
In this post I will use the solar system with the planets as a data source : Clicking on the name of a planet in a ListBoxwill cause an image of the planet and information about it to appear on the ContentControl. The ListBox plays the role of the master, and ContentControlpresents detailed information.
In the resources section, the Window class has an XmlDataProvider with planet data and a CollectionViewSourcethat has a Sourceproperty associated with the provider. This code binds ListBox to CollectionViewSource:

    <! – master – >

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

    I also need a ContentControl which will be used to display detailed information about the selected item. The code below may seem a bit strange at first : are we linking a ContentControl (which displays a single element) to a collection of elements ?(Note that this binding is the same as ListBox’s above.) This code works fine because the data binding engine is smart enough to find the difference between the two purposes. When ItemsControl is linked to a collection, we get the collection; when ContentControl is linked to a collection, we get the current item in the collection. All of this makes applying the master-detail script in WPF very easy.

      <! – detail – >

    1. < ContentControl ContentTemplate ="{ StaticResource detailTemplate }" Content ="{ Binding Source ={ StaticResource cvs }}" />
    2. * This source code was highlighted with Source Code Highlighter

      To define how detailed information should be displayed in ContentControl, we use the DataTemplate. The following code describes the most interesting parts of this template. Notice that the binding is done with XML, so I use XPathinstead of Path:

        < DataTemplate x:Key =” detailTemplate >

      1. (...)
      2. < Image Source ="{ Binding XPath = Image , Converter ={ StaticResource stringToImageSource }}" />
      3. (…)
      4. < StackPanel Orientation =” Horizontal Margin =” 5 , 5 , 5 , 0 ? >
      5. < TextBlock Text =” Orbit: FontWeight =” Bold />
      6. < TextBlock Text =”{ Binding XPath = Orbit }" />
      7. </ StackPanel >
      8. < StackPanel Orientation =” Horizontal Margin =” 5 , 0 , 5 , 0 ? >
      9. < TextBlock Text =” Diameter: FontWeight =” Bold />
      10. < TextBlock Text =”{ Binding XPath = Diameter }” />
      11. </ StackPanel >
      12. < StackPanel Orientation =” Horizontal Margin =” 5 , 0 , 5 , 5 ? >
      13. < TextBlock Text =” Mass: FontWeight =” Bold />
      14. < TextBlock Text =”{ Binding XPath = Mass }” />
      15. </ StackPanel >
      16. (…)
      17. </ DataTemplate >
      18. * This source code was highlighted with Source Code Highlighter

        Here is a screenshot of the completed example :
        Here you can find a project for Visual Studio with the code used in the article.

        You may also like