Presentation is loading. Please wait.

Presentation is loading. Please wait.

Msdevcon.ru#msdevcon. 5 Ways of Upgrading Your Windows Phone 7.x App to Windows Phone 8 Andy Wigley Microsoft UK.

Similar presentations


Presentation on theme: "Msdevcon.ru#msdevcon. 5 Ways of Upgrading Your Windows Phone 7.x App to Windows Phone 8 Andy Wigley Microsoft UK."— Presentation transcript:

1 msdevcon.ru#msdevcon

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

3 Supporting WP8 Tile FormatsLock Screen Notifications and Background ImageSupporting WVGA, WXGA and 720p screen resolutionsSpeech Commands 5 Easy Upgrades 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 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 Tile Content 7 Tile SizeFlip and Cycle ImagesIconic Images Small159 x 159 pixels 110 x 110 pixels Medium336 x 336 pixels 202 x 202 pixels Wide691 x 336 pixels N/A

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 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 Primary and Secondary Tiles

12 Supporting enhanced tiles on Windows Phone 7.8 and 8.0

13 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! Option 1: Do Not Upgrade

14 1. In File Explorer, create a copy of the Windows Phone OS 7.1 project in the same solution folder 2. Rename the new projects folder and project file to projectname80 (for example) 3. In Solution Explorer, add the copied project to the solution 4. In Solution Explorer, right-click on the copied project and select Upgrade to Windows Phone 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 6. Implement new functionality in files unique to the WP8 project 7. Define a #WP8 compile time directive 8. Use to conditionally include WP8 functionality in shared files Option 2: Upgrade to Windows Phone 8

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 DEMO Tiles on Windows Phone 8 Andy Wigley

18 Lock screen notifications and background image

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

20 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 apps intent in the application manifest file Lock Screen on Windows Phone 8

21 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 DeviceLockImageURI element which is listed inside the Tokens element: Creating a lock screen icon … MyLockIcon.png

22 Edit WMAppManifest.xml with the XML editor Find the element. If not there, create it immediately following the element. Inside the element, create elements for each feature you want to support: Icon Count and/or Text Updating the Application Manifest File

23 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 How to Update the Icon Count and Text

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 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 apps intent in the application manifest file Write code to change the background image Lock Screen Background on Windows Phone 8

27 Edit WMAppManifest.xml with the XML editor Find the element. If not there, create it immediately following the element. Inside the element, create an element for LockScreen_Background Updating the Application Manifest File

