Create a master-details data binding
A master-details design includes two parts:
A master 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 master-details design, where the table of contents is the master view, and the displayed topic is the details view.
Microsoft Expression Blend makes it easy to add data to the artboard in a master-details design by providing two modes for the Data panel:
In List mode, items that you drag from the Data panel create the master 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, Expression Blend configures the relationship between the master 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 master view. Alternatively, this relationship can be configured manually.
Tip
Expression Blend comes with a sample that illustrates a simple master-details design, and customizes the appearance of the master and details objects. To open the sample in Expression Blend, click Welcome Screen on the Help menu, click the Samples tab, and then click ColorSwatchSL.
To create a master-details data binding automatically
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.
In the Data panel, click List Mode
.png "Ee341499.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(en-us,Expression.30).png")
.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 master view. This is the default mode of the Data panel.
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
.png "Ee341499.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(en-us,Expression.30).png")
, DataGrid .png "Ee341499.55bfb0df-05d2-4b58-8312-24a3aed103e3(en-us,Expression.30).png")
, or TreeView .png "Ee341499.7ecbf7de-e46f-44e9-b931-98c8c12c0b2a(en-us,Expression.30).png")
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
.png "Ee341499.86a5a839-015a-4510-8617-94487f4adb09(en-us,Expression.30).png")
Dragging data in List Mode onto a DataGrid object
.png "Ee341499.8a772e67-9d6e-434d-8b39-fd3b69858e94(en-us,Expression.30).png")
Dragging data in List Mode onto a TreeView object
.png "Ee341499.2677bde8-9d64-4d15-8877-517d0a66ea14(en-us,Expression.30).png")
In the Data panel, click Details Mode
.png "Ee341499.7786ee28-da1d-41b2-93fd-b4caeb75ab98(en-us,Expression.30).png")
.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.
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.
Dragging data in Details Mode after creating the ListBox binding
.png "Ee341499.50bc24c3-45a6-46cc-8baa-fe8e1640b245(en-us,Expression.30).png")
Dragging data in Details Mode after creating the DataGrid binding
.png "Ee341499.7f71870f-8b3d-4de9-8ddf-258893b424a5(en-us,Expression.30).png")
Dragging data in Details Mode after creating the TreeView binding
.png "Ee341499.b668febc-be6f-456f-8ad7-969d88f7aaea(en-us,Expression.30).png")
Press F5 to test your application. Click items in the master view to see the details view update accordingly.
Selecting items in master controls to update their details view
.png "Ee341499.6c17e27b-5c6f-45c8-a961-fd177406042d(en-us,Expression.30).png")
To create a master-details data binding manually
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.
In the Tools panel, select a control that you want to use to display the master view, such as a ComboBox
.png "Ee341499.b174a511-dd12-4a45-a986-034de7693de9(en-us,Expression.30).png")
, and draw it on the artboard.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.
In the Data panel, click List Mode
.In the Data panel, drag one or more properties from inside a collection of data onto the master object.
Dragging data in List Mode onto a ComboBox object
.png "Ee341499.ef9cdd5e-ebce-419a-afaa-86e2e4f8e4ac(en-us,Expression.30).png")
In the Data panel, click Details Mode
.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.
Dragging data in Details Mode after creating the ComboBox binding
.png "Ee341499.96269f5b-09d6-4e4a-8fdb-c8f5fd3240f2(en-us,Expression.30).png")
Press F5 to test your application. If selecting a different item in the master object does not update the details view, continue to the next step.
Select the layout panel (typically a Grid object) that represents the details view.
In the Properties panel, next to the DataContext property, click Advanced property options
.png "Ee341499.12e06962-5d8a-480d-a837-e06b84c545bb(en-us,Expression.30).png")
, and then click Data Binding.In the Create Data Binding dialog box, click the Element Property tab.
Under Scene elements, select the master object, and then, under Properties, select the SelectedItem property.
Creating a relationship between the details object and the master object
.png "Ee341499.ab312546-3416-42c8-83e5-610590939041(en-us,Expression.30).png")
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 master object.
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 master 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:
Click Advanced property options
next to the Text property, and then click Data Binding.In the Create Data Binding dialog box, click the Explicit Data Context tab.
Under Fields, expand the Collection, and then select the data property that you want to display in this TextBlock object.
.png "Ee341499.e7cf00b9-285a-45ab-a4d6-5b94881917fa(en-us,Expression.30).png")
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.
.png "Ee341499.9712d7c9-c15b-4fed-a816-881fa0809a61(en-us,Expression.30).png")
Press F5 to test your application.