5 Ways of Upgrading Your Windows Phone 7.x App to Windows Phone 8

2. 5 Ways of Upgrading Your Windows Phone 7.x App to Windows Phone 8 Andy Wigley Microsoft UK

3. 5 Easy Upgrades Lock Screen Notifications and Background Image Supporting WVGA, WXGA and 720p screen resolutions Supporting WP8 Tile Formats Speech Commands NFC Tap-to-Share

4. Tiles on Windows Phone 8

5. Live Tiles 101 • Shortcuts to apps • All apps have at least one tile: the default tile • Created by user pinning your app to the Start Screen • Launches to app main page • Apps can create secondary tiles • Tiles can be updated • Application code • Background agents • Push Notifications • In Windows Phone 7.1, only one tile size for third party apps • In Windows Phone 8.0, you can support three different tile sizes

6. Tile Templates and Tile Sizes Windows Phone 8 supports three Tile templates Flip – flips from front to back (similar to the WP 7.1 Tile template) Iconic – clean iconic layout designed to reflect Windows Phone design principles Cycle – cycles through up to nine images 6

7. Tile Content The Tile content is built up from a fixed set of data properties Data Properties for Text elements, Count elements and Image elements Content that displays depends on the template you choose and the tile size Not all elements need to be used WXGA resolution Image sizes Automatically scaled for WVGA and 720p 7

8. Flip Tile Template Flips from front to back Small size does not flip Medium size is the same as the WP7.1 tile template

9. Cycle Tile Template Cycles between from 1 to 9 images Small tile does not cycle

10. Iconic Tile Template Displays a small image in the center of the Tile Designed to reflect Windows Phone design principles

11. Primary and Secondary Tiles Application Tile Can be created only when user taps and holds the application name in the Application List and then selects pin to start Tile template and Properties are set initially in the Application Manifest Template cannot be changed programmatically Secondary Tile Can be created only as the result of user input in an application The application then uses the Create(Uri, ShellTileData) method to create a Tile on Start Because the UI will navigate to Start when a new secondary Tile is created, only one secondary Tile can be created at a time

12. Supporting enhanced tiles on Windows Phone 7.8 and 8.0

13. Option 1: Do Not Upgrade A Windows Phone OS 7.1 app that runs on 7.8 and 8.0 phones can use the following WP8 Tile features: For the default Tile, the Flip Tile is the only supported template. For secondary Tiles, all Windows Phone 8 Tile templates are supported: Flip, Iconic and Cyclic. Independently update the small and medium Tile sizes. You can also optionally support the wide Tile size. You can use reflection to ‘light up’ your WP7.1 apps with some WP8 features: Tiles In App Purchase New Maps launchers Use Mangopollo library (on NuGet) to do this easily!

14. Option 2: Upgrade to Windows Phone 8 • In File Explorer, create a copy of the Windows Phone OS 7.1 project in the same solution folder • Rename the new project’s folder and project file to projectname80 (for example) • In Solution Explorer, add the copied project to the solution • In Solution Explorer, right-click on the copied project and select Upgrade to Windows Phone 8.0 • In the Windows Phone 8 project, use ‘Add as Link’ to link the files in the Windows Phone OS 7.1 project that you want to share between projects • Implement new functionality in files unique to the WP8 project • Define a ‘#WP8’ compile time directive • Use to conditionally include WP8 functionality in shared files

15. Defining the Application Tile The standard new V8 project templates already contain placeholder images of the correct size • FlipCycleTile*.png used for the Flip and Cycle Tile templates • IconicTile*.png used for the Iconic Tile templates Copy the Assets folder from a V8 project into your upgraded project Replace the images with your own artwork

16. Edit the Application Manifest Double-click WMAppManifest.xml to open using the new Manifest Editor On the Application UI tab, set the Tile Template, optional Title and Tile Images

17. Tiles on Windows Phone 8 Andy Wigley

18. Lock screen notifications and background image

19. Lock Screen on Windows Phone 7 On Windows Phone 7, Notifications area was reserved to first party apps Next Calendar Appointment Icons and counts for missed calls, new email, new SMS User could select background image From supplied Wallpapers From their own pictures NOTIFICATIONS AREA

20. Lock Screen on Windows Phone 8 End user can now select any app that has been enabled for lock screen notifications to show detailed status Select any five apps to show quick status (icon and count) For your app to be included in the notifications area, all you have to do is Create an icon Declare the app’s intent in the application manifest file

21. Creating a lock screen icon Create a 24 x 24 pixel PNG image that will be used to identify your app on the lock screen Contain only white pixels and transparent background Default name is LockIcon.png Use this name and you do not have to explicitly declare it in the application manifest If you use another name, Edit WMAppManifest.xml using the XML editor Change the DeviceLockImageURIelement which is listed inside the Tokens element: <Tokens> <PrimaryTokenTokenID="PhoneApp4Token"TaskName="_default"> <TemplateFlip> … <DeviceLockImageURI>MyLockIcon.png</DeviceLockImageURI> </TemplateFlip> </PrimaryToken> </Tokens>

