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

msdevcon.ru #msdevcon

http://msdevcon.ru/

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

Supporting WP8 Tile Formats

Lock Screen Notifications and Background Image

Supporting WVGA, WXGA and 720p screen resolutions

Speech Commands

5 Easy Upgrades

NFC Tap-to-Share

Tiles on Windows Phone 8

Live Tiles 101Shortcuts to appsAll 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 tilesTiles can be updated Application code Background agents Push Notifications

In Windows Phone 7.1, only one tile size for third party appsIn Windows Phone 8.0, you can support three different tile sizes

Tile Templates and Tile SizesWindows Phone 8 supports three Tile templatesFlip – 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

The Tile content is built up from a fixed set of data propertiesData Properties for Text elements, Count elements and Image elementsContent that displays depends on the template you choose and the tile sizeNot all elements need to be used

WXGA resolution Image sizesAutomatically scaled for WVGA and 720p

Tile Content

7

Tile Size Flip and Cycle Images Iconic ImagesSmall 159 x 159 pixels 159 x 159 pixels 110 x 110 pixelsMedium 336 x 336 pixels 336 x 336 pixels 202 x 202 pixelsWide 691 x 336 pixels 691 x 336 pixels N/A

Flip Tile TemplateFlips from front to backSmall size does not flipMedium size is the same as the WP7.1 tile template

Cycle Tile TemplateCycles between from 1 to 9 imagesSmall tile does not cycle

Iconic Tile TemplateDisplays a small image in the center of the Tile Designed to reflect Windows Phone design principles

Application TileCan be created only when user taps and holds the application name in the Application List and then selects pin to startTile template and Properties are set initially in the Application ManifestTemplate cannot be changed programmatically

Secondary TileCan be created only as the result of user input in an applicationThe application then uses the Create(Uri, ShellTileData) method to create a Tile on StartBecause 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

Supporting enhanced tiles on Windows Phone 7.8 and 8.0

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

1. In File Explorer, create a copy of the Windows Phone OS 7.1 project in the same solution folder

2. Rename the new project’s folder and project file to projectname80 (for example)

3. In Solution Explorer, add the copied project to the solution4. In Solution Explorer, right-click on the copied project and

select Upgrade to Windows Phone 8.05. 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 directive8. Use to conditionally include WP8 functionality in shared

files

Option 2: Upgrade to Windows Phone 8

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 templatesCopy the Assets folder from a V8 project into your upgraded projectReplace the images with your own artwork

Edit the Application Manifest

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

DEMO

Tiles on Windows Phone 8Andy Wigley

Lock screen notifications and background image

On Windows Phone 7, Notifications area was reserved to first party apps

Next Calendar AppointmentIcons and counts for missed calls, new email, new SMS

User could select background imageFrom supplied WallpapersFrom their own pictures

Lock Screen on Windows Phone 7

NOTIFICATIONS AREA

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 isCreate an iconDeclare the app’s intent in the application manifest file

Lock Screen on Windows Phone 8

Create a 24 x 24 pixel PNG image that will be used to identify your app on the lock screenContain only white pixels and transparent background

Default name is LockIcon.pngUse 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

<Tokens> <PrimaryToken TokenID="PhoneApp4Token" TaskName="_default"> <TemplateFlip> … <DeviceLockImageURI>MyLockIcon.png</DeviceLockImageURI> </TemplateFlip> </PrimaryToken> </Tokens>

Edit WMAppManifest.xml with the XML editorFind 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> <Extension ExtensionName="LockScreen_Notification_IconCount" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" /> <Extension ExtensionName="LockScreen_Notification_TextField" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" /> </Extensions>

Updating the Application Manifest File

Lock Screen Icon Count and Text is taken directly from your applications primary tileSecondary tiles are not used for this feature

Information is only displayed on the lock screen if the tile contains the informationFor 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 enabledUpdate Primary Tile content in the usual wayLocal Shell Tiles APIPush Notifications

How to Update the Icon Count and Text

Testing with the Simulation Dashboard

Simulation Dashboard allows you to display the Lock Screen on the emulatorAccess the Simulation Dashboard from the Visual Studio Tools menu

Lock Screen Background

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 fileWrite code to change the background image

Lock Screen Background on Windows Phone 8

Edit WMAppManifest.xml with the XML editorFind 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> <Extension ExtensionName="LockScreen_Background" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" /> </Extensions>

Updating the Application Manifest File

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()); } }

Call to LockScreenManager.RequestAccessAsync is requiredChecks if your app is already the selected lock screen background providerIf 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();

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/shellcontentMust 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

DEMO

Lock Screen Notifications & BackgroundAndy Wigley

Supporting WVGA, WXGA and 720p screen resolutions

3 Screen Resolutions

WVGA800 x 48015:9

WXGA1280 x 76815:9

720p1280 x 72016:9

Well, No…As developers, we work with device independent pixelsOS applies a scale factor to the actual resolution

So I Have to Do Three Different UIs?

Resolution Aspect ratio Scale Factor Scaled resolution

WVGA 800 x 480 15:9 1.0x scale 800 x 480

WXGA 1280 x 768 15:9 1.6x scale 800 x 480

720p 1280 x 720 16:91.5x scale, 80 pixels

taller (53 pixels, before scaling)

853 x 480

Scaled Resolutions

WVGA WXGA 720p

800 80

0 853

480 480

480

Set Grid Row Height to “Auto” to size according to the controls placed within itSet Grid Row Height to “*” to take up all the rest of the spaceIf you size multiple rows using “*”, available space is divided up evenly between them

Use “Auto” and “*” on Grid Rows

<Grid> <Grid.RowDefinitions> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>... </Grid>

Adaptive Layout Using Grid

WVGA 720p

Image height sized explicitly at 240px

Bottom row is “Auto” so sized to hold a TextBlock

Directions row is “*” so gets everything that’s left – ends up taller on

720p

In most cases, you should supply images targeting the WXGA (1280 x 768) screenWXGA assets are of the highest qualityWill automatically scale down on WVGA phonesStill look great on 720p (1280 x 720)

If you want, you can include images at each of the three resolutions in your projectE.g. MyImage.wvga.png, MyImage.wxga.png and MyImage.720p.pngAt 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 720pWrite code to load image at runtime appropriate for the current screen resolution

Images

DEMO

Handling Multiple Screen ResolutionsAndy Wigley

Speech commands

Windows Phone 7.x had voice support built into the operating systemPrograms and phone features could be started by voice commands e.g “Start MyApp”Incoming SMS messages could be read to the userThe user could compose and send SMS messages

Windows 8 builds on this to allow applications to make use of speechApplications can speak messages using the Speech Synthesis featureApplications can be started and given commands using Voice CommandsApplications can accept input using Speech Recognition

Speech recognition requires an internet connection, but Speech Synthesis does not

Windows Phone Speech Support

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

The Fortune Teller ProgramThe Fortune Teller program will tell your futureYou can ask it questions and it will display replies

It could also speak themSome of the spoken commands activate different pages of the application and others are processed by the application when it starts running

<CommandPrefix> Fortune Teller </CommandPrefix><Example> Will I find money </Example><Command Name="showMoney"> <Example> Will I find money </Example> <ListenFor> [Will I find] {futureMoney} </ListenFor> <Feedback> Showing {futureMoney} </Feedback> <Navigate Target="/money.xaml"/></Command><PhraseList Label="futureMoney"> <Item> money </Item> <Item> riches </Item> <Item> gold </Item></PhraseList>

The Voice Command Definition file

This is the “money” question: “Fortune Teller Will I find money”


The Voice Command Definition fileThis is the phrase the user says to trigger the commandAll of the Fortune Teller commands start with this phrase


The Voice Command Definition fileThis is example text that will be displayed by the help for this app as an example of the commands the app supports



This is the command nameThis can be obtained from the URL by the application when it starts



This is the example for this specific command



This is the trigger phrase for this commandIt can be a sequence of wordsThe user must prefix this sequence with the words “Fortune Teller”


The Voice Command Definition fileThis is the phraselist for the commandThe user can say any of the words in the phraselist to match this commandThe application can determine the phrase used The phraselist can be changed by the application dynamically



This is the spoken feedback from the commandThe feedback will insert the phrase item used to activate the command



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



These are the phrases that can be used at the end of the commandThe application can modify the phrase list of a command dynamically• It could give movie times for films by name

The VCD file can be loaded from the application or from any URIIn 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 runningThe voice commands for an application are loaded into the voice command service when the application runsThe application must run at least once to configure the voice commands

Installing a VCD fileasync void setupVoiceCommands(){ await VoiceCommandService.InstallCommandSetsFromFileAsync( new Uri("ms-appx:///VCDCommands.xml", UriKind.RelativeOrAbsolute));}

Launching Your App With a Voice CommandIf 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.xamlThe 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

Handling Voice Commands

This code runs in the OnNavigatedTo method of a target pageCan 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; } }}

Identifying phrases

The navigation context can be queried to determine the phrase used to trigger the navigationIn this case the program is selecting between the phrase used in the “riches” question

<PhraseList Label="futureMoney"> <Item> money </Item> <Item> riches </Item> <Item> gold </Item></PhraseList>

string moneyPhrase = NavigationContext.QueryString["futureMoney"];

DEMO

Voice CommandsAndy Wigley

NFC tap to share

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/secondIt 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

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 devicesInitiate a Bluetooth or WiFi (Infrastructure) connection to your app on another device

Acquire contentRead “smart” posters that contain digital content in an embedded NFC tag

Exchange digital objectsExchange an electronic business card, or vCard

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-e011-854c-00237de2db9e")); } }

DEMO

NFC Tap to ShareAndy Wigley

Контакты

Andy [email protected] & @andy_wigleyandywigley.com

mailto:[email protected]

http://twitter.com/andy_wigley

http://twitter.com/andy_wigley

http://andywigley.com/

© 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.

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

Documents

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