You are on page 1of 40

M7: Tiles and Lock Screen Notifications

Andy Wigley | Microsoft Technical Evangelist Rob Tiffany | Microsoft Enterprise Mobility Strategist

Target Agenda | Day 1

Module and Topic | 10-minute breaks after each session / 60-minute meal break 1a - Introducing Windows Phone 8 Application Development | Part 1 1b - Introducing Windows Phone 8 Application Development | Part 2 2 - Designing Windows Phone Apps Planned Duration 50:00 50:00 50:00

3 - Building Windows Phone Apps

4 - Files and Storage on Windows Phone 8 Meal Break | 60-minutes 5 - Windows Phone 8 Application Lifecycle 6 - Background Agents 7 - Tiles and Lock Screen Notifications 8 - Push Notifications

50:00 60:00 50:00 25:00 25:00 30:00

9 - Using Phone Resources on Windows Phone 8


Target Agenda | Day 2

Module and Topic | 10-minute breaks after each session / 60-minute meal break 10 - App to App Communication 11 - Network Communication on Windows Phone 8 12 - Proximity Sensors and Bluetooth Planned Duration 35:00 50:00 35:00

13 - Speech Input on Windows Phone 8

14 - Maps and Location on Windows Phone 8 15 - Wallet Support 16 - In App Purchasing Meal Break | 60-minutes 17 - The Windows Phone Store 18 - Enterprise Applications in Windows Phone 8: Architecture and Publishing

35:00 25:00 25:00 60:00 50:00 50:00

19 - Windows 8 and Windows Phone 8 Cross Platform Development

20 Mobile Web


Module Agenda

Tiles in Windows Phone 8 Local Tiles API

Updating Tiles from ShellTileSchedule

Updating Tiles from Background Agents Lock screen notifications for Windows Phone

Lock screen background for Windows Phone

Tiles on Windows Phone 8


Live Tiles on Windows Phone

Windows phone has the unique ability to provide the end user

glanceable access to the information they care most about, via

Live Tiles Push Notifications offer developers a way to send timely

to their applications even when they are not running In Windows Phone 7.1 and later, the Local Tiles API allows apps

to create and update tiles

Live Tiles 101

Shortcuts to apps All apps have at least one tile, known as the default tile Created by user pinning your app to the Start Screen Launch to app main page Apps can create secondary tiles Created programmatically Launch to any page in your app Static or dynamic 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

Tile Templates and Tile Sizes

Windows Phone 8 supports three Tile

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

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 Not all elements used in all templates

WXGA resolution Image sizes Automatically scaled for WVGA and 720p
Tile Size Small Medium 159 x 159 pixels 336 x 336 pixels Flip and Cycle Images 159 x 159 pixels 336 x 336 pixels Iconic Images 110 x 110 pixels 202 x 202 pixels


691 x 336 pixels

691 x 336 pixels


Flip Tile Template

Flips from front to back

Small size does not flip

Medium size is the same as the WP7.1 tile template

Cycle Tile Template

Cycles between from 1 to 9 images

Small tile does not cycle

Iconic Tile Template

Displays a small image in the center of the Tile and is designed to reflect Windows Phone

design principles

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

Defining the Application Tile

Define your images

The standard new project templates already contain

placeholder images of the correct size FlipCycleTile*.png used for the Flip and Cycle Tile

IconicTile*.png used for the Iconic Tile templates Replace these images with your own artwork

Defining the Application Tile in 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

Demo 1: Application Tile

Creating and Updating Tiles with the Local Tile API

Local tile updates (these are *not* push)
Full control of all properties when your app
is in the foreground or background

Manage Secondary Tiles

Launches directly to page/experience

