Windows Phone 8.1 for Developers–The new Visual Studio Experience

This blog post is part of a series about how Windows Phone 8.1 affects developers. This blog post details how Visual Studio has been changed to enable you to write Universal apps and is written by Peter Bryntesson (@petbry57)

Introduction

With the release of Windows Phone 8.1, Visual Studio has introduced a new concept called Universal apps. A Universal app is a special kind of solution that targets both Windows 8.1 and Windows Phone 8.1. We will walk through the construction of such an app and show how it looks in Visual Studio.

File – New Project

Let’s start by issuing a File – New Project. We will do this in the context of C# for the purpose of this blog, but similar options are available for VB, C++ and HTML/Javascript as well. Navigating down the tree and select the Universal Apps section we will have the following templates to choose from:

This will create a new solution with both a Windows Phone and a Windows 8.1 app, both targeting the Windows Runtime and not Windows Phone Silverlight. It will also create a UnivApp.Shared Folder where we put everything we want to share between the two projects. This could really be anything. This is conceptually very similar to add files as links, but much cleaner and automated. When Project has opened, the Solution Explorer looks something like this:

As you can see here, currently only App.xaml (and App.xaml.cs) is shared, but we can easily share much more. As a side note, sharing App.xaml really shows how we are reusing the exact same application model! Personally I think this is supercool. As you can see there is a separate MainPage.xaml in each of the projects. That makes sense, since we are targeting very different kind of devices. However, it’s entirely possible to share xaml pages if you want to. In fact, let’s try it out with MainPage.xaml.

Moving to Shared

Analyzing both MainPage.xaml and MainPage.xaml.cs, the only difference is that in the constructor in the Windows Phone version, the template has added the following call:

this.NavigationCacheMode = NavigationCacheMode.Required;

So when moving this file to shared, we need to make sure that this call is only done in the Windows Phone version. But that’s what we have #if’s for. Predefined constants in the projects

• Windows – WINDOWS_APP
• Windows Phone – WINDOWS_PHONE_APP

By moving the files and adding the #if, we get the following layout for the solution:

So now the device specific projects has no code or XAML pages, only device specific Visual assets and project metadata. In a real-World Project I would assume that the Visual design differs and the xaml pages will be kept in two versions, one for each device. But Everything else can be shared very easily.

Additional notes

Since WinRT between the platforms are very similar but not exactly the same, Intellisense needs help from us. Opening a code file, we now have an easy way to indicate to Intellisense which platform we are currently working on. Just select from the left-most combo box above the code as per below:

Also, looking into the Package.appxmanifest (Yes, the Windows Phone version also has this and no WMAppmainfest.xml anymore) we can see that the two projects share the same Package Family Name. This will tell the stores that the two apps belong together and should be treated as a single app.

Summary

It has never been easier to write apps that targets both Windows 8.1 and Windows Phone 8.1. And now the new features in Visual Studio really gives a great tool to productively do this, without changing the overall experience that we are used to. Great Work, Visual Studio team!