in App Studio

Bring your App Studio apps to Windows 8

Windows Phone App Studio Beta is awesome. It’s a great way to build your first app for Windows Phone. It lets you choose different design templates and styles, and lets you pull in different data sources, from RSS feeds, to YouTube, to Flicker or even Bing. In this post, we’ll talk about how to take an app that you created in App Studio go further by making it work on Windows 8 using the latest update to Windows Phone App Studio.

winphone copy

New features in App Studio

Just last week, the team announced an updated version of App Studio. Emilio, over at the Windows Phone Developer blog has a great blog post on the New UI and capabilities for Windows Phone App Stuido Beta developers.

The update is fairly comprehensive:

  1. A touch-enabled UI
  2. Rebuilt emulator
  3. Auto-image conversion
  4. Improved performance
  5. Improved generated source code
  6. Ability to generate a Windows Phone and Windows 8 solution

Hold the phone, it generates a Windows 8 solution?

Yeah, it’s great. The latest version actually exports cleanly-architected, full Visual Studio solution with a shared data model, and platform-specific view models and views. You essentially end up with a great launching point for a cross-platform app.

It doesn’t go as far as exporting the Windows Store upload package, so you still need to make some edits in Visual Studio, but it gets you most of the way there.

Building your first App Studio app

Before you can bring your app to Windows 8, you need to first build it for Windows Phone. There are tons of great tutorials online on how to create your first app using App Studio. My favorite is Christine Matheney’s tutorial, Build a Windows Phone app before lunch!

I went ahead and created a simple app for Olympics fans.

image

Generate and download your Source Code Package

Once you’ve designed and built your Windows Phone App Studio app, just go ahead and click the “Generate” button from the Finish step.

image

Even if you’ve already generated your app with the previous version of App Studio, you’ll need to do this again, in order to get the Windows 8 source project.

image

You’ll get this new dialog that let’s you choose the Windows Phone 8.0 and Windows 8.1 Visual Studio solution.

image

A few seconds later you’ll be ready to download. Rather than downloading the app to your phone, or Windows Phone publish package, you’re going to want to download the source code.

image

Just go ahead and download, extract and open up that folder and browse it’s contents. You’ll see the different shared libraries, and the source for both Windows 8 and Windows Phone.

image

Configure the solution

image

This next step requires Windows 8.1 and Visual Studio Pro or higher, so you can open a solution that includes both Windows 8 and Windows Phone projects. Anyone with a student DreamSpark Premium or startup BizSpark account should have access to it. In the solution, you should see both the Phone projects and the Windows 8.1 projects. After you open the solution, it only needs a little bit of configuration to get it working. You just need to load in the dependencies, set the startup project and load in your app logos.

Restore NuGet Packages

The App Studio generated code has some dependencies on some public libraries. You need to make sure these are loaded properly. It’s super simple to do this, just right click on the AppStudio.Store.UI solution, and select Manage NuGet Packages…

image

In the dialog that pops, there is a gold bar at the top that says, “Some NuGet packages are missing from this solution.” Go ahead and click the restore button, to load all the dependencies.

image

Set the startup project

The last you thing you need to do before you run it, is right-click on the AppStudio.Store.UI solution, and choose Set as Startup Project. This will make the Windows 8 project run, instead of the Windows Phone project.

image

Run your Windows 8 app

Hit F5, and watch your Windows 8 app run. All of the same functionality from your Windows Phone app is available, with the same styles, just adapted for the larger screen.

simulator

Getting ready for publishing

Before you can publish your app to the Windows Store, you’ll need to make a few more changes to get ready for primetime.

Update your application manifest

Screenshot (94)

Windows 8 has different tile sizes and splash screen sizes so you’ll need to create new images for Windows 8. To update the images, just open the package.appxmanifest file in the the Windows 8 project. If you’re going to design a logo for your app, see my other post on How to make an app logo that doesn’t suck for some tips.

Don’t forget about privacy policy

The generated Windows 8, app currently doesn’t have a privacy policy added by default. All Windows 8 apps that access the internet need a privacy policy to be accepted and published to the Windows Store. ExpressionBlend.com has a great tutorial and source code for adding this.

What’s next: The sky is the limit

Even though the app is ready for publishing, don’t stop there. How can you edit the code to make this app even more useful, desirable, and potentially profitable?

A few ideas:

  1. Add more custom behaviors, or views
  2. Support push notifications with Windows Azure
  3. Style the design in Blend
  4. Add the in-app advertising control

In conclusion, go bring all of your Windows Phone App Studio apps to Windows 8. Based upon the improvements that we’ve seen App Studio make so far, I would expect that App Studio will continue to evolve!

win8app copy

Write a Comment

Comment

  1. I exported a few of my apps (made with current and previous versions) which work fine on my WP phone. When I debug the app on my W8.1 machine it displays the basic layout. BUT after clicking / tapping an item in a collection (where on the phone the app would show a detailed page – panorama with image, description…) debugger breaks (“Cannot find a Resource with the Name/Key MultilineConverter”).

    Any ideas?