kirupa | 3 May 2010
Many applications you see involve data. A large
part of what you, as a designer, end up having to do
is style the data and make it look nice. That is
fairly straightforward if you have access to your
data when designing your application. Reality is a
harsh friend - an enemy, if you will.
In most scenarios, the data you are working with
is something that you only may have access to when
your application is being run. If you are inside
Expression Blend and wish to style the data that
your appllication will eventually have, you would
pretty much be out of luck unless you did some
pretty unmaintainable things.
Fortunately, one of the features introduced in
Expression Blend to solve this problem involves what
is known as sample data. Sample
data allows you to quickly generate data at design
time (and run time even!) that you can fiddle with
and style as you wish while designing the rest of
By the end of this tutorial, you will have
created an application that uses Sample Data and
looks similar to what you see below:
simple ListBox that contains some sample data ]
All of the items you see in the listbox above
were created automatically. The work I had to do was
tell the Sample Data functionality what my data
structure needed to look like. The rest of the time
was spent trying to make the data look awesome.
There are three parts to what you need to do:
- Define the structure of your data.
- Populate a ListBox with data based on the
structure you defined earlier.
- Modify your data.
Let's get started by defining the structure of
your data first.
The first thing we are going to
do is define the structure of your data. Go ahead
and create a new project in Expression Blend. It
doesn't matter whether the project you are trying to
create is Silverlight, WPF, or Windows Phone.
Everything you will read here in this tutorial will
work on all three project types.
Once you have created a new project, click on the
Data tab that is normally found in the top-right corner
of your application:
[ bring up the Data panel by clicking on the Data
After the click, your Data panel should now be displayed. From
this panel, you can create and modify all things related
to any sample data that you create. Let's first
create a data source that will house our sample data
Click on the Sample Data icon and select New
Sample Data from the menu that appears:
[ what we want to do is create new sample data ]
Very shortly after you select New Sample Data,
the New Sample Data dialog will appear. Just accept
the default values that have been provided for you
and select OK to create the data source for our sample
The end result will be this nested list of
stuff that now appears:
[ your sample data has been defined ]
This nested list, what I call stuff,
actually defines the nature of the sample data that
you are going to be creating. I'll explain more on
that later, but just know that, at this point,
you've successfully created the structure for your
sample data. The next step is to actually put this
data structure to actual use, and that will be done
Onwards to the