Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Mobile / Windows-Phone-7

Expression Blend - Playing with Sample Data (WPF , Windows Phone)

5.00/5 (5 votes)
23 Jul 2014CPOL9 min read 21.5K  
Expression Blend - Playing with Sample Data (WPF , Windows Phone)

Most important thing in everybody's life is data. Everywhere you see you are seeking for some kind of data. More organized the data would be, more people would be attracted towards you. Lets change your context to development i.e. WPF, Windows Store and Windows Phone applications. Best applications in store are those in which the data is organized really effectively. A few questions come to developer's mind while designing and developing application.

  • How I would find data?
  • What if I don't have real data?
  • Should I wait till I find real data?
  • Is there any way to style and organize my lists before real data arrives?
  • Would my platform let me generate some data?
  • Would it be replaced to real (Live) data source as data arrives?

Well, I am here to answer all of your questions, if you are .NET developer and developing apps for Windows Phone , Windows Store and WPF. I would like to answer all you the questions above in a single word "YES".

The very next question that might come into your mind would be "HOW" ?
Expression Blend  will help us doing all this stuff easily in little time. Lets dig in that how we can

  • Generate Sample Data (Creating dummy contacts data)
  • Generate Sample Data from Class
  • Import Sample data from an XML file (Parsing Live RSS)
  • Modify Sample Data (Introducing Images to Sample Data)
  • Shifting to Live Data 
  • Reuse of Sample Data in other projects

the very article would be a good go through for all the stuff enlisted above.

Data Tab in Expression Blend

Expression Blend has a tab at its right most of the times with a label "Data". That is the very tab we would use for doing all our stuff. If you have that in your version of Expression Blend that is really fantastic but if unfortunately you don't have the very data tab in your version of Expression Blend you are left with two options,

  1. In Menu , go to Window and Check  "Data".
  2. If there is no option for "Data" you need to upgrade your version of Expression Blend

Generating Sample Data

It is really easy to generate the Sample Data in Expression Blend, You would be thinking how? Well there are many options to generate the data. Just go to the data tab and click over the database button. You would find different options there.

You would find different options there under the database icon in Expression Blend. You would find there Create Sample Data , Create Sample data from XML , Create Sample data from Class. We would discuss different options in detail.

Image 1

Note: Here Expression Blend will prompt you to set the scope of the sample data. Set it to project so that you may call the sample date created in other pages as well. If you create the scope to a particulate document it won't be access able from other pages.

So now we must dig in to create some sample data.

Creating new Sample data

So we are here and ready to discuss that how to create sample data. If you have jumped to this section of the blog I would suggest you to go back and take a look of previous things discussed if you are not familiar with expression blend. Here we would create some sample data and we would select the options of "Creating a new sample data".

Point to Ponder: Most of the times designers are not given real data that the would make the prototype on and they don't know about the real approach of data. They are known to simple the schema of data or you may call it meta data. By creating new sample data you would be able to generate some sample data on the very schema so that you may design it as if that was real data.

so first of all you create a sample data in the project. Here you would be having the data source in data tab of the name you created the very sample data.

Image 2

In our case it is phone book sample data. Remember you check that "Enable sample data when application is running" other wise the data wont be shown while the application is running.

As I click on "OK" the data source would appear in my data tab.

Image 3

so our data source has two properties here, "Property1" and "Property2" . If you want to add some new property you may add one my the very "+" sign in front of the collection. Now to make it appear on your application page. You just need to drag the collection and drop it over the page.

Image 4

so things worked fine and we have our sample data here on our application page. Now you see that the boolean type turned into the very checkbox where as the text field of string type turned into the text block.

We can design data of our own choice by changing the properties.

Blend Drill:  So here is one of the drill we can do, lets try to generate the sample date for the contacts. It has name , email id , contact number and etc. 

Hint: Just add properties and change it's type, things would work right.

Here we can change the type of data, we have a vast options of samples of data e.g. phone number , address, email id etc. One can use predefined ones to generate data of required type.

