Introduction to Sample Data - Page 1
       by 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 your application.

By the end of this tutorial, you will have created an application that uses Sample Data and looks similar to what you see below:

Get Microsoft Silverlight

[ a 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:

  1. Define the structure of your data.
  2. Populate a ListBox with data based on the structure you defined earlier.
  3. Modify your data.

Let's get started by defining the structure of your data first.

Defining the Structure of your Data
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 tab ]

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 values.

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

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 on the next page.

Onwards to the next page!


  12 | 3 | 4 | 5




SUPPORTERS:

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