msdevcon.ru
#msdevcon
5 Ways of Upgrading Your Windows
Phone 7.x App to Windows Phone 8
Andy Wigley
Microsoft UK
Tiles on Windows Phone 8
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
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
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
WXGA resolution Image sizes
Automatically scaled for WVGA and 720p
7
Flips from front to back
Small size does not flip
Medium size is the same
as the WP7.1 tile template
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
Supporting
enhanced tiles on
Windows Phone 7.8
and 8.0
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!
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
Copy the Assets folder from a V8 project into
your upgraded project
Replace the images with your own artwork
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
DEMO
Tiles on Windows Phone 8
Andy Wigley
Lock screen notifications and background
image
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
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
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:
<Tokens>
<PrimaryToken TokenID="PhoneApp4Token" TaskName="_default">
<TemplateFlip>
…
<DeviceLockImageURI>MyLockIcon.png</DeviceLockImageURI>
</TemplateFlip>
</PrimaryToken>
</Tokens>
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>
<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>
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
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
file
Write code to change the background image
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>
<Extension ExtensionName="LockScreen_Background"
ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />
</Extensions>
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());
}
}
//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();
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
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);
DEMO
Lock Screen Notifications &
Background
Andy Wigley
Supporting WVGA, WXGA and 720p screen
resolutions
WVGA
800 x 480
15:9
WXGA
1280 x 768
15:9
720p
1280 x 720
16:9
Well, No…
As developers, we work with device independent pixels
OS applies a scale factor to the actual resolution
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:9
1.5x scale, 80 pixels taller
(53 pixels, before scaling)
853 x 480
480
800
800
853
480
480
WVGA
WXGA
720p
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>
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
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
DEMO
Handling Multiple Screen
Resolutions
Andy Wigley
Speech commands
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
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
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
<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>
<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>
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>
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>
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>
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>
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>
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>
<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>
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>
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>
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
async void setupVoiceCommands()
{
await VoiceCommandService.InstallCommandSetsFromFileAsync(
new Uri("ms-appx:///VCDCommands.xml", UriKind.RelativeOrAbsolute));
}
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
Command
Name
Phraselist Recognized
phrase
Name
Whole phrase as it
was recognized
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;
}
}
}
<PhraseList Label="futureMoney">
<Item> money </Item>
<Item> riches </Item>
<Item> gold </Item>
</PhraseList>
string moneyPhrase = NavigationContext.QueryString["futureMoney"];
DEMO
Voice Commands
Andy 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
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
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 Share
Andy Wigley
Контакты
Andy Wigley
Microsoft
andy.wigley@microsoft.com & @andy_wigley
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.