22. Updating the Application Manifest File Edit WMAppManifest.xml with the XML editor Find the <Extensions> element. If not there, create it immediately following the <Tokens> element. Inside the <Extensions> element, create <Extension> elements for each feature you want to support: Icon Count and/or Text <Extensions> <ExtensionExtensionName="LockScreen_Notification_IconCount"ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}"TaskID="_default" /> <ExtensionExtensionName="LockScreen_Notification_TextField"ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}"TaskID="_default" /> </Extensions>

23. How to Update the Icon Count and Text Lock Screen Icon Count and Text is taken directly from your applications primary tile Secondary tiles are not used for this feature Information is only displayed on the lock screen if the tile contains the information For example, a count will only be displayed if the tile displays it Primary tile does not need to be pinned to the Start Screen for lock screen notifications to be enabled Update Primary Tile content in the usual way Local Shell Tiles API Push Notifications

24. Testing with the Simulation Dashboard Simulation Dashboard allows you to display the Lock Screen on the emulator Access the Simulation Dashboard from the Visual Studio Tools menu

25. Lock Screen Background

26. Lock Screen Background on Windows Phone 8 End user can choose a background image from their own photos or search for an image on Bing In addition, they can choose an app to be the background image provider For your app to be a lock screen background provider, all you have to do is: Declare the app’s intent in the application manifest file Write code to change the background image

27. Updating the Application Manifest File Edit WMAppManifest.xml with the XML editor Find the <Extensions> element. If not there, create it immediately following the <Tokens> element. Inside the <Extensions> element, create an <Extension> element for LockScreen_Background <Extensions> <ExtensionExtensionName="LockScreen_Background"ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}"TaskID="_default" /> </Extensions>

