WPF Binding: Master-detail script.

In the simplest master-detail scripts, clicking on a specific item in the ItemsControl causes the detailed information about this item to be displayed on another control. For example, a program can display a list of customer names, and clicking on a specific customer will result in the address, phone number, and date of birth of that customer displayed in TextBlocks.

In this post, I will use the solar system with the planets as a data source: clicking on the name of the planet in ListBox will result in the image of the planet and information about it being displayed on ContentControl. ListBox plays the role of a master, and ContentControl provides detailed information.

In the resource section, the Window class has an XmlDataProvider with data from the planet and a CollectionViewSource, in which the Source property is associated with the provider. This code links a ListBox with a 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 .

I also need ContentControl, which will be used to display detailed information about the selected item. The code below may seem a bit odd at first: do we associate ContentControl (which displays a single item) with a collection of items? (Note that this binding is the same as the ListBox above.) This code works great because the data binding engine is smart enough to find the difference between these two goals. When the ItemsControl is bound to the collection, we get the collection; when ContentControl binds to a collection, we get the current (current) element of the collection. All this makes the use of a master-detail script in WPF very simple.

1. <! - detail - >
2. < ContentControl ContentTemplate = ”{ StaticResource detailTemplate }” Content = ”{ Binding Source = { StaticResource cvs }}” />

* This source code was highlighted with Source Code Highlighter .

To determine how detailed information should be displayed in ContentControl, we use a DataTemplate. The following code describes the most interesting parts of this template. Notice that the binding happens to XML, so I use XPath instead of Path:

1. < DataTemplate x: Key = ” detailTemplate ” >
2. (...)
3. < Image Source = ”{ Binding XPath = Image , Converter = { StaticResource stringToImageSource }}” />
4. (...)
5. < StackPanel Orientation = ” Horizontal ” Margin = ” 5 , 5 , 5 , 0 ? >
6. < TextBlock Text = ” Orbit: ” FontWeight = ” Bold ” />
7. < TextBlock Text = ”{ Binding XPath = Orbit }” />
8. </ StackPanel >
9. < StackPanel Orientation = ” Horizontal ” Margin = ” 5 , 0 , 5 , 0 ? >
10. < TextBlock Text = ” Diameter: ” FontWeight = ” Bold ” />
11. < TextBlock Text = ”{ Binding XPath = Diameter }” />
12. </ StackPanel >
13. < StackPanel Orientation = ” Horizontal ” Margin = ” 5 , 0 , 5 , 5 ? >
14. < TextBlock Text = ” Mass: ” FontWeight = ” Bold ” />
15. < TextBlock Text = ”{ Binding XPath = Mass }” />
16. </ StackPanel >
17. (...)
18. </ DataTemplate >

* 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 that was used in the article.