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!

 

 

 

Get It In The Store

UPDATE:
This event is sold-out! If you were not able to register in time and need help getting your app published, send me an email and I’ll help you directly.

WPDev Day

Me and several other experts will be spending 6 hours with you on Saturday February 1st, 2014 to help you over come any obstacles that is preventing you from publishing an app. If you do not have any apps in the works, then come and build an App Studio app with our help. Click the Eventbrite button above to get your ticket.

Important: This is a very limited seating event and is intended for the Northeast United States, please do not register if you are 6000 miles away or do not intend on showing up, you’ll only be taking a seat away from another dev who needs it.

Here is the preliminary schedule (subject to tweaking):

  • 12 PM DevCenter Submission Walkthrough (30 minutes): See just how easy it is to submit and publish an app worldwide
  • 12:30 PM Build an app in 30 minutes with App Studio (30 minutes): See how to build an app from an idea to publishable in 30 minutes, literally.
  • 1 PM – 1:30 PM Lunch: I’ll be providing food and snacks. This is when you think about what you need help with or when you should think of your app idea for App Studio.
  • 1:30-6 PM Hands-on time: The experts will be available to help during this time. They will be walking around helping and/or attending to requests for help.

By the end of the day I fully expect everyone’s apps will be ready and submitted to DevCenter and on it’s way to the global app marketplace.

What will you need to bring?

  • If you need help on an existing app, bring your laptop dev environment with your app on it.
  • If you want to build an app without any code, bring a laptop that has a modern browser (IE10-11, Chrome). You’ll only need your browser to build and submit the app to the store. If you do not have a Windows Phone, the experts will be able to help you test the app on their phone

Giveaways

Everyone who attends and publishes their app will be entered to win a “hero” Nokia Lumia (1020, 928, 925, 920, etc) of their choice. I’ll be saving some swag/prize surprises for the day of the event. Also, Microsoft will be bringing some prizes of their own! I will update this post with more details as we get closer to Feb 1st.

Note: If you accept a prize from me, you agree to these terms.