28. Code to Change Lock Screen Background privateasyncvoidlockHelper(UribackgroundImageUri, stringbackgroundAction) { try { //If you're not the provider, this call will prompt the user for permission. //Calling RequestAccessAsync from a background agent is not allowed. var op = awaitLockScreenManager.RequestAccessAsync(); //Check the status to make sure we were given permission. boolisProvider = LockScreenManager.IsProvidedByCurrentApplication; if (isProvider) { //Do the update. Windows.Phone.System.UserProfile.LockScreen.SetImageUri(backgroundImageUri); System.Diagnostics.Debug.WriteLine("New current image set to {0}", backgroundImageUri.ToString()); } else { MessageBox.Show("You said no, so I can't update your background."); } } catch (System.Exception ex) { System.Diagnostics.Debug.WriteLine(ex.ToString()); } }

29. User Confirmation Call to LockScreenManager.RequestAccessAsyncis required Checks if your app is already the selected lock screen background provider If not, prompts user for permission to make your app the selected provider //If you're not the provider, this call will prompt the user for permission. //Calling RequestAccessAsync from a background agent is not allowed. var op = awaitLockScreenManager.RequestAccessAsync();

30. Accessing Local Images To use an image that you shipped in your app, use ms-appx:/// UriimageUri = newUri("ms-appx:///background1.png", UriKind.RelativeOrAbsolute);LockScreen.SetImageUri(imageUri); To use an image stored in the Local Folder, use ms-appdata:///local/shared/shellcontent Must be in or below the /shared/shellcontentsubfolder UriimageUri = newUri("ms-appdata:///local/shared/shellcontent/background2.png",UriKind.RelativeOrAbsolute);LockScreen.SetImageUri(imageUri);

31. Lock Screen Notifications & Background Andy Wigley

32. Supporting WVGA, WXGA and 720p screen resolutions

33. 3 Screen Resolutions WVGA 800 x 480 15:9 WXGA 1280 x 768 15:9 720p 1280 x 720 16:9

34. So I Have to Do Three Different UIs? Well, No… As developers, we work with device independent pixels OS applies a scale factor to the actual resolution

35. Scaled Resolutions 480 480 480 853 800 800 WVGA WXGA 720p

36. Use “Auto” and “*” on Grid Rows Set Grid Row Height to “Auto” to size according to the controls placed within it Set Grid Row Height to “*” to take up all the rest of the space If you size multiple rows using “*”, available space is divided up evenly between them <Grid> <Grid.RowDefinitions> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> ... </Grid>

37. Adaptive Layout Using Grid Image height sized explicitly at 240px Directions row is “*” so gets everything that’s left – ends up taller on 720p Bottom row is “Auto” so sized to hold a TextBlock WVGA 720p

38. Images In most cases, you should supply images targeting the WXGA (1280 x 768) screen WXGA assets are of the highest quality Will automatically scale down on WVGA phones Still look great on 720p (1280 x 720) If you want, you can include images at each of the three resolutions in your project E.g. MyImage.wvga.png, MyImage.wxga.png and MyImage.720p.png At runtime, get Application.Current.Host.Content.ScaleFactorto determine the resolution of the screen on the current phone returns 100 for WVGA, 160 for WXGA and 150 for 720p Write code to load image at runtime appropriate for the current screen resolution

39. Handling Multiple Screen Resolutions Andy Wigley

40. Speech commands

41. Windows Phone Speech Support Windows Phone 7.x had voice support built into the operating system Programs and phone features could be started by voice commands e.g “Start MyApp” Incoming SMS messages could be read to the user The user could compose and send SMS messages Windows 8 builds on this to allow applications to make use of speech Applications can speak messages using the Speech Synthesis feature Applications can be started and given commands using Voice Commands Applications can accept input using Speech Recognition Speech recognition requires an internet connection, but Speech Synthesis does not

42. Application Launching using Voice Command The Voice Command feature of Windows Phone 7 allowed users to start applications In Windows Phone 8 the feature has been expanded to allow the user to request data from the application in the start command The data will allow a particular application page to be selected when the program starts and can also pass request information to that page To start using Voice Commands you must Create a Voice Command Definition (VCD) file that defines all the spoken commands The application then calls a method to register the words and phrases the first time it is run

43. The Fortune Teller Program The Fortune Teller program will tell your future You can ask it questions and it will display replies It could also speak them Some of the spoken commands activate different pages of the application and others are processed by the application when it starts running

44. The Voice Command Definition file This is the “money” question: “Fortune Teller Will I find money” <CommandPrefix> Fortune Teller </CommandPrefix> <Example> Will I find money </Example> <CommandName="showMoney"> <Example> Will I find money </Example> <ListenFor> [Will I find] {futureMoney} </ListenFor> <Feedback> Showing {futureMoney} </Feedback> <NavigateTarget="/money.xaml"/> </Command> <PhraseListLabel="futureMoney"> <Item> money </Item> <Item> riches </Item> <Item> gold </Item> </PhraseList>

45. The Voice Command Definition file <CommandPrefix> Fortune Teller </CommandPrefix> <Example> Will I find money </Example> <CommandName="showMoney"> <Example> Will I find money </Example> <ListenFor> [Will I find] {futureMoney} </ListenFor> <Feedback> Showing {futureMoney} </Feedback> <NavigateTarget="/money.xaml"/> </Command> <PhraseListLabel="futureMoney"> <Item> money </Item> <Item> riches </Item> <Item> gold </Item> </PhraseList> This is the phrase the user says to trigger the command All of the Fortune Teller commands start with this phrase

46. The Voice Command Definition file <CommandPrefix> Fortune Teller </CommandPrefix> <Example> Will I find money </Example> <CommandName="showMoney"> <Example> Will I find money </Example> <ListenFor> [Will I find] {futureMoney} </ListenFor> <Feedback> Showing {futureMoney} </Feedback> <NavigateTarget="/money.xaml"/> </Command> <PhraseListLabel="futureMoney"> <Item> money </Item> <Item> riches </Item> <Item> gold </Item> </PhraseList> This is example text that will be displayed by the help for this app as an example of the commands the app supports

47. The Voice Command Definition file <CommandPrefix> Fortune Teller </CommandPrefix> <Example> Will I find money </Example> <CommandName="showMoney"> <Example> Will I find money </Example> <ListenFor> [Will I find] {futureMoney} </ListenFor> <Feedback> Showing {futureMoney} </Feedback> <NavigateTarget="/money.xaml"/> </Command> <PhraseListLabel="futureMoney"> <Item> money </Item> <Item> riches </Item> <Item> gold </Item> </PhraseList> This is the command name This can be obtained from the URL by the application when it starts

48. The Voice Command Definition file <CommandPrefix> Fortune Teller </CommandPrefix> <Example> Will I find money </Example> <CommandName="showMoney"> <Example> Will I find money </Example> <ListenFor> [Will I find] {futureMoney} </ListenFor> <Feedback> Showing {futureMoney} </Feedback> <NavigateTarget="/money.xaml"/> </Command> <PhraseListLabel="futureMoney"> <Item> money </Item> <Item> riches </Item> <Item> gold </Item> </PhraseList> This is the example for this specific command

49. The Voice Command Definition file <CommandPrefix> Fortune Teller </CommandPrefix> <Example> Will I find money </Example> <CommandName="showMoney"> <Example> Will I find money </Example> <ListenFor> [Will I find] {futureMoney} </ListenFor> <Feedback> Showing {futureMoney} </Feedback> <NavigateTarget="/money.xaml"/> </Command> <PhraseListLabel="futureMoney"> <Item> money </Item> <Item> riches </Item> <Item> gold </Item> </PhraseList> This is the trigger phrase for this command It can be a sequence of words The user must prefix this sequence with the words “Fortune Teller”

50. The Voice Command Definition file This is the phraselist for the command The user can say any of the words in the phraselist to match this command The application can determine the phrase used The phraselist can be changed by the application dynamically <CommandPrefix> Fortune Teller </CommandPrefix> <Example> Will I find money </Example> <CommandName="showMoney"> <Example> Will I find money </Example> <ListenFor> [Will I find] {futureMoney} </ListenFor> <Feedback> Showing {futureMoney} </Feedback> <NavigateTarget="/money.xaml"/> </Command> <PhraseListLabel="futureMoney"> <Item> money </Item> <Item> riches </Item> <Item> gold </Item> </PhraseList>