The tile template catalog (Windows Runtime apps)

08/31/2015

64 minutes to read

In this article

This topic lists the tile templates available for use in a tile notification, with pictorial examples of each for both Windows and Windows Phone 8.1. Select a template name from the list to be shown its details, such as sample XML content, versioned names, and image sizes.

Note When displayed on Windows Phone 8.1, certain template types do not act as they do when displayed on Windows. Peek templates on the phone flip from front to back rather than scrolling up and down and image collection tiles have an animated checkerboard pattern.

TileSquare150x150Image

TileSquare150x150Block

TileSquare150x150Text01

TileSquare150x150Text02

TileSquare150x150Text03

TileSquare150x150Text04

TileSquare150x150PeekImageAndText01

TileSquare150x150PeekImageAndText02

TileSquare150x150PeekImageAndText03

TileSquare150x150PeekImageAndText04

TileWide310x150Image

TileWide310x150ImageCollection

TileWide310x150ImageAndText01

TileWide310x150ImageAndText02

TileWide310x150BlockAndText01

TileWide310x150BlockAndText02

TileWide310x150PeekImageCollection01

TileWide310x150PeekImageCollection02

TileWide310x150PeekImageCollection03

TileWide310x150PeekImageCollection04

TileWide310x150PeekImageCollection05

TileWide310x150PeekImageCollection06

TileWide310x150PeekImageAndText01

TileWide310x150PeekImageAndText02

TileWide310x150PeekImage01

TileWide310x150PeekImage02

TileWide310x150PeekImage03

TileWide310x150PeekImage04

TileWide310x150PeekImage05

TileWide310x150PeekImage06

TileWide310x150SmallImageAndText01

TileWide310x150SmallImageAndText02

TileWide310x150SmallImageAndText03

TileWide310x150SmallImageAndText04

TileWide310x150SmallImageAndText05

TileWide310x150Text01

TileWide310x150Text02

TileWide310x150Text03

TileWide310x150Text04

TileWide310x150Text05

TileWide310x150Text06

TileWide310x150Text07

TileWide310x150Text08

TileWide310x150Text09

TileWide310x150Text10

TileWide310x150Text11

TileSquare310x310BlockAndText01

TileSquare310x310BlockAndText02

TileSquare310x310Image

TileSquare310x310ImageAndText01

TileSquare310x310ImageAndText02

TileSquare310x310ImageAndTextOverlay01

TileSquare310x310ImageAndTextOverlay02

TileSquare310x310ImageAndTextOverlay03

TileSquare310x310ImageCollectionAndText01

TileSquare310x310ImageCollectionAndText02

TileSquare310x310ImageCollection

TileSquare310x310SmallImagesAndTextList01

TileSquare310x310SmallImagesAndTextList02

TileSquare310x310SmallImagesAndTextList03

TileSquare310x310SmallImagesAndTextList04

TileSquare310x310SmallImagesAndTextList05

TileSquare310x310SmallImageAndText01

TileSquare310x310Text01

TileSquare310x310Text02

TileSquare310x310Text03

TileSquare310x310Text04

TileSquare310x310Text05

TileSquare310x310Text06

TileSquare310x310Text07

TileSquare310x310Text08

TileSquare310x310Text09

TileSquare310x310TextList01

TileSquare310x310TextList02

TileSquare310x310TextList03

TileSquare71x71Image

TileSquare71x71IconWithBadge

TileSquare150x150IconWithBadge

TileWide310x150IconWithBadgeAndText

Medium tiles

Medium tiles are square and contain either only an image or only text. Medium peek tiles enable you to combine images and text in an animated tile.

Medium text-only templates

Medium image-only templates

Medium peek templates

Medium text-only templates

TileSquareBlock/TileSquare150x150Block

TileSquareText01/TileSquare150x150Text01

TileSquareText02/TileSquare150x150Text02

TileSquareText03/TileSquare150x150Text03

TileSquareText04/TileSquare150x150Text04

TileSquareBlock/TileSquare150x150Block

Windows: One string of large block text (generally numerical) over a single, short line of regular text.

Windows Phone 8.1: One short string of large block text (generally numerical) in the lower right corner, to the left of a single, very short line of regular text.

TileWideText07/TileWide310x150Text07

Note Windows only; not supported on Windows Phone 8.1

One header string in larger text over eight short strings of regular text arranged in two columns of four lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText10, but the first column is wider.

Important If this template is sent to Windows Phone 8.1, it causes the tile to revert to its default image.

TileWideText08/TileWide310x150Text08

Note Windows only; not supported on Windows Phone 8.1

Ten short strings of regular text arranged in two columns of five lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText11, but the first column is wider.

Important If this template is sent to Windows Phone 8.1, it causes the tile to revert to its default image.

TileWideText10/TileWide310x150Text10

Note Windows only; not supported on Windows Phone 8.1

One header string in larger text over eight short strings of regular text arranged in two columns of four lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText07, but the first column is narrower.

Important If this template is sent to Windows Phone 8.1, it causes the tile to revert to its default image.

TileWideText11/TileWide310x150Text11

Note Windows only; not supported on Windows Phone 8.1

Ten short strings of regular text arranged in two columns of five lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText08, but the first column is narrower.

Important If this template is sent to Windows Phone 8.1, it causes the tile to revert to its default image.

TileWideImageAndText01/TileWide310x150ImageAndText01

One wide image over one string of regular text wrapped over a maximum of two lines (one line on Windows Phone). The width of the text area depends on whether a logo is displayed.

Note This template allows branding only as "logo" or "none", but not "name". If you set the branding attribute to "name", it will automatically revert to "logo" on Windows or "none" on Windows Phone 8.1.

Image sizes per scale (in pixels) on Windows

TileWideImageAndText02/TileWide310x150ImageAndText02

Windows: One wide image over two strings of regular text on two lines. Text does not wrap. The width of the text area depends on whether a logo is displayed.

Windows Phone 8.1: One wide image over one string of regular text on one line. Text does not wrap. The second string is ignored. The width of the text area depends on whether a logo is displayed.

Note This template allows branding only as "logo" or "none", but not "name". If you set the branding attribute to "name", it will automatically revert to "logo" on Windows or "none" on Windows Phone 8.1.

Image sizes per scale (in pixels) on Windows

Image ID

80%

100%

140%

180%

1

64x64

80x80

112x112

144x144

TileWideSmallImageAndText05/TileWide310x150SmallImageAndText05

On the left, one header string in larger text over one string of regular text wrapped over a maximum of four lines; on the right, one small rectangular (3x4) image. Images wider than the image area will be cropped.

Image sizes per scale (in pixels) on Windows

Wide peek templates

Note Peek templates on the phone flip between the two section rather than scrolling up and down between them.

TileWidePeekImageCollection01/TileWide310x150PeekImageCollection01

TileWidePeekImageCollection02/TileWide310x150PeekImageCollection02

TileWidePeekImageCollection03/TileWide310x150PeekImageCollection03

TileWidePeekImageCollection04/TileWide310x150PeekImageCollection04

TileWidePeekImageCollection05/TileWide310x150PeekImageCollection05

TileWidePeekImageCollection06/TileWide310x150PeekImageCollection06

TileWidePeekImageAndText01/TileWide310x150PeekImageAndText01

TileWidePeekImageAndText02/TileWide310x150PeekImageAndText02

TileWidePeekImage01/TileWide310x150PeekImage01

TileWidePeekImage02/TileWide310x150PeekImage02

TileWidePeekImage03/TileWide310x150PeekImage03

TileWidePeekImage04/TileWide310x150PeekImage04

TileWidePeekImage05/TileWide310x150PeekImage05

TileWidePeekImage06/TileWide310x150PeekImage06

TileWidePeekImageCollection01/TileWide310x150PeekImageCollection01

Windows: Top: One large square image with four smaller square images to its right, no text. Note that the large image is not quite square; it is slightly wider than it is tall. If you supply a square image, the image will be scaled for width and slightly cropped on the top and bottom.

Windows Phone 8.1: Front: The images appear in a 6x3 set of tessellated, flipping blocks. An image might take up one block or four. Images are shown randomly, moving among blocks of various solid colors.

Bottom/Back: One header string in larger text over one string of regular text wrapped over a maximum of four lines.

Image sizes per scale (in pixels) on Windows

Image ID

80%

100%

140%

180%

1

128x120

160x150

224x210

288x270

2,3,4,5

60x60

75x75

105x105

135x135

TileWidePeekImageCollection02/TileWide310x150PeekImageCollection02

Windows: Top: One large square image with four smaller square images to its right, no text. Note that the large image is not quite square; it is slightly wider than it is tall. If you supply a square image, the image will be scaled for width and slightly cropped on the top and bottom.

Windows Phone 8.1: Front: The images appear in a 6x3 set of tessellated, flipping blocks. An image might take up one block or four. Images are shown randomly, moving among blocks of various solid colors.

Bottom/Back: One header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap.

Image sizes per scale (in pixels) on Windows

Image ID

80%

100%

140%

180%

1

128x120

160x150

224x210

288x270

2,3,4,5