28 Code to Change Lock Screen Background private async void lockHelper(Uri backgroundImageUri, string backgroundAction) { 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 = await LockScreenManager.RequestAccessAsync(); //Check the status to make sure we were given permission. bool isProvider = 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 Call to LockScreenManager.RequestAccessAsync is 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 User Confirmation //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 = await LockScreenManager.RequestAccessAsync();

30 To use an image that you shipped in your app, use ms-appx:/// Uri imageUri = new Uri("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/shellcontent subfolder Uri imageUri = new Uri("ms-appdata:///local/shared/shellcontent/background2.png", UriKind.RelativeOrAbsolute); LockScreen.SetImageUri(imageUri); Accessing Local Images

31 DEMO Lock Screen Notifications & Background Andy Wigley

32 Supporting WVGA, WXGA and 720p screen resolutions

33 3 Screen Resolutions WVGA 800 x :9 WXGA 1280 x :9 720p 1280 x :9

34 Well, No… As developers, we work with device independent pixels OS applies a scale factor to the actual resolution So I Have to Do Three Different UIs? ResolutionAspect ratioScale FactorScaled resolution WVGA800 x 48015:91.0x scale800 x 480 WXGA1280 x 76815:91.6x scale800 x p1280 x 72016:9 1.5x scale, 80 pixels taller (53 pixels, before scaling) 853 x 480

35 Scaled Resolutions WVGAWXGA720p

36 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 Use Auto and * on Grid Rows...

37 Adaptive Layout Using Grid WVGA720p Image height sized explicitly at 240px Bottom row is Auto so sized to hold a TextBlock Directions row is * so gets everything thats left – ends up taller on 720p

38 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.ScaleFactor to 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 Images

39 DEMO Handling Multiple Screen Resolutions Andy Wigley

40 Speech commands

41 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 Windows Phone Speech Support

42 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 Application Launching using Voice Command

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 Fortune Teller Will I find money Will I find money [Will I find] {futureMoney} Showing {futureMoney} money riches gold The Voice Command Definition file This is the money question: Fortune Teller Will I find money

45 Fortune Teller Will I find money Will I find money [Will I find] {futureMoney} Showing {futureMoney} money riches gold The Voice Command Definition file This is the phrase the user says to trigger the command All of the Fortune Teller commands start with this phrase

46 Fortune Teller Will I find money Will I find money [Will I find] {futureMoney} Showing {futureMoney} money riches gold The Voice Command Definition file This is example text that will be displayed by the help for this app as an example of the commands the app supports

47 Fortune Teller Will I find money Will I find money [Will I find] {futureMoney} Showing {futureMoney} money riches gold The Voice Command Definition file This is the command name This can be obtained from the URL by the application when it starts

48 Fortune Teller Will I find money Will I find money [Will I find] {futureMoney} Showing {futureMoney} money riches gold The Voice Command Definition file This is the example for this specific command

49 Fortune Teller Will I find money Will I find money [Will I find] {futureMoney} Showing {futureMoney} money riches gold The Voice Command Definition file 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 Fortune Teller Will I find money Will I find money [Will I find] {futureMoney} Showing {futureMoney} money riches gold 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

51 Fortune Teller Will I find money Will I find money [Will I find] {futureMoney} Showing {futureMoney} money riches gold The Voice Command Definition file This is the spoken feedback from the command The feedback will insert the phrase item used to activate the command

52 Fortune Teller Will I find money Will I find money [Will I find] {futureMoney} Showing {futureMoney} money riches gold The Voice Command Definition file This is the url for the page to be activated by the command Commands can go to different pages, or all go to MainPage.xaml if required

53 Fortune Teller Will I find money Will I find money [Will I find] {futureMoney} Showing {futureMoney} money riches gold The Voice Command Definition file These are the phrases that can be used at the end of the command The application can modify the phrase list of a command dynamically It could give movie times for films by name

54 The VCD file can be loaded from the application or from any URI In this case it is just a file that has been added to the project and marked as Content The VCD can also be changed by the application when it is running The voice commands for an application are loaded into the voice command service when the application runs The application must run at least once to configure the voice commands Installing a VCD file async void setupVoiceCommands() { await VoiceCommandService.InstallCommandSetsFromFileAsync( new Uri("ms-appx:///VCDCommands.xml", UriKind.RelativeOrAbsolute)); }

55 Launching Your App With a Voice Command If the user now presses and holds the Windows button, and says: Fortune Teller, Will I find gold? the Phone displays Showing gold It then launches your app and navigates to the page associated with this command, which is /Money.xaml The query string passed to the page looks like this: "/?voiceCommandName=showMoney&futureMoney=gold&reco=Fortune%20Teller%Will%20I%20find%20gold" Command Name Phraselist Name Recognized phrase Whole phrase as it was recognized

56 Handling Voice Commands This code runs in the OnNavigatedTo method of a target page Can also check for the voice command phrase that was used if (e.NavigationMode == System.Windows.Navigation.NavigationMode.New) { if (NavigationContext.QueryString.ContainsKey("voiceCommandName")) { string command = NavigationContext.QueryString["voiceCommandName"]; switch command) { case "tellJoke": messageTextBlock.Text = "Insert really funny joke here"; break; // Add cases for other commands. default: messageTextBlock.Text = "Sorry, what you said makes no sense."; break; }

57 Identifying phrases The navigation context can be queried to determine the phrase used to trigger the navigation In this case the program is selecting between the phrase used in the riches question money riches gold string moneyPhrase = NavigationContext.QueryString["futureMoney"];

58 DEMO Voice Commands Andy Wigley

59 NFC tap to share

60 NFC provides a connection between devices that are very close together (within 3-4 centimetres) The data is transferred at a rate of up to 424 Kbits/second It is assumed that this data transfer is intentional so there is not normally any authentication as such The user has positioned their device close to the other device The phone can connect to an unpowered NFC chip/tag Near Field Communications

61 Using Near Field Communications NFC is best for sending small amounts of data between devices and can be used in a number of different scenarios: Connect devices Initiate a Bluetooth or WiFi (Infrastructure) connection to your app on another device Acquire content Read smart posters that contain digital content in an embedded NFC tag Exchange digital objects Exchange an electronic business card, or vCard

62 How to Tap and Share an App Windows.Networking.Proximity.ProximityDevice proximityDevice; long publishedMessageId = -1; private void PublishUriButton_Click(object sender, RoutedEventArgs e) { if (proximityDevice == null) proximityDevice = ProximityDevice.GetDefault(); // Make sure NFC is supported if (proximityDevice != null) { // Stop publishing the current message. if (publishedMessageId != -1) { proximityDevice.StopPublishingMessage(publishedMessageId); } // Publish the new one publishedMessageId = proximityDevice.PublishUriMessage( new Uri("zune:navigate?appid=351decc7-ea2f-e c-00237de2db9e")); }

63 DEMO NFC Tap to Share Andy Wigley

64 Контакты Andy Wigley Microsoft & andywigley.com

65 © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.


Download ppt "Msdevcon.ru#msdevcon. 5 Ways of Upgrading Your Windows Phone 7.x App to Windows Phone 8 Andy Wigley Microsoft UK."

Similar presentations


Ads by Google