Image 5

You just need to click on the drop down of formate and you would find different options of type of data.

 

Here is sample data for Contact list created and on simple drag and drop over the page we get something like this,

Image 6

Here generated Item template can be changed and made a bit organized so these items give outlook of a contact. After you do very thing, contacts would look similar to this,

Image 7

Question: What if the date here needs changes? The phone number generated are not appropriate with respect to your relevant country. 

We have a solution for you, just look at the image below.

Image 8

The yellow highlighted option here is for changing the generated item's data. If you click over it you would find a panel similar to this were you can edit the generated item's data.

Image 9

Even you can increase of decrease the number of generated records, from the option at left bottom.

Tip: You can also add images as well from a selected folder or you may use Blend's generated pictures. You just need to set the collection's property to Image.

Creating Sample data form XML / Live XML source

Woahhh!, the most interesting part of the blog is here, generating data from a XML file or Live XML source. Till yet we generated sample data. We changes that very sample data. We introduced custom schema of data. We generated sample Phone Book that had contacts. Now it's time to do more interesting things. Most of use use XML files in their applications sometimes. It take a long code and time to parse a XML file. Expression Blend allow you to generate the data that the very XML file or Online source has.

for this you again need to create a sample data.

Image 10

But this time you need to Import Sample Data form XML, Why not do this process in Windows Phone?

Not a bad idea, as our topic covers both windows phone and WPF so lets parse XML data source in Windows Phone project. (Same rules and steps apply for WPF)

Here are the steps that you may follow to parse an online RSS feed and generate it's respective Sample Data.

  • Open Blend and create a new project.
  • Go to Data tab at right top.

Image 11

  • Go to Data tab and Click on Create Sample data tab
  • Click on Create Sample Data from XML.
  • You will see a dialog like this,

Image 12

  • Browse XML file you want to parse and click OK.
  • Now at right side in data tab you will see data and collection.

Image 13

  • Drag the collection and drop on windows phone interface.

Image 14

  • Change Item Template according to your need.
  • Your XML file is parsed.
  • By following these steps you can parse any time of XML file.
  • Saves time and gives quick result. 

Image 15

Note:  You can reimport the fresh data into your data source by simple steps, go over Data Source at right extreme you would find a drop down. After clicking that you may click on "Reimport XML data from data source" and things would work for you.

Original / Live data Arrives

A big question is always rotating in developers mind, that what would happen when I would test real data instead of sample data , does expression blend gives option to test the real data and on the runtime the sample data disappears?

The answer is "YES",  you can check or un-check the property of "Enable Sample data when application is running " to false as we discussed it above. as you un-check it the real or live data would appear in front of you while application is running in the very same format on which sample data was generated.

Re usability of Sample Data Generated:

You don't need to generate the sample data again and again once you have generated sample data for some purpose you need not to create same sample data in another project. You can simply import the generated sample data and save your time, how are going to do that?

Just you need to follow these steps,

  1. In the project to which you want to copy the sample data, create a new sample data source, giving it the same name as the data source that you want to copy.
  2. In the Projects panel, expand the SampleData folder, right-click the folder that contains the XAML and XSD files, and then click Add Existing Item.
  3. In the Add Existing Item dialog box, browse to the project folder from which you want to copy the data, expand the SampleData folder, browse to the data source folder that contains the XAML and XSD files that you want, select all the items (there might be a folder of images in addition to the XAML and XSD files, so select that also), and then click Open.
  4. In the Overwrite files dialog box, click Yes.
  5. When you see the message about a file being modified outside Expression Blend, click Yes.
  6. Save the project and close it.
  7. Open the project again. You will see the new schema in the Data panel.

Summary

In this article we started from beginning and learnt about what is sample data in Expression Blend how a developer can use the very sample data for developing real time applications in small time. How can you parse a XML file or online data source in no time. How can you generate sample data that you need and reuse it across different projects. Hope you find this article interesting.

See you guys next time , Happy Coding!

PERSONAL BLOG

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)