Oliver Scheer

Senior Technical Evangelist

Microsoft Deutschland

http://the-oliver.com

Tiles and Notifications

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

04/12/2023Microsoft confidential3

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

information

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 5

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

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

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 back

• Small size does not flip

•Medium size is the

same as the WP7.1 tile

template

04/12/20238

Cycle Tile Template

• Cycles between from 1 to 9 images

• Small tile does not cycle

04/12/20239

Iconic Tile Template

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

Windows Phone design principles

04/12/202310

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 templates• IconicTile*.png used for the Iconic

Tile templates

• Replace these images with your own

artwork

04/12/202312

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

04/12/202313

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•Create/Update/Delete•Launches directly to page/experience

Application TileLaunches main app experience

Secondary TileLaunches world news page

Secondary TileLaunches local news page

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 applicatio

n

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 with a Tile Schedule

• Periodically updates the tile image without pushing message though

• Can only update the image on the front of the tile

•Updates images only from the web, not from the app local store

• Sets up notification channel and binds it to a tile notification

• Few limitations• Image size must be less than 150 KB (up from 80KB in WP7.1)• Download time must not exceed 45 seconds (up from 30 seconds in 7.1)• Lowest update time resolution is 60 minutes• If the schedule for an indefinite or finite number of updates fails too many times, OS will

cancel it

•Update recurrence can by Onetime, EveryHour, EveryDay, EveryWeek or EveryMonth

20

Scheduling Tile Update

21

public partial class MainPage : PhoneApplicationPage{ ShellTileSchedule SampleTileSchedule = new ShellTileSchedule();

private void buttonIndefinite_Click(object sender, RoutedEventArgs e) { // Updates will happen on a fixed interval. SampleTileSchedule.Recurrence = UpdateRecurrence.Interval;

// Updates will happen every hour. // Because MaxUpdateCount is not set, the schedule will run indefinitely. SampleTileSchedule.Interval = UpdateInterval.EveryHour;

SampleTileSchedule.RemoteImageUri = new Uri(@"http://www.weather.gov/forecasts/graphical/images/conus/MaxT1_conus.png"); // Updates will apply to the application tile. SampleTileSchedule.Start(); }}

Scheduling Secondary Tile Updates

22

foreach (ShellTile TileToSchedule in ShellTile.ActiveTiles) { ShellTileSchedule mySchedule = new ShellTileSchedule(TileToSchedule); mySchedule.Interval = UpdateInterval.EveryHour; mySchedule.Recurrence = UpdateRecurrence.Interval; mySchedule.RemoteImageUri = imageURI; mySchedule.Start(); }

• Can also schedule updates for secondary tiles by passing the ShellTile object

into the ShellTileSchedule constructor

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

04/12/2023Microsoft confidential25

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

26

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

04/12/202327

Lock Screen on Windows Phone 8

04/12/2023Microsoft confidential28

• 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

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

04/12/2023Microsoft confidential29

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

Updating the Application Manifest File

04/12/2023Microsoft confidential30

• 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

04/12/2023Microsoft confidential31

• Simulation Dashboard allows you

to display the Lock Screen on the

emulator

• Access the Simulation Dashboard

from the Visual Studio Tools menu

Testing with the Simulation Dashboard

Demo 4: Lock Screen Notifications

04/12/2023Microsoft confidential33

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

04/12/202334

Lock Screen Background on Windows Phone 8

04/12/2023Microsoft confidential35

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

Updating the Application Manifest File

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

• 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

04/12/202337

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

04/12/2023Microsoft confidential38

• 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

Demo 5: Lock Screen Background

Review

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

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.