Share via

Try it: Create a list-details binding three levels deep

  • Article

The topic Create a list-details data binding showed you how to create a list-details data-binding that is two levels deep. You can also create a list-details view that is three levels deep. For example, you might use a list-details view that is three levels deep for a music collection. The first list (a ListBox) is a list of artists' names. The second list (a second ListBox) is a list of the selected artist's albums. The details view might include the selected album's name and an image of the selected album's cover.

Tip

A ListBox combines both the list and the details view. The list itself is a list view, and each item in the list is a details view.

To create a list-details data-binding that is three levels deep

  1. In the Data panel, click New Sample Data. In the New Sample Data dialog box, in the Data source name box, type a name for your sample data, and then click OK.

  2. In the Data panel, click Collection to enable the text box, and then type Artists.

  3. Click Property1 to enable the text box, and then type ArtistName. Click **Change property type **c4968582-0dae-407e-961b-80ffa2838f3b. In the Format drop-down list, click Name.

  4. Right-click Property2, and then click Remove "Property2".

  5. To the right of Artists, do the following:

    1. Click the arrow next to the plus sign 203a14a5-0db2-486e-9b94-4fdf658d531b, and then, on the drop-down menu that appears, click Add Collection Property.

    2. Click Collection to enable the text box, and then type Albums.

  6. To the right of Albums, do the following:

    1. Click **Add simple property **203a14a5-0db2-486e-9b94-4fdf658d531b. Click Property1 to enable the text box, and then type AlbumName.

    2. Click **Change property type **c4968582-0dae-407e-961b-80ffa2838f3b, and set Max word count to 2.

  7. To the right of Albums, do the following:

    1. Click **Add simple property **203a14a5-0db2-486e-9b94-4fdf658d531b. Click Property1 to enable the text box, and then type AlbumCover.

    2. Click **Change property type **c4968582-0dae-407e-961b-80ffa2838f3b. In the Type drop-down list, click Image.

    3. Optionally, in the Location box, click Browse and browse to an image folder.

  8. At the top of the Data panel, click List Mode.

  9. Drag Artists from the Data panel to the left side of the artboard, and drop it when the tooltip Create a [ListBox] and bind its ItemsSource property to Artist appears.

  10. At the top of the Data panel, click Details Mode.

  11. In the Tools panel, click Grid. Draw a Grid object in the middle of the artboard.

  12. Drag Artists from the Data panel to the Grid object that you just created, and drop it when the tooltip Data bind [Grid].d:DataContext to Artists[0] appears.

  13. At the top of the Data panel, click List Mode.

  14. Drag Albums from the Data panel onto the Grid object, and drop it when the tooltip Create a [ListBox] and bind its ItemsSource property to Albums appears.

  15. At the top of the Data panel, click Details Mode.

  16. Press and hold down Ctrl. In the Data panel, click AlbumCover and AlbumName. Drag AlbumCover and AlbumName onto the right side of the artboard and drop it when the tooltip Create Details View appears.

  17. Press F5 to build and then run the project.

Now, when you click an item in the first list, which is on the left, the second list will be updated. When you select an item in the second list, the details view will be updated.

See Also

Tasks

Create a list-details data binding