Export (0) Print
Expand All

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 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. 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 Creating sample data.

  2. In the Data panel, click List Mode 9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3.

    Tip 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 ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae, DataGrid 55bfb0df-05d2-4b58-8312-24a3aed103e3, or TreeView 7ecbf7de-e46f-44e9-b931-98c8c12c0b2a object.

    Note 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

    86a5a839-015a-4510-8617-94487f4adb09
    Dragging data in List Mode onto a DataGrid object

    8a772e67-9d6e-434d-8b39-fd3b69858e94
    Dragging data in List Mode onto a TreeView object

    2677bde8-9d64-4d15-8877-517d0a66ea14
  4. In the Data panel, click Details Mode 7786ee28-da1d-41b2-93fd-b4caeb75ab98.

    Tip 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

    6c17e27b-5c6f-45c8-a961-fd177406042d

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 b174a511-dd12-4a45-a986-034de7693de9, 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 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 9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3.

  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

    ef9cdd5e-ebce-419a-afaa-86e2e4f8e4ac
  6. In the Data panel, click Details Mode 7786ee28-da1d-41b2-93fd-b4caeb75ab98.

  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 12e06962-5d8a-480d-a837-e06b84c545bb, 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

    ab312546-3416-42c8-83e5-610590939041
  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 12e06962-5d8a-480d-a837-e06b84c545bb 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.

      e7cf00b9-285a-45ab-a4d6-5b94881917fa
    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.

Show:
© 2014 Microsoft