msdevcon.ru#msdevcon. 5 ways of upgrading your windows phone 7.x app to windows phone 8 andy wigley...
TRANSCRIPT
msdevcon.ru #msdevcon
5 Ways of Upgrading Your Windows Phone 7.x App to Windows Phone 8Andy Wigley
Microsoft 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 apps
In Windows Phone 8.0, you can support three different tile sizes
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
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 Images
Small 159 x 159 pixels 159 x 159 pixels 110 x 110 pixels
Medium 336 x 336 pixels 336 x 336 pixels 202 x 202 pixels
Wide 691 x 336 pixels 691 x 336 pixels N/A
Flip Tile Template
Flips from front to backSmall size does not flipMedium size is the same as the WP7.1 tile template
Cycle Tile Template
Cycles between from 1 to 9 imagesSmall tile does not cycle
Iconic Tile Template
Displays 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 templates
Copy 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 enabled
Update 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
80
0 80
0 85
3
480480
480
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
<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 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
<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”
<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 phrase the
user says to trigger the
command
All of the Fortune Teller
commands start with
this phrase
<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 example text that
will be displayed by the
help for this app as an
example of the
commands the app
supports
<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 command
name
This can be obtained
from the URL by the
application when it
starts
<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 example for
this specific command
<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 trigger phrase
for this command
It can be a sequence of
words
The user must prefix this
sequence with the words
“Fortune Teller”
<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 fileThis 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><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 spoken
feedback from the
command
The feedback will insert
the phrase item used to
activate the command
<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 url for the
page to be activated by
the command
Commands can go to
different pages, or all go
to MainPage.xaml if
required
<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
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
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 running
The 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 file
async 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/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
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
© 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.