Add and Bind Controls
Now you can add a List control to the Master
pane (remember, Master
is the name of the ContentControl that you placed on the left side of the grid earlier). The easiest way to do this is to select Master
in the Timeline. After it is selected, find the ListBox control in the Library panel and double click it. You'll see the ListBox fill the Master
pane, and appear as a child control to Master
in the Timeline. See Figure 10
|Figure 10. Adding a ListBox: Here's a partial view of the Expression interface and the Timeline panel after adding the ListBox to the Master Pane.|
You bind a ListBox to data with its ItemSource
property, which you can find in the properties palette. When you're happy with the layout of the ListBox, select the ItemSource
property, and from the menu that pops up, select "DataBind." You'll be presented with the Data Binding dialog (the same one that you saw earlier in Figure 9
This time you should select the 'Explicit DataContext' binding source button. Remember that the parent grid was bound to the Catalog data source. You'll be binding to a specific field on this, so we can leave this setting as it is.
However, to create a UI that shows the Master/Details bound data you need to create a 'Data Template'. At the bottom of the dialog you'll see a button that allows you to create one of these. Select it, and you'll get the dialog shown in Figure 11.
|Figure 11. Creating a Data Template: The Create Data Template dialog lets you define reusable data templates.|
This time, you're interested in the Name
element of the data, so that the master list will be a list of product names. To achieve this, clear all the checkboxes except the Name
field as shown in Figure 11
You'll see that the list gets populated with the names of the products from the XML data source. Before you run the application however, you should set a default item to be selected so that the Details pane will have something to show. You do this by setting the ListBox's SelectedIndex
property. You can set this to 0
to ensure that the top item in the list is selected by default. You should also set the IsSynchronizedWithCurrentItem
property to true
to ensure that the list stays synchronized with the current context of the data.
You can now run your application and view the contents of the master list with all the products in it. It's not very interesting though, so let's add the details.
|Figure 12. Populating the Details Pane: Here's one possible arrangement for placing the Image and TextBlock controls on the Details Pane|
First, remember that the Details
area is a content pane that can hold only one control, so you have to put a Grid control inside it, which can hold many children. Make sure that the details pane (and only the details pane) is selected. It will have a yellow border around it when it is properly selected. If you have trouble with this, double click on it in the Timeline, and it will get selected. Next, double click the Grid control in the Library. That will add a new Grid, sized to fit perfectly within the Details
To this Grid control you should add two new TextBlock controls and an Image control. Size and place them anyway you like. You can see an example in Figure 12.
You can bind the TextBlock controls by selecting their Text property and clicking "DataBind
You'll get the Data Binding dialog which you've already seen a couple of times. As you are binding to something on an already-well-known context, you select the "Explicit Data Context" option and then navigate to the relevant fieldin this case, bind the TextBlock controls to the Description and Price properties of the data.
|Figure 13. The Running Application: Here's the sample WPF / XAML Application after selecting an item in the list, showing the image and details in the right hand pane.|
For the Image control, follow the same process, except that you bind to the Source
property of the image. The XML data source contains paths to images for the products (the image files themselves are part of the download
for this article). You should copy the image files to a directory on your hard drive and make sure that the paths in the XML data match the image locations.
Running the Application
Congratulations, you've created your first WPF application, built entirely in XAML using a development tool called Microsoft Expression. To run it, you can press F5 or select "Test Project" under the Expression Project menu. The project will execute (see Figure 13). Note that when you resize it by resizing the Window or moving the splitter bar, all the controls adjust as well, sizing neatly to the current Window and split dimensions.
The next article in this series expands on this application, building a "live" data source in Visual Studio.NET that will provide a hosted catalog for the product, replacing the static XML file you used this time. Also, you'll spruce up the UI with 3D, animations, reflections and GEL effects. By that time you'll really be in your element, building Avalon applications and learning how the new units of Expression, Cider, XAML, Avalon, and WPF fit together to allow you to create compelling end-to-end application experiences.