Tuesday, 15 July 2014

Creating,Customizing and Editing Sample Data in Expression Blend For Visual Studio 2013

Open Expression Blend and create blank windows phone(silverlight) app.
To use the sample data follow these steps:
Click on windows from the menu and select check Data which will show on the right side of your expression blend.

Sample Data in Expression Blend

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.

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, now the next options are related to the scope of your data samples. 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.

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. Now Click OK button to proceed.

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.

Click  add button in front of Collection section to add the properties.

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

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

You can edit your own sample data values as follows:
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.

You can add your own values in place of the sample data values and press OK button as shown :

sample values

Elements Scope in Expression Blend For Visual Studio

In Expression Blend our elements can have two types of scopes a project/Application Scope and a Document Scope. In easy words you can take the example of Local and Global variables in Object Oriented Programming in which local variables can be accessed in their specific class where as global variables can be accessed by any other class also. Same is the case here.
Difference between both scopes:-
Project Scope
The project scope can have the following features :
  1. Elements declared as project scope can be accessed from anywhere in your project.
  2. The project scope means that the element can be used in any procedure or subroutine in the program.
Document Scope
The document scope can have the following features:
  1. The project scope means that the element can only be used within the subroutine or program block they were declared in.
  2. You can not use the element with document scope in any other page.
So this was the difference between Project and Document Scope of your elements in expression blend, now there’s another thing in expression blend which you will find while using sample data, known as Enable sample data when application is running.
You can check this option while creating sample data. If you have checked this option it means you are going to use and display the sample data in your application or if you are going to use live data then simply unchecked this option.