September 2013

Volume 28 Number 9

Windows Phone - Upgrading Windows Phone 7.1 Apps to Windows Phone 8

By Michael Crump | September 2013

While somedevelopers have upgraded their Windows Phone 7.1 projects to take advantage of the new features in Windows Phone 8, others have questions about what it takes to upgrade and what additional tooling and features they should use. In this article, I’ll show that going from Windows Phone 7.1 to Windows Phone 8 is easier than you might think. 

New Templates

Before looking at the templates, first ask yourself what real-world problems you’re going to solve by upgrading. Game developers, who primarily work with XNA, might want to switch to Direct3D because XNA is no longer actively being developed by Microsoft. You still have the option to create an XNA app, but it won’t take advantage of the new features in Windows Phone 8.

Also, native Web developers finally have a chance to get in on the action, as Internet Explorer 10 is preinstalled on the phone. But apart from game and Web development, Windows Phone 8 contains a plethora of new features for XAML/C# and Visual Basic developers.

Here are the new templates included in the Windows Phone 8 SDK:

• Windows Phone XAML and Direct3D App: This is a project for creating a Windows Phone managed app with native components. Upon first launch, you’ll notice that it comes with two projects: a Windows Phone 8 project and a Windows Runtime (WinRT) Component in C++.
• Windows Phone HTML5 App: This is a project for creating a Windows Phone app that primarily uses HTML content. This template is often confused with the Windows Library for JavaScript (WinJS) version of Windows Phone, which it is not. It’s simply using a WebBrowser control to display HTML5 content.
• Windows Phone Unit Test: This project contains unit tests that can be used to test Windows Phone apps. This template is added after you install the Visual Studio Update 2 RTM release. 

Upgrading Your Existing Project

Sure, the new project templates help new app development, but what about an existing XAML-based app already built with Windows Phone 7.1? The good news is that you can upgrade such apps to Windows Phone 8 by right-clicking the Windows Phone 7.1 project in Visual Studio 2012 and selecting Upgrade to Windows Phone 8. You’ll receive a prompt that cautions you that this upgrade can’t be undone and doesn’t update any referenced projects. You’ll want to make sure that your app is backed up before proceeding. You can also upgrade to Windows Phone 8 by selecting Project Properties, clicking on the Application page, selecting Windows Phone OS 8 from the dropdown list and saving your changes.

Also, if you still have a Windows Phone 7 project lying around, you’ll be prompted to upgrade it to Windows Phone 7.1 before you can upgrade it to Windows Phone 8. Again, I recommend you back up your project before proceeding.

After your app has been upgraded to Windows Phone 8, you can use the new tooling and SDK features. Now I’ll look at all the new emulator options found in Windows Phone 8.

New Emulator Options

In Windows Phone 7.1, you can deploy to only two emulator types with the target screen size of 480x800 (WVGA). The only difference in the emulator images is the amount of RAM (512MB or 256MB). Windows Phone 8 has added two new screen sizes: 768x1280 (WXGA) and 720x1280 (720p). You also have the option of downloading the Windows Phone SDK Update for Windows Phone 7.8 (found at bit.ly/10pauq4) to add additional emulators to test how your apps will run on Windows Phone 7.8 devices. Because the Windows Phone XAML and XNA app template targets Windows Phone OS 7.1, you can still test your app on a Windows Phone 8 emulator. You can see a list of all the old and new emulators available in Figure 1.

Figure 1 Emulator Options in Windows Phone 8

With the various emulators available, you no longer have to be dependent on having physical hardware to see your app running on the numerous Windows Phone 7 and 8 devices out there. The new Windows Phone 8 emulators are real virtual machines (VMs) and are one of the best improvements made to the SDK. 

Note: You’ll need Hyper-V, which is only in Windows 8 Pro or Enterprise, for the new emulators. For more details, see the Windows Phone Dev Center page, “System requirements for Windows Phone Emulator,” at bit.ly/QWhAA2.

Also, please keep in mind that with the powerful processors in modern PCs, you should test your app on a physical device before submitting it to the marketplace to gauge real-world performance.

Now that you’ve seen how the new templates can benefit different sets of developers, and looked at the new emulator options and how easy it is to upgrade your existing project to Windows Phone 8, it’s time to start tackling the other important issues that Windows Phone 7 developers have faced.

