What you will learn 

If you want to become a good UI Designer then working with sample data must be known to you.Sample data is useful when you are designing the appearance of controls that will display live data that you might not have access to at design time.In this post you will learn how to add sample data and how to utilize it using Expression Blend.

What we will do

We will demonstrate sample data of a phone book in this article using expression blend. We will create a sample data and then we’ll look how to customize it.

As i have mentioned above that sample data is useful when you are designing the appearance of controls that will display live data that you might not have access to at design time. So now lets see how we can do it in Expression Blend.

Assumptions:

Before i proceed further, i’m assuming that you guys have created an Empty Windows Phone (Silverlight) project in expression blend.

To use the sample data follow these steps with me:

  1. Select Data window which is present at the right side of your expression blend. If it is not there go to Window -> select Data as shown below:
    Sample Data in Expression Blend
  2. Now click the add_sample_data_ico button to add sample data. From the drop down menu which will appear after clicking the button, select new sample data.
  3. Now another popup menu will be appear which will ask you for certain information as shown below :
    new sample data
    Type the name of your sample data in Data source name field as shown above, in my case i’m naming it as PhoneBook. Now the next options are related to the scope of your data samples (Read the Scope of elements in detail here). Now there are two kinds of scope :
    Project Scope : Project scope will declare your sample data as global data for the entire application which can be access through any page and from anywhere in that project.
    Document (This Document Scope) : The sample data declared as “This Document” is local or we can say that it is accessed by that specific page in which we are declaring it. Unlike Project scope it can not be accessed through any other page.In our case we will select Project Scope and the next option as you can see in the figure is “Enable sample data when application is running”. If this option is selected it means you are going to use and display that sample data in your application at run-time. (You can read it in detail here). Now Click OK button to proceed.
  4. Now you will see a sample data is created in your Data window  with Two properties in Collection Section. Just delete them by right-click -> Remove property option and now its the time to add your own required properties.
  5. Click  add button in front of Collection section to add the properties as shown below :
    Sample Data preview
  6. Now click on the Collection Section and Drag it to your design view and just drop it. You will see a sample data on your Phone.  As shown in the figure below:
    Note: If the sample data doesn’t appears then add grid control tags in your application as <Grid></Grid> and then just drop the collection section in this grid.

SAMPLE DATA PREVIEW
So this was how we can work around with sample Data in expression blend. Now the next thing is how we can customize this sample data.

Customizing Sample Data in Expression Blend

Now we know how to add sample data therefore the next very important thing is how to customize this sample data and how to apply styles on it:

  1. Select the Collection which you have just drag & drop into your application and do right click ->Add additional Templates ->Edit Generated Items->Edit Current as shown below:
    Editing Styles
  2. Now you can select items individually and apply the styles like change color , font size, color etc of each item according to your needs a sample have been shown below:
    sample

Adding Sample data values

Now as a designer you will need some sample data values to demonstrate the application design and model properly, so how you can do is very simple just follow these steps:

  1. Open the Data Window again and click on Edit Sample Values button  edit sample values , now a new window will appear with some sample values according to the need and press OK button as shown below :
    sample values

So this was how we can play with sample data in Expression Blend. If you find any difficulty or problem please don’t hesitate to contact me.

Download the Sample Project