60x60

75x75

105x105

135x135

TileWidePeekImageCollection03/TileWide310x150PeekImageCollection03

Windows: Top: One large square image with four smaller square images to its right, no text. Note that the large image is not quite square; it is slightly wider than it is tall. If you supply a square image, the image will be scaled for width and slightly cropped on the top and bottom.

Windows Phone 8.1: Front: The images appear in a 6x3 set of tessellated, flipping blocks. An image might take up one block or four. Images are shown randomly, moving among blocks of various solid colors.

Bottom/Back: One string of large text wrapped over a maximum of three lines.

Image sizes per scale (in pixels) on Windows

Image ID

80%

100%

140%

180%

1

128x120

160x150

224x210

288x270

2,3,4,5

60x60

75x75

105x105

135x135

TileWidePeekImageCollection04/TileWide310x150PeekImageCollection04

Windows: Top: One large square image with four smaller square images to its right, no text. Note that the large image is not quite square; it is slightly wider than it is tall. If you supply a square image, the image will be scaled for width and slightly cropped on the top and bottom.

Windows Phone 8.1: Front: The images appear in a 6x3 set of tessellated, flipping blocks. An image might take up one block or four. Images are shown randomly, moving among blocks of various solid colors.

Bottom/Back: One string of regular text wrapped over a maximum of five lines.

Image sizes per scale (in pixels) on Windows

Image ID

80%

100%

140%

180%

1

128x120

160x150

224x210

288x270

2,3,4,5

60x60

75x75

105x105

135x135

TileWidePeekImageCollection05/TileWide310x150PeekImageCollection05

Windows

Top: One large square image with four smaller square images to its right, no text. Note that the large image is not quite square; it is slightly wider than it is tall. If you supply a square image, the image will be scaled for width and slightly cropped on the top and bottom.

Bottom: On the left, one small image; on the right, one header string of larger text on the first line over one string of regular text wrapped over a maximum of four lines.

Windows Phone 8.1

Front: The images appear in a 6x3 set of tessellated, flipping blocks. An image might take up one block or four. Images are shown randomly, moving among blocks of various solid colors.

Back: One header string of larger text on the first line over one string of regular text wrapped over a maximum of four lines.

TileSquare310x310Text02

Note Windows only; not supported on Windows Phone 8.1

One header string in larger text over eighteen short strings arranged in two columns of nine lines each. Columns are of equal width. This template is similar to TileSquare310x310Text05 and TileSquare310x310Text07, but those templates use columns of unequal width.

Note This template requires the visual element to declare version="2".

TileSquare310x310Text04

Note Windows only; not supported on Windows Phone 8.1

Twenty-two short strings of regular text, arranged in two columns of eleven lines each. Columns are of equal width. This template is similar to TileSquare310x310Text06 and TileSquare310x310Text08, but those templates use columns of unequal width.

Note This template requires the visual element to declare version="2".

TileSquare310x310Text05

Note Windows only; not supported on Windows Phone 8.1

One header string in larger text over eighteen short strings of regular text arranged in two columns of nine lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileSquare310x310Text07, which has an even narrower first column, and TileSquare310x310Text02, which has columns of equal width.

Note This template requires the visual element to declare version="2".

TileSquare310x310Text06

Note Windows only; not supported on Windows Phone 8.1

Twenty-two short strings of regular text arranged in two columns of eleven lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileSquare310x310Text08, which has an even narrower first column, and TileSquare310x310Text04, which has columns of equal width.

Note This template requires the visual element to declare version="2".

TileSquare310x310Text07

Note Windows only; not supported on Windows Phone 8.1

One header string in larger text over eighteen short strings of regular text arranged in two columns of nine lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileSquare310x310Text05, which has a wider first column, and TileSquare310x310Text02, which has columns of equal width.

Note This template requires the visual element to declare version="2".

TileSquare310x310Text08

Note Windows only; not supported on Windows Phone 8.1

Twenty-two short strings of regular text arranged in two columns of eleven lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileSquare310x310Text06, which has a wider first column, and TileSquare310x310Text04, which has columns of equal width.

Note This template requires the visual element to declare version="2".

TileSquare310x310Text09

Note Windows only; not supported on Windows Phone 8.1

One line of header text wrapped over a maximum of two lines. Beneath are two more, slightly separated lines of header text, each one line only. At the bottom are two lines of regular text, each of one line only.

Note This template requires the visual element to declare version="2".

Image sizes per scale (in pixels) on Windows

The leftmost pixel of image 2 and the rightmost pixel of images 4 and 5 are obscured by a border.

Large image-and-text templates

