Creating Design-Time Sample Data

One of the best things you can have when developing a Windows Phone app is design-time sample data. I will show you in this post how to create sample data from a class using Blend. (click images to view larger)

You can apply this technique to an existing class you have, but for the purposes of this tutorial I’ll be using a File > New Visual Studio 2013 Windows Phone project.  If you have an existing app, you can skip to Step 3, but I recommend skimming the first two.

Step One – Create a new Windows Phone Project

  1. Open Visual Studio, go to File and choose New.
  2. Choose the “Windows Phone DataBound App” template
  3. Name it and click OK

ImageOne

The reason I went with the databound template is because it has a ready-to-go ViewModel that I can use to demonstrate the process.

Step Two – Finish up in Visual Studio

Delete the template’s sample data

The template comes with sample data, but I’m going to delete it so we can start from scratch. Here are the steps:

1) Expand the SampleData folder and delete the file named MainViewModelSampleData.xaml

ImageTwo

Add a new property to ItemViewModel

1) Expand the ViewModels folder and open the file ItemViewModel.cs

2) Add the DateTime property named “Date” you see in the image below to ItemViewModel

ImageThree

Change the List’s ItemTemplate to display the new property

1) Open MainPage.xaml

2) Locate the LongListSelector named MainLongListSelector (on line 51)

3) Add the following TextBlock to the LongListSelector’s ItemTemplate  (see image)

<TextBlock Text="{Binding Date}" Style="{StaticResource PhoneTextAccentStyle}"/>

ImageFour

4) Rebuild the project (VS Menu bar > Build > Rebuild project)

Step Three: Generate Sample Data

Right click on MainPage.xaml in the Solution Explorer and select Open in Blend

ImageFive

Blend is an amazing tool, if you’re not using it then you’re missing out on things like animations and fine UI tweaks. It’s much easier to make your app “pixel perfect” using Blend than it is with Visual Studio.

Now that your project is open in Blend, we can create sample data with just a few clicks.

1) Open the Data tab behind the properties pane on the right

ImageSix

2) Click the Create Sample Data dropdown

ImageSeven

3) Select Create Sample Data From Class

ImageEight

4) Select MainViewModel and name it “MainViewModelSampleData” (it should prepopulate the name for you, but if it doesn’t, type it in) then click Ok to generate the sample data.

ImageNine

5) Expand the newly formed sample data in the Data tab, and notice how it created sample data for each of the objects in your MainViewModel.

Another really cool thing about Blend is that you can tweak the type of sample data is being used. Go ahead and drop down the “abc” button next to a string property. You’ll see options to edit Lorem Ipsum, use a Company Name, personal Name, email, Price, and more.

ImageTen

Now let’s see the result!

Now everything is in place, go ahead and rebuild the project. In Blend, it’s “Project > Rebuild Project”.

This is what you should now see:

ImageEleven

Summary

By generating sample data for design time, you will be able to properly design your UI and get that Pixel Perfect feel that a professionally designed app exudes.

Now go forth and multiply your awesomeness!

Lance

ProTip: You can drag and drop the sample data onto a UI element and Blend will automatically create the binding for you.

Advertisements

3 thoughts on “Creating Design-Time Sample Data

  1. […] /* 0) { ratingctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating = result['Rating']; SetCurrentRating('ctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating_pnlHolder', result['Rating'], "disabled fullStar", "disabled emptyStar", true); if(votesCountctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating!=null) { votesCountctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating ++; SetVotesCount('ctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating_lblUsersRated', '(' + votesCountctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating + ' votes)'); } SetRatingCookie('r', 'i35283', '1'); } else if (result['Status'] == 1) { alert('The session has expired. Please refresh the page to be able to vote!'); } } /* ]]> */ (0 votes) 0 comments   /   posted by Silverlight Show on Mar 19, 2014 Tags:   windows-phone , wpdev , windows-8 , win8dev , lance-mccarthy Read original post by Lance McCarthy at Boston Nokia Developer Blog […]

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s