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:
[ a simple master-detail
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
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:
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.
This XAML corresponds to what you see in the Objects and
Timeline panel (minus the drop shadow effect...which is still
[ 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
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
If you want to see how what my version of this example looks
like, feel free to download the final source files from below: