Tiles Overview for Windows Phone

Starting in Windows Phone OS 7.1, Tiles are two sided. Tiles display information by flipping between the “front” and “back” sides of the Tile. If none of the properties on the back side of the Tile are set, the Tile will not flip over and only the front side of the Tile will be displayed. When setting these properties using ShellTile or Push Notifications, any property that is not given a new value will retain its current value.

For specific guidelines about how to design your Tile, see the Start Tiles section in Essential Graphics, Visual Indicators, and Notifications for Windows Phone. For certification guidelines on Tiles, see Application Certification Requirements for Windows Phone.

The following figure shows what the front of a Tile looks like.

The properties of an Application Tile and a secondary Tile are the same. The properties of the front of a Tile are:

• Title. A string indicating the title of the application. The Title must fit on a single line of text and should not be wider than the actual Tile. Approximately 15 characters will fit in the title before being truncated.

• BackgroundImage. An image displayed on the front of the Tile. We recommend that you always have a background image on the front of the Tile.

• Count (also known as Badge). An integer value from 1 to 99. If the value of Count is not set or it is set to 0, the circle image and value will not display in the Tile.

The following figure shows what the back of a Tile looks like.

The properties of the back of a Tile are:

• BackTitle. A string displayed at the bottom of the back of a Tile. The BackTitle must fit on a single line of text and should not be wider than the actual Tile. Approximately 15 characters will fit in the title before being truncated.

• BackBackgroundImage. An image displayed on the back of the Tile.

• BackContent. A string displayed in the body of the back of a Tile. Approximately 40 characters will fit in the Tile before being truncated.

Important Note:

When creating a secondary Tile, the BackgroundImage and the BackBackgroundImage images must be created using a local resource. Updates to the secondary Tile or Application Tile can be done using a local or remote image. Local resources must be installed as part of the XAP package or be in isolated storage. If the URI references an image that was stored in isolated storage, then the image must be in the Shared\ShellContent folder. For more information, see Isolated Storage Overview for Windows Phone.

Some additional notes on the images used for the BackgroundImage and the BackBackgroundImage properties:

• Tile images can be either a .jpg or .png file.

• Because of network variability and performance reasons, consider using local resources for Tile images.

• Using a .png with transparent portions to the image will allow the users theme color to show through.

• Tiles are 173 x 173 pixels. If the image you provide has different dimensions, it will be stretched to fit 173 x 173.

• https is not supported for remote images.

• Remote images are limited to 80 KB or less or they will not be downloaded.

• Remote images must download in 30 seconds or less or they will not be downloaded.

• If the BackGround or BackBackGround images fail to load for any reason, none of the other properties set in the update will be changed either.

The following table and code sample explain how to clear the property for each Tile property so that it will not be displayed. However, we recommend that you always have a background image on the front of the Tile.

StandardTileData NewTileData = new StandardTileData
    {
        Title = "",
        BackgroundImage = new Uri("", UriKind.Relative),
        Count = 0,
        BackTitle = "",
        BackBackgroundImage = new Uri("", UriKind.Relative),
        BackContent = ""
    };

Caution:
During the development process, after you have deployed a version of your solution, it may be necessary to update the art for your Tile or application icon. When you redeploy the updated solution, the updated art may not be immediately visible on the device or emulator. To observe the updates, scroll the application list, scroll Start, or perform a soft reset of the phone or emulator.

It is not possible to update your Tile with animations or sound. The placement of the Tile properties is not customizable.

Working With Tiles

Reference