Creating Tiles
public static void SetTile(RecipeDataItem item, string NavSource) {

FlipTileData tileData = new FlipTileData() { //Front square data Title = item.Title, BackgroundImage = new Uri("ms-appx:///background1.png", UriKind.Relative), SmallBackgroundImage = new Uri("ms-appx:///smallbackground1.png", UriKind.Relative), //Back square data BackTitle = item.Title, BackContent = item.Ingredients, BackBackgroundImage = new Uri("ms-appx:///backbackground1.png", UriKind.Relative), //Wide tile data WideBackgroundImage = new Uri("ms-appx:///widebackground1.png", UriKind.Relative), WideBackBackgroundImage = new Uri("ms-appx:///widebackbackground1.png", UriKind.Relative), WideBackContent = item.Directions }; // Create Tile and pin it to Start. Causes a navigation to Start and a deactivation of our application ShellTile.Create(new Uri("/RecipePage.xaml?DefaultTitle=FromTile", UriKind.Relative), tileData, true);

Updating Tiles
// Find the Tile we want to update. ShellTile TileToFind = ShellTile.ActiveTiles.FirstOrDefault( x => x.NavigationUri.ToString().Contains("DefaultTitle=FromTile"));
// If the Tile was found, then update the Title. if (TileToFind != null) { FlipTileData NewTileData = new FlipTileData { Title = textBoxTitle.Text }; TileToFind.Update(NewTileData); }

Updating the Application Tile

public static void UpdateMainTile(RecipeDataGroup group) { //Get application's main tile application tile always first item in the ActiveTiles collection //whether it is pinned or not var mainTile = ShellTile.ActiveTiles.FirstOrDefault(); IconicTileData tileData = new IconicTileData() { Count = group.RecipesCount, BackgroundColor = Color.FromArgb(255, 195, 61, 39), Title = "Contoso Cookbooks", IconImage = new Uri("ms-appx:///local/shared/shellcontent/newMedLogo.png", UriKind.RelativeOrAbsolute), SmallIconImage = new Uri("ms-appx:///local/shared/shellcontent/newSmlLogo.png", UriKind.RelativeOrAbsolute), WideContent1 = "Recent activity:", WideContent2 = "Browsed " + group.Title + " group", WideContent3 = "with total of " + group.RecipesCount + " recipes" }; mainTile.Update(tileData);

Demo 2: Tile API Create, Update, Delete

Updating Tiles From a Background Agent

In Windows Phone OS 7.0, only way of updating Live Tiles was from a Tile Schedule

or from Push Notifications

Tile Schedule needs to fetch images from a web URI Push Notifications require you to implement a backend service To have control of shell tiles when the app is not running without using Push Notifications, a good solution is a Background Agent Use the ShellTile API to locate and update tiles

Demo 3: Updating Tiles From a Background Agent

Lock screen notifications on Windows Phone

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

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 apps intent in the application manifest file

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
<Tokens> <PrimaryToken TokenID="PhoneApp4Token" TaskName="_default"> <TemplateFlip> <DeviceLockImageURI>MyLockIcon.png</DeviceLockImageURI> </TemplateFlip> </PrimaryToken> </Tokens>

Change the DeviceLockImageURI

element which is listed inside the Tokens element:

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

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

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

Demo 4: Lock Screen Notifications

Lock Screen Background

Lock Screen Background on Windows Phone 8

End user can choose a background image from their own photos or search for one 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

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> <Extension ExtensionName="LockScreen_Background"

ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />


Write Code to Change the 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()); } }

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

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

Accessing Local Images

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 5: Lock Screen Background

Shell Tile API allows easy manipulation of tiles from within an application

Tiles can have a front and a back, and apps can have secondary tiles
Tiles and Toasts can launch into a specific page within the app Only the user can decide to pin an apps primary tile to the Start Screen, not from code App can declare in the App manifest that it can be a lock screen notification provider User must select apps to display lock screen notifications from phone Settings Optionally supply count and/or text these are pulled directly from the primary tile App can also declare that it can be a lock screen background provider Code used to request permission from the user and to change the lock screen background

The information herein is for informational purposes only an 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.


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