Tiles, Toasts, and Notifications

The previous chapters have discussed several different ways that a Windows Store app can be activated. These activations have occurred as responses to user interaction with Windows and as a result of the app participating in different Windows contracts and extensions—remember that launching an application from its Start tile is actually an implementation of the Launch contract. However, Windows Store apps have ways to provide information and seem alive even when the app itself hasn’t been activated: tiles and toasts.

For Windows Store apps, the tiles that appear on the Start screen are more than just oversized desktop icons. These tiles are "live tiles"—their display can be updated with text, images, icons, and animations in response to notifications from both within the system and from external sources. Apps can have both primary and secondary tiles, the latter of which can be used to provide additional information that is passed to the application if they are used to launch the app.

Toasts provide apps a way to communicate information to users while they are using another app. Toasts appear as pop-up notifications in the upper corner of the app, and much like live tiles can include text and images. Toast messages also include information that can be passed to the application if users choose to use the toast to launch the application.

This chapter will show how live tiles can be used to add functionality to otherwise inactive Windows Store apps. Then, toasts will be explored, including configuring how they appear, controlling when they appear, and reacting to what occurs when they are used to launch an app.

The chapter will conclude with a discussion of push notifications, which allow updates to be triggered from services external to both the app and the device itself.

Live Tiles

Every Windows Store app that is installed initially has a tile on the Windows Start screen that can be used to launch the application. By default, each app includes a square tile and optionally can include a larger “wide” tile, with the app’s users deciding which size tile they want to include on their Start screen. The initial default content of an app’s tile is set in the app manifest file, and includes the following options:

 The tile’s standard-size logo image.

 The tile’s wide-size logo image.

 Whether title text should be displayed when the standard, wide, both, or neither tile is shown.

 Whether the foreground for text and other content is light or dark if it is being shown.

 The background color of the tile.

Note: If an app includes a wide tile, when the app is installed the wide tile will be the one that is initially displayed. Users can then choose to resize it to be displayed as the smaller tile, or even opt to remove the tile from the Start screen altogether. When an app is removed from the Start screen, it is still available to be launched by users from the results of a search in the Start screen unless they uninstall the app.

Beyond the content initially set for a tile, an app can affect the tile’s appearance in several ways.

This includes directly or periodically updating text and image content that is displayed within the tile, updating numeric or glyph “badge” content on the tile, or even creating secondary tiles that provide users the opportunity to directly access specific app functionality from their Windows Start screen.

Updating the Live Tile Content

Through updates to live tile content, an app can be made to seem alive and engaging, even when the app itself isn’t actually running. Tiles can be updated immediately, on a predetermined repeating schedule, or at a set time. They can even be set up to cycle through a rotating queue of up to five tile designs. Both the standard and wide tile contents can be updated in these ways.

A tile’s contents are defined by using XML that specifies a combination of text and images that are to be displayed. This XML is based on a set of predefined templates provided by Windows.

There are 46 predefined template types—10 square and 36 wide—which can be chosen for tile layouts. Some of these layouts are considered “peek” layouts; their content includes an image that fills the tile and is scrolled in and out with alternate content that includes some text and perhaps an additional image. There are four square and 14 wide layouts that support peek.

Figure 21: An Updated Tile and the Corresponding XML Template

In addition to text and image information, a tile can also include a “branding” setting. A tile’s branding indicates whether the content in the lower corner of the tile (lower left corner in left-to- right languages) will display the app’s small logo, the app’s title, or no content whatsoever. The small logo is the default.

Immediate Tile Updates

The first step in specifying a tile update is to define the XML to be used to define the tile’s contents. The XML for each template can be found in the tile template catalog, which is available at http://msdn.microsoft.com/en-us/library/windows/apps/Hh761491.aspx. This XML can be compiled by hand, or the GetTemplateContent static method of the

TileUpdateManager class can be used to provide the basic XML for each template, which can then be filled in with the values to be displayed. Once the XML is defined, call the Update method on an instance of the application’s TileUpdater, which is retrieved from the TileUpdateManager class, with a TileNotification object that includes the XML, and optionally an expiration time for the tile. Note that if the app includes a wide tile, the notification should include populated templates for both the square and wide tiles, making it necessary to merge the XML. The following code shows an immediate tile update performed this way for an app that includes both wide and square tiles, with the tile set to expire two hours from when it is first shown (when it expires, it reverts to the app’s original tile):

// Ensure updates are enabled.

var updater = TileUpdateManager.CreateTileUpdaterForApplication();

if (updater.Setting == NotificationSetting.Enabled) {

// Get the default XML for the desired tile template.

var tileSquareXml =

TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText01);

// Locate the elements to be modified.

var textSquareElements = tileSquareXml.GetElementsByTagName("text").ToList();

// More detailed searching of XML for specific attributes omitted for brevity...

textSquareElements[0].InnerText = "Heading";

textSquareElements[1].InnerText = "Subheading 1";

textSquareElements[2].InnerText = "Subheading 2";

textSquareElements[3].InnerText = "Subheading 3";

// Get the default XML for the desired tile template.

var tileWideXml =

TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText01);

// Locate the elements to be modified.

var textWideElements = tileWideXml.GetElementsByTagName("text").ToList();

textWideElements[0].InnerText = "Wide Heading";

textWideElements[1].InnerText = "Wide Subheading 1";

textWideElements[2].InnerText = "Wide Subheading 2";

textWideElements[3].InnerText = "Wide Subheading 3";

// Inject the wide binding node contents into the visual element of the Square XML.

var wideBindingNode = tileWideXml.GetElementsByTagName("binding").First();

var squareVisualNode = tileSquareXml.GetElementsByTagName("visual").First();

var importNode = tileSquareXml.ImportNode(wideBindingNode, true);

squareVisualNode.AppendChild(importNode);

var notification = new TileNotification(tileSquareXml);

notification.ExpirationTime = DateTimeOffset.Now.AddHours(2);

updater.Update(notification);

}

Note that this code first performs a check to ensure that updates are enabled. Users can disable tile updates on a tile-by-tile basis by selecting the tile in the Start screen and selecting Turn live tile off from the app bar. If a live tile’s updates are disabled, they can be re-enabled by selecting Turn live tile on.

Note: This process of locating an XML template, looking up the corresponding XML in the MSDN documentation, and writing code based on that schema can be time

consuming and prone to error. The App tiles and badges sample published by Microsoft includes the NotificationsExtensions project which can be used to build a reusable WinMD component. The sample can be obtained at

http://code.msdn.microsoft.com/windowsapps/app-tiles-and-badges-sample-5fc49148, and instructions for how to use it in a Visual Studio project can be found at

http://msdn.microsoft.com/en-us/library/windows/apps/Hh969156.aspx. This component provides a strongly typed object model for populating tile, badge, and toast templates, and as a result also provide IntelliSense and compile-time support to help prevent errors.

The remaining discussion and examples in this chapter will make use of this component for its template definitions.

The previous code shows the same immediate tile update performed using the NotificationExtensions helper class.

// Ensure updates are enabled.

var updater = TileUpdateManager.CreateTileUpdaterForApplication();

if (updater.Setting == NotificationSetting.Enabled) {

// Prepare the square tile.

var tileSquareUpdate =

NotificationsExtensions.TileContent.TileContentFactory.CreateTileSquareText01();

tileSquareUpdate.TextHeading.Text = "Heading";

tileSquareUpdate.TextBody1.Text = "Subheading 1";

tileSquareUpdate.TextBody2.Text = "Subheading 2";

tileSquareUpdate.TextBody3.Text = "Subheading 3";

// Prepare the wide tile.

var tileWideUpdate =

NotificationsExtensions.TileContent.TileContentFactory.CreateTileWideText01();

tileWideUpdate.TextHeading.Text = "Wide Heading";

tileWideUpdate.TextBody1.Text = "Wide Subheading 1";

tileWideUpdate.TextBody2.Text = "Wide Subheading 2";

tileWideUpdate.TextBody3.Text = "Wide Subheading 3";

// Inject the square tile contents into the wide tile.

tileWideUpdate.SquareContent = tileSquareUpdate;

// Send the notification.

var notification = tileWideUpdate.CreateNotification();

notification.ExpirationTime = DateTimeOffset.Now.AddHours(2);

updater.Update(notification);

}

Queued Tile Updates

In addition to setting a single tile update, it is also possible to queue up to five tiles that Windows will automatically cycle through. This is known as queuing, and simply requires that queuing be enabled. Windows will cycle through the five most recent tile updates, with the exception that tiles with the same Tag value will replace each other. The following code shows three tile sets being built up and queuing being enabled through a call to EnableNotificationQueue:

Scheduled Updates

The previous sections have discussed making immediate changes to the application tiles.

Another option is for the tile to be updated at a later, predetermined time. In this case, the tile XML and a delivery time are used to create a ScheduledTileNotification, and instead of calling Update on the application’s TileUpdater instance, the ScheduledTileNotification is passed to a call to AddToSchedule, as shown in the following code:

// Build up a list of tiles to be queued.

// Build the first tiles.

var tileSquareUpdate = TileContentFactory.CreateTileSquareText01();

tileSquareUpdate.TextHeading.Text = "Queue 1";

tileSquareUpdate.TextBody1.Text = "Subheading Q1-1";

tileSquareUpdate.TextBody2.Text = "Subheading Q1-2";

tileSquareUpdate.TextBody3.Text = "Subheading Q1-3";

var tileWideUpdate = TileContentFactory.CreateTileWideText01();

tileWideUpdate.TextHeading.Text = "Wide Queue 1";

tileWideUpdate.TextBody1.Text = "Wide Subheading Q1-1";

tileWideUpdate.TextBody2.Text = "Wide Subheading Q1-2";

tileWideUpdate.TextBody3.Text = "Wide Subheading Q1-3";

tileWideUpdate.SquareContent = tileSquareUpdate;

updater.Update(tileWideUpdate.CreateNotification());

// Build the second tiles.

var tileSquareUpdate2 = TileContentFactory.CreateTileSquarePeekImageAndText01();