Create a list-details data binding

A list-details design includes two parts:

• A list view that displays a list of items, typically a collection of data.

• A details view that displays details about the item that is selected in the list.

This User Guide is an example of the list-details design, where the table of contents is the list view, and the displayed topic is the details view.

Blend for Visual Studio 2012 makes it easy to add data to the artboard in a list-details design by providing two modes for the Data panel:

• In List mode, items that you drag from the Data panel create the list view. You can drag items onto a ListBox, DataGrid, or TreeView control. If you drag items onto a blank area of the artboard, a ListBox will be created automatically.

• In Details mode, the items that you drag from the Data panel create the details view in a Grid layout panel. Alternatively, you can create a different layout panel (such as a Canvas layout panel) and drag the items into that.

Behind the scenes, Blend configures the relationship between the list view and the details view automatically by setting the DataContext property of the Grid object to the SelectedItem property of the object that displays the list view. Alternatively, this relationship can be configured manually.

To create a list-details data binding automatically

1. Create a newe XAML project with sample data.

   For more information on how to create a XAML project with sample data, see Creating sample data.

2. In the Data panel, click List Mode .

   Tip

   In List Mode, items of data that you drag onto the artboard are assumed to be stand-alone data bindings or part of a list view. This is the default mode of the Data panel.

3. In the Data panel, drag one or more properties from inside a collection of data onto the artboard (to create a ListBox object), or onto an existing ListBox , DataGrid , or TreeView  object.

   Note

   If a Create Data Binding dialog box appears, you might be in Details Mode instead of List Mode.

   The object displays the collection of data for each property.

   Dragging data in List Mode onto a ListBox object

   

   Dragging data in List Mode onto a DataGrid object

   

   Dragging data in List Mode onto a TreeView object

   

4. In the Data panel, click Details Mode .

   Tip

   In Details Mode, items of data that you drag to the artboard are assumed to be part of a details view. A Grid object is created to display child objects for each item of data. The Grid object is automatically configured to use the data context and the selected item of the last object that was created in List Mode.

5. In the Data panel, drag one or more properties from inside a collection of data onto the artboard (to create a Grid layout panel) or into an existing layout panel.

   The layout panel displays a TextBlock control for the name and value of each property.

6. Press F5 to test your application. Click items in the list view to see the details view be updated accordingly.

   Selecting items in list controls to update their details view

   

This procedure showed you how to create a list-details view that is two levels deep. You can also create a list-details view that is three levels deep.

For more information, see Try it: Create a list-details binding three levels deep

To create a list-details data-binding manually

1. If you do not have a data source that you can use, create a sample data source and enable it to be used at run time.

   For more information, see Generate sample data.

2. In the Tools panel, select a control that you want to use to display the list view, such as a ComboBox , and draw it on the artboard.

3. In the Objects and Timeline panel, right-click the new object, click Rename, type a new name, and then press ENTER.

   Tip

   When an object is created, it is not given an explicit name. By renaming the object, you create a name that can be referenced by the DataContext property of the details view object.

4. In the Data panel, click List Mode .

5. In the Data panel, drag one or more properties from inside a collection of data onto the list object.

   Data in List Mode onto a ComboBox object

   

6. In the Data panel, click Details Mode .

7. In the Data panel, drag one or more properties from inside a collection of data onto the artboard (to create a Grid layout panel) or into an existing layout panel.

   The layout panel displays a TextBlock control for the name and value of each property.

8. Press F5 to test your application. If selecting a different item in the list object does not update the details view, continue to the next step.

9. Select the layout panel (typically a Grid object) that represents the details view.

10. In the Properties panel, next to the DataContext property, click Advanced options , and then click Data Binding.

11. In the Create Data Binding dialog box, click the Element Property tab.

12. Under Scene elements, select the list object, and then, under Properties, select the SelectedItem property.

    Creating a relationship between the details object and the list object

    

13. Click OK to close the Create Data Binding dialog box.

    All the child items in the details layout panel will use the data context of the selected item of the list object.

14. Verify that the child items of the details layout panel are bound to the relevant data properties. Some of the child items are not bound to data because they display only the name of a data property. The other child items should be data-bound because they display the data associated with the selected item in the list object. For example, select one of TextBlock child items that does not display a data property name, and then, in the Properties panel, look for the Text property. If there is no yellow bounding box around the property, the TextBlock object is not data-bound. To bind the TextBlock object:

    1. Click Advanced options  next to the Text property, and then click Data Binding.

    2. In the Create Data Binding dialog box, click the Explicit Data Context tab.

    3. Under Fields, expand the Collection, and then select the data property that you want to display in this TextBlock object.

       

    4. Click OK to close the Create Data Binding dialog box.

       A yellow bounding box appears around the Text property to indicate that the property is now data-bound.

15. Press F5 to test your application.

See Also

Tasks

Use the DataGrid control

Use the TreeView control

Concepts

Style a control that displays data