Creating a simple master details list
This article describes how to create a master details list using Microsoft Expression Interactive Designer (and guess what: no code needed!). We are going to use databinding to achieve this.
The data-source
We will use a simple xml, containing the list of products from the Expression family, and a short description for each of them. Download the attached "products.xml" and save it on your local machine.
Start Microsoft Expression Interactive Designer. We will use the empty project created by default
Add products.xml as an XML Data source. For that, in the "Data" palette, click on the "Add XML Data Source" and Browse to the "products.xml". Press Ok. Now the Data Palette will show the new data source (its default name is "ProductsDS").
The master list
Expand the "ProductsDS" data source and "Product[n]" node on the scene. Choose ListBox from the context menu. Press "Ok" at the first dialog; in the second one, uncheck "Description" (we want to show only the name in the list) and press Ok. At this point, you should have a list displaying the names of the products.
The details
We want to display the description of the selected item in a separate TextBox.
Create a TextBlock control from the Library Palette
In the "Properties" palette, click on the "Data Context" property and select "Databind". Click on the "Element Property" button, select the "ListBox" as the scene element (left side) and "Selected Item" as the property (right side). Press "Finish". This way we set the Data Context to the Selected Item of the Listbox.
In the "Properties" palette, click on the "Text" property and select "Databind". Click on the "Explicit Data Context" button and expand the tree and select "Description". Press Finish. This way we specify what exactly we want to display as the Text.
Run the project
The only thing left: run the project (In the main menu, Project click on "Run Project"). The application will be compiled and executed. The Description textbox shows the Description of the selected item.
Why is the textbox empty in Expression Interactive Designer ?
That's because, by default, there is no item selected in the list. To do that, select the listbox and set the SelectedIndex property to 0 (by default it is -1).