TileSquare310x310BlockAndText02

TileSquare310x310ImageAndText01

TileSquare310x310ImageAndText02

TileSquare310x310ImageAndTextOverlay01

TileSquare310x310ImageAndTextOverlay02

TileSquare310x310ImageAndTextOverlay03

TileSquare310x310ImageCollectionAndText01

TileSquare310x310ImageCollectionAndText02

TileSquare310x310SmallImagesAndTextList01

TileSquare310x310SmallImagesAndTextList02

TileSquare310x310SmallImagesAndTextList03

TileSquare310x310SmallImagesAndTextList04

TileSquare310x310SmallImagesAndTextList05

TileSquare310x310SmallImageAndText01

TileSquare310x310BlockAndText02

Note Windows only; not supported on Windows Phone 8.1

One string of large block text (this should be numerical); two lines of large header text (no wrap); two sets of two strings in two lines (no wrap). Image in the background. If the text color is light, the image is darkened a bit to improve the text visibility.

Note This template requires the visual element to declare version="2".

Image sizes per scale (in pixels) on Windows

Image ID

80%

100%

140%

180%

1

248x200

310x250

434x350

558x450

TileSquare310x310ImageAndTextOverlay01

Note Windows only; not supported on Windows Phone 8.1

Background: a single image that fills the entire tile. Foreground: One string of text wrapped over a maximum of three lines. If the text color is light, the image is darkened a bit to improve the text visibility.

Note This template requires the visual element to declare version="2".

Image sizes per scale (in pixels) on Windows

Image ID

80%

100%

140%

180%

1

248x248

310x310

434x434

558x558

TileSquare310x310ImageAndTextOverlay02

Note Windows only; not supported on Windows Phone 8.1

Background: a single image that fills the entire tile. Foreground: At the top, one string of large text wrapped over a maximum of two lines; at the bottom, one string of regular text wrapped over a maximum of three lines. If the text color is light, the image is darkened a bit to improve the text visibility.

Note This template requires the visual element to declare version="2".

Image sizes per scale (in pixels) on Windows

Image ID

80%

100%

140%

180%

1

248x248

310x310

434x434

558x558

TileSquare310x310ImageAndTextOverlay03

Note Windows only; not supported on Windows Phone 8.1

Background: a single image that fills the entire tile. Foreground: At the top, one string of large text wrapped over a maximum of two lines; at the bottom, three strings of regular text on three lines that do not wrap. If the text color is light, the image is darkened a bit to improve the text visibility.

Note This template requires the visual element to declare version="2".

Image sizes per scale (in pixels) on Windows

Image ID

80%

100%

140%

180%

1

248x248

310x310

434x434

558x558

TileSquare310x310ImageCollectionAndText01

Note Windows only; not supported on Windows Phone 8.1

TileSquare310x310ImageCollection with the addition of a text ribbon across the bottom of the tile. The text area contains one string of regular text wrapped over a maximum of two lines. Note that the small images cut off the top of the large image while the text area cuts off the bottom of the image. The width of the text area depends on whether a logo is displayed.

Note This template allows branding only as "logo" or "none", but not "name". If you set the branding attribute to "name", it will automatically revert to "logo".

Note This template requires the visual element to declare version="2".

Image sizes per scale (in pixels) on Windows

The leftmost pixel of image 2 and the rightmost pixel of images 4 and 5 are obscured by a border.

TileSquare310x310ImageCollectionAndText02

Note Windows only; not supported on Windows Phone 8.1

TileSquare310x310ImageCollection with the addition of a text ribbon across the bottom of the tile. The text area contains two strings of regular text on two lines. Text does not wrap. Note that the small images cut off the top of the large image while the text area cuts off the bottom of the image. The width of the text area depends on whether a logo is displayed.

Note This template allows branding only as "logo" or "none", but not "name". If you set the branding attribute to "name", it will automatically revert to "logo".

Note This template requires the visual element to declare version="2".

Image sizes per scale (in pixels) on Windows

Image ID

80%

100%

140%

180%

1,2,3

36x52

45x65

63x91

81x117

TileSquare310x310SmallImagesAndTextList05

Note Windows only; not supported on Windows Phone 8.1

One line of header text across the top, over three sets of information, each of which consists of one small square image to the left of one header string in larger text over two strings of regular text on the next two lines. Text does not wrap.

Note This template requires the visual element to declare version="2".

Image sizes per scale (in pixels) on Windows

Image ID

80%

100%

140%

180%

1,2,3

48x48

60x60

84x84

108x108

TileSquare310x310SmallImageAndText01

Note Windows only; not supported on Windows Phone 8.1