The Simulation Dashboard

When a Windows Phone app is running, a variety of things can interrupt the UX: slow response, having no Internet access, incoming call reminders, the app failing to restore its state after the phone has been locked, and more. In Windows Phone 7.1, you’d probably have to write code that simulated these situations; now you can handle them with the brand-new Simulation Dashboard, as shown in Figure 2.

Figure 2 The Simulation Dashboard Included in the Windows Phone 8 SDK

You can access this menu by selecting Tools | Simulation Dashboard from Visual Studio 2012. Using the Simulation Dashboard, you can test in advance of your app going to the marketplace just how well it will perform under different situations.

By enabling Network Simulation and selecting a network speed, you can test various cellular data networks as well as Wi-Fi or scenarios where no networks are available. Particularly interesting are the Signal Strength options, which affect the packet loss rate and network latency. With these options at your fingertips, you should be able to create a Windows Phone 8 app that performs well in a variety of scenarios.

Any app that targets Windows Phone 7.1 or 8 is deactivated once the lock screen has been enabled. It’s then activated again once the device has been unlocked. Inside of the Simulation Dashboard, you have the ability to easily lock or unlock the screen to test how your app handles activation or deactivation. You may optionally press the F12 key to show the lock screen.

Finally, you get to use “trigger reminders,” which will simulate an alarm, reminder, phone call, text message or toast notification. Again, you can use these to test how your app handles activation or deactivation.

Windows Phone App Analysis

While the Simulation Dashboard is helpful in providing real-world scenarios that might happen to a user once your app is running on his phone, it doesn’t help with the performance of your app. This is where you can make use of Windows Phone app analysis, which can be found at the Debug | Start Windows Phone Application Analysis menu.

This tool provides app monitoring, which helps evaluate the start time and responsiveness as well as profiling. This helps you evaluate either execution- or memory-­related issues in your app. The profiling execution option includes advanced settings that enable you to do things such as visual profiling and code sampling, while the memory options allow you to collect memory allocation stacks and object references. Both of these options will result in a graph displayed in Visual Studio 2012 as well as a time-stamped .sap file added to your project. With the generated graphs, you can drill down into specific start and stop times and see the observation summary that Visual Studio 2012 has generated. The Windows Phone Application Analysis tool is an integral part of your quality assurance process.

Store Test Kit

After you’ve tested your app under different user scenarios and tested app performance with the help of the Windows Phone Application Analysis kit, you need to test your app to make sure it’s certifiable in the Windows Phone Store. This is a vital step, as 30 minutes now can save you several days of lost time if the app fails something that would’ve been caught by using this kit.

The kit can be easily accessed by right-clicking on your app and selecting Open Store Test Kit. Windows Phone 7.1 also included this functionality, but it was called the Marketplace Test Kit. New and improved tests that target Windows Phone 8 have been added.

Upon first launch, you might see a message with a blue background at the bottom of your screen saying, “Store test cases have been updated. Would you like to install the updated test cases?” You can select Update and download new or modified tests. This is useful because you always know you’re working with the latest available tests.

At the left of your screen are three tabs: Application Details, Automated Tests and Manual Tests. Application Details makes sure the image resources adhere to the guidelines in the Windows Phone Store. This includes the Store Tile as well as the app screenshots for WVGA, WXGA and 720p if your project supports these resolutions. Automated Tests check for XAP package requirements, iconography and screenshots. All you need to do to invoke this feature is click on the Run Test button. The final tab contains manual tests; as of this writing, there are 61 manual tests you can perform. You have to manually indicate whether the test passed or not, but full documentation shows how to do so. Manual tests include those for multiple-device support, app closure, responsiveness and so on.

Localization Made Easy

With Windows Phone 7, there was a missed opportunity by many app developers in localizing their apps. This was often due to the fact that they had little or no help with translating from one language to another. The recent release of the Multilingual App Toolkit and new project templates solved this problem.

The default Windows Phone 8 template guides you through localization with built-in comments in the MainPage.xaml file, and it also structures your app with a helper class and Resources folder. Microsoft added the Multilingual App Toolkit that was originally in Windows 8. Once the Multilingual App Toolkit for Visual Studio 2012 (bit.ly/NgggGU) is installed, it’s as simple as selecting Tools | Enable Multilingual App Toolkit. After the toolkit has been enabled for your project, select Project | Add Translation Languages to see the languages available, as shown in Figure 3.

