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

No comments:

Post a Comment