2. 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
4. 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
5. 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
6. 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
7. 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
8. Flip Tile Template
• Flips from front to back
• Small size does not flip
• Medium size is the same as
the WP7.1 tile template
3/18/20148
9. Cycle Tile Template
• Cycles between from 1 to 9 images
• Small tile does not cycle
3/18/20149
10. Iconic Tile Template
• Displays a small image in the center of the Tile and is designed to reflect Windows Phone
design principles
3/18/201410
11. 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
12. 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
3/18/201412
13. 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
3/18/201413
15. Creating and Updating Tiles with the Local Tile API
•Local tile updates(these are *not* push)
•Full control of all propertieswhen yourapp
is in the foregroundor background
•Manage SecondaryTiles
•Create/Update/Delete
•Launchesdirectlyto page/experience
16. 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);
}
17. 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);
}
18. 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);
}
20. 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
21. 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();
}
}
22. 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
23. 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
26. 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
27. • 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
3/18/201427
Lock Screen on Windows Phone 8
28. • 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
3/18/2014Microsoft confidential28
<Tokens>
<PrimaryToken TokenID="PhoneApp4Token" TaskName="_default">
<TemplateFlip>
…
<DeviceLockImageURI>MyLockIcon.png</DeviceLockImageURI>
</TemplateFlip>
</PrimaryToken>
</Tokens>
29. • 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
3/18/2014Microsoft confidential29
30. • 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
3/18/2014Microsoft confidential30
31. • 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
3/18/2014Microsoft confidential31
34. • 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
3/18/201434
Lock Screen Background on Windows Phone 8
35. • 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
3/18/2014Microsoft confidential35
36. 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());
}
}
37. • 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
3/18/201437
//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();
38. • 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
3/18/2014Microsoft confidential38
40. 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