Figure 3 The Translation Languages Dialog Included with the Multilingual App Toolkit

You can filter on the language you want and then press the OK button. It will automatically add the proper language files to your Resources folder. One file in particular that you’ll want to pay attention to is the one with the .xlf extension. This is an industry-standard XML Localization Interchange File Format (XLIFF) file that gives you granular control over any pseudo-translation. Double-clicking on it will bring up the Multilingual Editor that will allow you to translate from one language to another by simply clicking the Translate button. You can see an example of this in Figure 4.

Figure 4 Translating from One Language to Another

In Figure 4, you can see that it automatically translated several words for me. Once a translation is complete, you can sign off or pass it on to a human translator for review. In this example, the only words that needed review were “MEINE TELERIK APP” because the word “Telerik” isn’t in the translation resource. The human translator would realize that Telerik is spelled the same way in German as it is in English, so it can be left as is. You can save this file to get added support for an additional language.

An easy way to test this is to change the Application Title in the MainPage.xaml with the following line:

<TextBlock Text="{Binding Path=LocalizedResources.ApplicationTitle,
  Source={StaticResource LocalizedStrings}}"
  Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>

Then set the phone language to whatever language you specified. In my example, I selected German, and the app title appeared as “MEINE TELERIK APP.” 

Taking Advantage of the Shared Core

With the release of Windows 8 came a shared core that Windows Phone 8 developers could use. Some of the more notable improvements in the Microsoft .NET Framework 4.5 are async and await support, as well as an easier way to use Isolated Storage.

In Windows Phone 7.1, you’d typically write the code shown in Figure 5 to write a file to Isolated Storage.

Figure 5 Writing a File to Isolated Storage in Windows Phone 7.1

private void WriteFileToIsolatedStorage(string fileName, 
  string fileContent)
{
  using (IsolatedStorageFile isolatedStorageFile =
    IsolatedStorageFile.GetUserStoreForApplication())
  {
    using (IsolatedStorageFileStream isolatedStorageFileStream =
      isolatedStorageFile.CreateFile(fileName))
    {
      using (StreamWriter streamWriter =
        new StreamWriter(isolatedStorageFileStream))
      {
        streamWriter.Write(fileContent);
      }
    }
  }
}

The code in Figure 5uses the System.IO.IsolatedStorage namespace, not found in Windows 8. Instead, both Windows 8 and Windows Phone 8 can make use of Windows.Storage and the async/await pattern to prevent performance bottlenecks and enhance the overall responsiveness of your app. Here’s an example of how to write the same exact call in Windows Phone 8, taking advantage of the shared core:

public async Task WriteFileToIsolatedStorage(
  string fileName, string fileContent)
{
  IStorageFolder applicationFolder = 
    ApplicationData.Current.LocalFolder;
  IStorageFile storageFile = await applicationFolder.CreateFileAsync(
    fileName, CreationCollisionOption.ReplaceExisting);
  using (Stream stream = await storageFile.OpenStreamForWriteAsync())
  {
    byte[] content = Encoding.UTF8.GetBytes(fileContent);
    await stream.WriteAsync(content, 0, content.Length);
  }
}

Another namespace heavily used in Windows 8 is HttpClient. Although the Windows Phone 8 SDK still uses the WebClient class by default, Microsoft has provided the HttpClient class through NuGet. If you simply search for “Microsoft.Net.Http” and install the NuGet package, you can write code such as the following snippet that will work in Windows 8 as well as Windows Phone 8:

private async void Button_Click(object sender, RoutedEventArgs e)
{
  var httpClient = new HttpClient();
  var request = await httpClient.GetAsync(new Uri(
    "https://www.microsoft.com/", UriKind.RelativeOrAbsolute));
  var txt = await request.Content.ReadAsStringAsync();
  // Do something with txt, such as MessageBox.Show(txt)
}

Crucial New Features

So far I’ve discussed a variety of ways to help make your transition to Windows Phone 8 easier. I’ll now take a look at several new features that your app can’t live without.

New Tile Types Windows Phone 7.1 has one tile type called the Flip Tile and one tile size, 173x173, otherwise known as the Medium Tile type. Windows Phone 8 introduces new tile types and sizes:

