Creating a Master-Detail UI in Blend
       by kirupa  |  14 June 2010

A lot of data visualization involves taking data and filtering it down to only the data that is more important to you. These don't have to always involve clever infographics or charts however. Here is a simple, mundane example:

Get Microsoft Silverlight

[ a simple master-detail example ]

In the above example, scroll through the list of items on the right and select something. Notice that, as you select an item from your list, a larger/detailed version of just the image from your selected item gets displayed.

What you have just seen has a name, and that name is master-detail. In a master-detail setup, the master is your original (often unfiltered) data. The detail provides specific data about a subset of what you've chosen from your master collection of data.

In our example above, the master is the list of items containing a thumbnail-sized image, title, and a price. The detail is a larger version of the image that was selected from the master list. In this tutorial, you will learn how to create your own master-detail setup using Expression Blend.

Getting Started
This tutorial is in many ways an extension to the Introduction to Sample Data tutorial, so instead of having you spend time rehashing something you should already be familiar with, here is a starter project instead:

Download Started Project

Don't worry, this sample project only contains a sample data source with a few other UI-related modifications. You'll create the master-detail relationship yourself.

Once you have downloaded the started project, extracted the files, and opened the solution in Expression Blend, you will see something that looks as follows on your artboard:

[ what your artboard looks like right now ]

Digging a bit deeper on what you see, what you have is nothing more than a listbox whose data source is something generated through our sample data functionality. I am sure this is a pretty boring review, but the next section will hopefully change that by showing you some new things.

Creating the Master-Detail Relationship
To specify a master-detail relationship, go to your Data panel and enter Details mode. You can access this mode by clicking on the Details mode button:

[ click on the Details mode button to go into...Details mode ]

You may imagine that clicking that button and entering Details mode would result in some impressive visual changes and possibly some trumpets blaring through your speakers. Alas, nothing impressive will be seen immediately outside of a very subtle icon change in your Data panel.

What is impressive is what happens when you try to interact with your data in the Data panel. What we want to do is display our picture in a more detailed fashion.

To do that, simply drag the Picture node from your Data panel and into your artboard:

[ while in Details mode, drag your Picture node into your artboard ]

Notice that your mouse cursor displays the tooltip "Create Details View" as you are dragging. Go ahead and release the drag in the empty area on the left side of your application:

[ what you should see after you drop your Picture node ]

When you drop the Picture node, you will see a slightly larger version of your image displayed. Feel free to adjust and tweak how the image looks, because all that really gets added is a Grid with the Image control:

[ what your detail actually is ]

Here is what my artboard looks after making changing the size/position and giving it a totally sweet drop shadow:

[ make some visual tweaks as you wish ]

That's all there is to creating a master-detail relationship in Expression Blend by using the Sample Data feature. If you run your application, try clicking on an item to see a detailed version of the picture displayed.

Behind the Scenes
To create all of this, while you only had to click a button and drag/drop the property you are interested in onto your artboard, there are some interesting things that go on under the hood. Let's look at the condensed XAML for this.

<Grid DataContext="{Binding Source={StaticResource GalleryData}}">
   <ListBox x:Name=listBox ItemsSource="{Binding Collection}"/>
   <Grid DataContext="{Binding SelectedItem, ElementName=listBox}">
      <Image Source="{Binding Picture}"/>
   </Grid>
</Grid>

This XAML corresponds to what you see in the Objects and Timeline panel (minus the drop shadow effect...which is still totally sweet):

[ what the above XAML corresponds to ]

Notice that your parent grid has its DataContext set to your GalleryData data source that you see in your Data panel. This sets everything up so that all of this Grid's children will inherit this DataContext. In other words, the dark shadow of the GalleryData will ominously tower over every child this Grid contains, and the advantage of this is that all of GalleryData's properties are easily accessible.

That explains why your ListBox (called listBox in our code) is able to get away with settings its ItemsSource to simply the Collection property. Because this ListBox is a child of the above Grid, it is inferred that the Collection property lives in your GalleryData. Now that we've covered how our ListBox (aka the master) displays all of the sample data, let's look at the detail next.

The detail, our Grid/Image combo, is contained in the following XAML:

<Grid DataContext="{Binding Source={StaticResource GalleryData}}">
   <ListBox x:Name=listBox ItemsSource="{Binding Collection}"/>
   <Grid DataContext="{Binding SelectedItem, ElementName=listBox}">
      <Image Source="{Binding Picture}"/>
   </Grid>
</Grid>

Just like before, our Grid specifies a DataContext, but this DataContext is a bit more specific. You are binding to the SelectedItem property that lives on an element whose name is listBox. Note that I mentioned earlier that all children under our root Grid element will inherit the data context it defined. That is still true, and your DataContext is simply getting enhanced here.

The Image element, the child of the above Grid, specifies a Binding whose property is just Picture. This binding maps to the data returned by your binding to the SelectedItem property. Together, these two DataContexts help tie together the different views of the same data your master and the detail generate.

Conclusion
As you can see, especially if you read the last section, Expression Blend makes it very easy for you to have a master-detail setup working without really having to understand data contexts or other complicated details.

If you want to see how what my version of this example looks like, feel free to download the final source files from below:

Download Final Project

Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!

When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.

Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.

COMMENTS




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.