Tile and tile notification overview (Windows Runtime apps)

This topic discusses the concepts and terminology surrounding app tiles, which are the Start screen tiles that represent and launch your app. An app tile is more than a big icon; it has the ability to display a continuously changing set of content that can be used to keep the user aware of events associated with that app (such as new social networking posts, new news headlines, or stock quotes) when the app is not running. A tile notification can originate either from a local API call or from the cloud. An interesting and useful tile can give a user incentive to launch your app, and this aspect of your app development should not be slighted.

Tiles and tile notifications

Tiles are available in several sizes: small, medium, wide, and large. Most sizes can display text, images, app branding—either an app logo or a name—and notification badges. A default tile, in as many sizes as the app supports, is included in the app package. The user can change a tile at any time to any supported size, to personalize their Start screen.

The following illustration shows the Start screen with medium and wide tiles.

The content of a tile is defined in XML, based on a set of templates provided by Windows. To define a tile's contents, you can simply fill in one of the templates with your own text and images. You can also use the NotificationsExtensions library (recommended), or create the XML payload from scratch and provide it as a string (not recommended).

Depending on the template you select, your tile can contain text, images, or both. It can also display a badge and either a logo or a short name. The badge is displayed in the lower right corner and the logo or short name in the lower left. You can see examples of badges, logos, and names in the illustration above.

Note  Windows Phone Store apps do not have the option of displaying the logo on the tile, and the badge is shown in the upper right corner.

Note  Although a badge is shown on a tile, it is not part of the tile's XML content and is not affected by tile updates. Badges have their own XML schema and are independently updated through their own set of APIs.

 

By default, push, periodic, and scheduled notifications expire three days from the time when they are provided. Local tile notifications do not expire, but they can, and usually should, be given an expiration time. Because some notifications can be time-sensitive, there comes a time when those notifications are no longer valid and you no longer want that content shown. By using the expiration time, you can tell your tile to remove that content from the tile if it is currently displayed or to ignore the notification if it arrives after the expiration time.

Working with tile templates

Tiles are based on a non-extensible set of Windows-provided XML templates. Each template contains some mix of an image or images and text of different sizes. Use of these templates enables an app to maintain the expected Windows look and feel in their notifications. A template supplies a framework for the necessary XML image and text elements that can be specified by a notification.

Tile templates for all tiles are available in two varieties: static and peek. The content of a peek tile scrolls up and down within the tile space to display the full communication; static tiles are fixed.

Note  Peek templates used in Windows Phone Store apps flip rather than scroll.

Default tiles

When your app is first installed, it displays a default tile in the Start screen. Generally, it is just a representation of your logo or other branding. In the illustration above, the tiles for Windows Internet Explorer and the Windows Store are default tiles. Your default tile is defined in your app's manifest file and is displayed until the tile is updated through its first notification. The tile reverts to the default whenever it has no other notification to display.

One choice that you make when you define your default tile has a permanent effect: if you do not provide a a particular logo image, the user cannot resize your app's tile to that size. Because notifications are size-specific, that means that your tile cannot receive a notification for a tile size with no logo image. This can only be changed by issuing an update to your app that includes the missing logo image for its default tile. If you include alternate tile sizes in your manifest, you can also declare which of them you would like the tile to use when it is installed, though the user has the option to change it after that time.

The default tile also optionally defines a background color for your tile, to associate with your brand or simply to differentiate your tile. This color choice is also reflected in other areas of the Windows UI:

  • The button color in any dialog box that is owned by your app
  • The App Description page in the Windows Store

Note  For Windows Phone Store apps, the color value "transparent" causes the tile to use the system's accent color, which is chosen by the user in Settings.

A tile notification is defined as an XML document whose elements are defined in the tile schema. Notifications can be sent to the tile by the app when it is running, retrieved periodically from a specified Uniform Resource Identifier (URI), or sent by a cloud-based service associated with the app. In the latter case, notifications are routed through the Windows Push Notification Services (WNS).

For a full list of available tile templates, with explanations of each, see The tile template catalog.

Cycling tile notifications

By default, a tile shows a single notification until that notification expires or a new notification arrives to replace it. When an app enables cycling on its tile, the system will automatically rotate through up to five current notifications on the tile. Generally, the oldest notification is replaced in the queue when a new notification arrives. However, notifications can be given a tag so that a new notification with a specific tag will replace an older notification with the same tag, regardless of its place in the queue. For instance, a notification that shows the bid on a certain auction can be replaced in the queue when the top bid changes.

Depending on the nature of your app and its notifications, you could potentially have outdated or duplicate notifications cycling on the tile. Tags can be used to prevent outdated notifications. For more information, see How to use the notification queue with local notifications.

Notifications will be shown at random with a bias toward new content. The display order is determined entirely by Windows; you should not depend on any specific display order.

Examples

  • Use cycling in a news app that sends five stories each day.
  • Use cycling in a news app that sends up to five supplementary images to illustrate a single story.
  • Use cycling with tags in a stock app that send three notifications every hour, each tagged for a specific stock.

Secondary tiles

A secondary tile allows a user to launch directly from the Start screen to a specific location or subexperience in an app. The app decides which content to offer as a pinning option, but the user chooses whether the secondary tile will be created or deleted. This lets a user personalize their Start screen with the experiences they use the most.

A secondary tile is independent of the main app tile and can receive tile notifications independently. When the secondary tile is activated, an activation context is presented to the parent app so that it can launch in the context of the secondary tile.

For more information on secondary tiles, see Secondary tiles overview.

App tiles and badges sample

Quickstart: Creating a default tile using the Visual Studio manifest editor

Quickstart: Sending a tile update

The tile template catalog

How to use the notification queue with local notifications

Guidelines and checklist for tiles and badges

Tiles XML schema

Windows.UI.Notifications API reference

Badge overview