App Studio – Design-Time Sample Data

If you’re like me, you like to fiddle and tweak things to get just the right result. Recently, Microsoft has really beefed up App Studio apps and if you explore the downloaded source code you’ll see a new Universal app structure leveraging MVVM. Let’s start with the before and after photo (click any image to view larger):

The image on the left is the UI before changes and the one on the right is afterwards
Before and after changes to the items lists

Here is a screenshot of the App Studio solution structure in the Visual Studio Solution Explorer (since AppStudio.Data is a Portable Class Library, you’ll need Visual Studio 2013 Pro [Update 2] or higher. See Tim’s answer for a workaround):

Blog1

So, you’ve got yourself an App Studio app and want to make custom changes, this can be challenging because you won’t see anything in the designer because the data is not generated until runtime.  You’ll have to make educated guesses by using margins of the UI elements.  We can make this much easier this by creating design-time sample data.

This blog post is a tutorial on how to do just that. Keep in mind that even though I have the YouTube schema through out the app, it should work the same regardless of your app’s structure. Let’s get started…

Step One – Download and open the source code in Visual Studio 2013

You can find the source code’s download link on the same page you downloaded the publish package. By default, it is collapsed, just expand the “Source Code” section and click the “Download 8.1 Source Code” link. It is a zipped folder, unblock and then extract it. Once the app is open in Visual Studio 2013, Build (F6) the solution so that the nuget packages are retrieved and added.

Step Two – Generate Sample Data

Now let’s open the project in Blend for Visual Studio (Pro Tip: right-click on AppStudio.WindowsPhone/Views/MainPage.xaml and select “Open in Blend“) so that we can generate sample data for MainViewModel.

  • 0 – Prerequisite: See my blog post here and review Step 3
  • 1 – Open MainPage.xaml located inside AppStudio.WindowsPhone/Views in Blend. Note: Click “Cancel” when Blend asks if you want to set a Resource Dictionary for design-time. (FYI – these steps are the same for AppStudio.Windows project, which you can do after completing this Windows Phone tutorial).
  • 2 – Now create sample data for MainViewModel (Step 3 in my tutorial will show you how to do this) and “Save All” when it’s done.
  • 3 – While the Data tab still open, click the “Set design-time DataContext” link at the bottom, make sure “MainViewModelSampleData.xaml” is highlighted and then click OK. See the screenshot below. ( Alternatively, you can simply add this line to the top of your MainPage.xaml with the xmlns declarations: d:DataContext=”{d:DesignData /SampleData/MainViewModelSampleData.xaml}” )
Click to enlarge
Set Design-Time DataContext

Blog3

Now your MainPage’s design-time DataContext is set to the sample data. Next, we’ll edit the sample data with some image paths so that you can see an images in the designer.

Step Three – Images

One downside to automatically generated sample data is that sometimes you want a path to an image instead of Lorem Ipsum. This is very easy fix that makes life much easier in the designer because Image controls bound to that sample data’s property will show an image, here are the steps:

  • 1 – Add an image to your project (note: I created a “PlaylistIcon160.png” image and added it to the project’s Assets folder).
  • 2 – Open the sample data file, MainViewModelSampleData.xaml (you’ll find it under AppStudio.WindowsPhone/SampleData/, also you’ll want to change your tool window to the XAML-only view because you cannot edit sample data with the designer-only window ).
  • 3 – Find the places in your sample data that are for image paths and replace the lorem text with the image path. For example in my sample data, I have the YouTube schema, which has a property named “ImageUrl” in the Items list, I changed the sample text to the placeholder image’s path. Here is a screenshot of where you’ll find the ImageUrl property and my edit to it:

Blog4

  • 4 – I did this for every ImageUrl property in each of my project’s models in the sample data. This is the most lengthy process of getting the sample data ready, but it’s really worth it to have images visible.
  • 5 – Once all items have been edited, do a Build (F6).

Step Four – Setting d:DataContext

Now we need to set the design data context of your view items to point to the sample data. We already did this at the page level in step two, but we’ll need to set it for each HubItem to display the lists. Here are the steps:

  • 1 – Go back to MainPage.xaml and go to a split view (XAML and designer visible).
  • 2 – Scroll down until you see the <Hub> control. You’ll see a number of “HubSections”. Here is what you should see now:

Blog5

Now, add a d:DataContext=”{Binding ModelNameHere}” to each HubSection. You will find the names in the MainViewModelSampleData tree. In my demo, there are 5 HubSections, each has it’s own model. (App Studio models are outside the scope of this article, but you can read more here on the App Studio website).

This screenshot explains it more clearly:

Blog6

That’s it! You should now be seeing your images and sample data in the designer.

Step 5 – Editing DataTemplates

This is the same process as you do for editing any Template. I wanted to quickly cover it to round out this tutorial. I wanted to get rid of the extra space between items in the list because I don’t have the summary text. Here is what I did:

  • 1 – In the Objects And Timeline pane, expand the Hub control and right click on a HubSection
  • 2 – Select “Edit HubSection“. The Objects and Timeline focus will shift to the DataTemplate of that hub section.

Now let’s edit the ItemTemplate of the ListView that shows the list items:

  1. Right click on ListView
  2. Expand “Edit Additional Templates
  3. Expand “Edit Generated Items (Item Template)
  4. Select “Edit Current

You can now edit the template, I removed the second Grid.Row declaration because it wasn’t being used. I got back 60 pixels on unneeded padding, but remember empty space is just as important as content. So, I added a 12 px margin to the bottom of the Image control. This now allows more items to appear on the smaller phone form factor.

Conclusion

With a little sample data and some independent flavoring, you can customize your App Studio app to give it a truly unique feel. You can see the results of having design-time data right now, here is the app I used in this demo, enjoy!

Here is the Windows Phone version of the customized app

Here is the Windows version of the customized app

Now, go forth and design away!

 

 

 

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.