One medium-sized image in the upper left corner (upper right on right-to-left systems) over a single, unwrapped header string. Beneath this are two sets of regular text: the first wrapped over a maximum of two lines, the second a single line only.

Note This template requires the visual element to declare version="2".

Image sizes per scale (in pixels) on Windows

100%

71x71

140%

100x100

240%

171x171

300%

213x213

400%

284x284

Some values are rounded up to the nearest pixel, but rounding down is equally valid.

TileSquare71x71IconWithBadge

Note Windows Phone only

A single icon image. The icon image's background should be transparent to allow the tile color to show through. A badge is shown to the right of the image, and the image should be sized to allow that badge to have enough room. Unlike other example images on this page, the badge (in this case, the number 36) is included here. This template, being the small tile size, cannot display the app name or logo declared in your manifest.

Important The tile content and the badge are sent through separate notifications. Think of the badge more as an overlay than as part of the tile's XML content.

Note This template requires the visual element to declare version="3".

TileSquare150x150IconWithBadge

Note Windows Phone only

A single icon image. The icon image's background should be transparent to allow the tile color to show through. A badge is shown to the right of the image, and the image should be sized to allow that badge to have enough room. Unlike other example images on this page, the badge (in this case, the number 36) is included here.

Important The tile content and the badge are sent through separate notifications. Think of the badge more as an overlay than as part of the tile's XML content.

Note This template requires the visual element to declare version="3".

TileWide310x150IconWithBadgeAndText

Note Windows Phone only

In the lower right corner, a single icon image. The icon image's background should be transparent to allow the tile color to show through. A badge is shown to the right of the image. Unlike other example images on this page, the badge (in this case, the number 36) is included here.

Note If no text elements are specified in this template, the icon image and badge are centered in the tile.

In the upper right corner, one header string in larger text on the first line, two strings of regular text on the next two lines. Text does not wrap.

Important The tile content and the badge are sent through separate notifications. Think of the badge more as an overlay than as part of the tile's XML content.

Note This template requires the visual element to declare version="3".

Versioned templates

Windows 8.1 added new templates for large, square tiles. To distinguish large tiles from medium tiles (known as square tiles in Windows 8), all of the older templates were renamed, leading to the use of versioned templates.

Version 1 notifications are declared by setting the version attribute of the XML payload's visual element to "1" or omitting the attribute altogether. Version 1 notifications meet the Windows 8 definition—original template names and schema elements. Version 1 notifications do not recognize any later template names, which includes all of the large and phone-only templates.

When Windows 8.1 or Windows Phone 8.1 receives a notification that contains a version 1 payload, it recognizes the older template name, substitutes the newer name in its place, and processes the notification normally. However, because a version 1 notification cannot include a binding for a large tile, if the user has sized the app's tile to large, the notification cannot be displayed.

Version 2 notifications are declared by setting the version attribute of the visual to "2". Version 2 notifications recognize the large templates, the new template names, and the fallback attribute of the binding element. In a version 2 notification payload, the old template names are only recognized in the fallback attribute. The template attribute must be set to one of the new template names.

Version 3 notifications differ little from version 2 notifications, except that they recognize the phone-only templates.

How the fallback attribute is used

You can use the version and fallback attributes to send a notification that can be recognized whether it's received by a Windows 8 client or a Windows 8.1 or Windows Phone 8.1 client.

When a Windows 8 device receives a version 2 or 3 visual element, it will not recognize the template value because it only recognizes the older template names. When Windows sees version="2" or version="3" in the payload, it knows to look for the fallback attribute for a recognized value. If the fallback attribute for the binding that matches the tile's current size is missing or contains an unrecognized template name, the notification is not shown; otherwise, the template name specified in the fallback attribute is used and the notification is processed normally.

The phone-only and large templates do not have a fallback value.

Image sizes

Exact sizes are given for each image in each template for each supported scale. You are not required to provide images that specifically match those sizes, but images that do not are scaled and cropped as necessary. For more information, see Tile and toast image sizes.

However, because of time or resources, you might not want or need to supply a full set of assets. In that case, you're going to be inclined to supply the 100% image, since that size is right in the template name, but that would not be ideal. We recommend including the following assets for optimum results. If you only supply a single asset, it should be the larger of the two.

Platform

Recommended assets

Windows

180%, 140%

Windows Phone

240%, 140%

Important Images are sized and cropped differently on Windows and Windows Phone 8.1, so the same image in the same template might appear differently on the different devices if sizing or cropping is required.

Remarks

Note that when they are displayed on a device set to a right-to-left (RTL) language, templates are generally flipped right-to-left as well.