• Flip Tile: This is identical to Windows Phone 7.1 except for the new tile sizes; it flips from the front to the back.
• Iconic Tile: This is based largely on the Windows Phone design principles for a modern look.
• Cycle Tile: This lets you cycle through up to nine images.

A comparison of tile sizes can be found in Figure 6.

Figure 6 File Size Comparisons Between the Various Tile Types

Tiles can be easily configured through the WMAppManifest.xml file by selecting “Tile Template” and then adding the proper images. You might also set this through codebehind, and a “Flip Tile template for Windows Phone 8” can be found in the Dev Center at bit.ly/10pavKC.

Lock Screen and Notifications In Windows Phone 7.1, you could see only notifications such as mail, text messages and phone calls. Now your users have the ability to use your app as a lock screen background image provider and include custom notifications similar to those described earlier. Setting the background image can be as easy as adding an image to your folder with the content type and updating the app manifest file to declare your app as a background provider. Right-click on the WMAppManifest.xml file; choose “Open With” and select XML (Text) Editor; then add this extension:

<Extensions>
  <Extension ExtensionName="LockScreen_Background"
    ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />
</Extensions>

Next, call the code snippet shown in Figure 7.

Figure 7 Setting the Phone’s Lock Screen Background Image

private async void btnLockScreenImage_Click_1(
  object sender, RoutedEventArgs e)
{
  if (!LockScreenManager.IsProvidedByCurrentApplication)
  {
    await LockScreenManager.RequestAccessAsync();
  }
  if (LockScreenManager.IsProvidedByCurrentApplication)
  {
    Uri imageUri=new Uri(
      "ms-appx:///LockScreen.jpg", UriKind.RelativeOrAbsolute);
    Windows.Phone.System.UserProfile.LockScreen.SetImageUri(imageUri);
  }
}

You’ll notice that you begin by first checking to see if the user has access to change the background. If not, you’ll present a GUI asking for permission, then create a URI with the path to your image and use the Windows.Phone.System.UserProfile.LockScreen namespace to set it.

You can also add a notification to show an icon and a count—of messages, calls and so on—in the notification area on the Windows Phone 8 device. For more information on this, see the article, “Lock screen notifications for Windows Phone 8,” at bit.ly/QhyXyR.

Speech One of the most exciting new features is speech. Several speech components are included in the Windows Phone 8 SDK:

• Text-to-speech (also known as speech synthesis): This allows text to be spoken back to the user through the phone speaker, headphones or Bluetooth connection.
• Speech-to-text (also known as speech recognition): This allows your users to speak commands to a phone to accomplish tasks.
• Voice commands: These allow your users to speak commands outside of your app by holding down the start button and saying “open” or “start,” followed by your app name, to perform certain tasks.

All of this is made possible with the Speech.Synthesis and Speech.Recognition APIs. A simple implementation of text-to-speech can be accomplished with two lines of code in an event handler:

private async void Button_Click(object sender, RoutedEventArgs e)
{
  SpeechSynthesizer synth = new SpeechSynthesizer();
  await synth.SpeakTextAsync("The latest MSDN issue has arrived!");
}

Just make sure the async and await operators have been added to the method.

Make the Most out of Your Move

I’ve discussed everything from the new tooling and templates to some of the new features included in the Windows Phone 8 SDK. I’ve shown how easy it is to implement localization and described the added bonus of a shared code base with Windows 8. You should now be equipped with the knowledge to make the most out of your move from Windows Phone 7 to Windows Phone 8.

Michael Crump is a Microsoft MVP, INETA Champion and an author of several .NET Framework e-books. He works at Telerik with a focus on the XAML control suite. You can reach him on Twitter at twitter.com/mbcrump or keep up with his blog by visiting michaelcrump.net.

Thanks to the following technical experts for reviewing this article: Jeff Blankenburg (Microsoft) and Lance McCarthy (Telerik)
Jeff Blankenburg (Jeffrey.Blankenburg@microsoft.com) is a developer evangelist at Microsoft, co-author of the book, Migrating to Windows Phone (Apress, 2011), and organizer of several tech conferences.

Lance McCarthy is a Nokia ambassador and Telerik XAML Support Specialist