Tiles and Notifications in Windows Phone 8

30 Oct

The tile is the front door to your app. A nice tile can mean the world to your app and the usage of it. Some developers/companies manage to use this opportunity and make great static and living tiles.

New Tile Sizes

With Windows Phone 8 we have a new set of sizes and templates available for our tiles. The user have the opportunity to customize the size of the tile based on three sizes: small, medium and wide. It is required to implement small and medium sizes tiles but wide is optional. The supported sizes is set using the redesigned Manifest file.


Screenshot from Visual Studio 2012

Windows Phone 8 supports multi resolutions. Tile icons (and app icons) are defined for WXGA (768×1280) and are automatically scaled to work for WVGA and 720p.

New Templates

Windows Phone 8 supports three templates: flip, iconic and cycle.

It is not possible to update the template for the default tile programmatically – it will require and update of the app. The template for secondary tiles can be updated programmatically. Furthermore it is not possible to know which tile size the user has pinned to the start screen so all properties should be set for the supported tile sizes.

Flip Template

The flip tile template flips from front to back and support all three available sizes: small, medium and wide. The properties for the flip tile template is available using the FlipTileData class.


Image is taken from the SDK help file.

The small flip tile is 159×159 pixels and only allows a small background image (SmallBackgroundImage) and a counter (Count).

The medium flip tile is 336×336 pixels and allows a background image (BackgroundImage), title (Title) and counter (Count) on one size and a backbackground image (BackBackgroundImage), back title (BackTitle) and back content (BackContent) on the other side.

The wide flip tile is 691×336 pixels and allows a background image (WideBackgroundImage), title (Title) and counter (Count) on one size and a backbackground image (WideBackBackgroundImage), back title (BackTitle) and back content (WideBackContent) on the other side.

Iconic Template

The iconic tile template displays an image in the center of the tile and support all three available sizes: small, medium and wide. The properties for the iconic tile template is available using the IconicTileData class.


Image is taken from the SDK help file.

The small iconic tile is 159×159 pixels and only allows a small icon image (SmallIconImage) and a counter (Count). The icon size is 110×110 pixels.

The medium iconic tile is 336×336 pixels and allows an icon image (IconImage), title (Title), background (BackgroundColor) and counter (Count). The icon size is 202×202 pixels.

The wide iconic tile is 691×336 pixels and allows a small icon image (SmallIconImage), title (Title), counter (Count) and three lines of content (WideContent1, WideContent2, WideContent3). The icon size is the same as the small iconic tile.

Cycle Template

The cycle tile template cycles between 1 and 9 images and support all three available sizes: small, medium and wide. The properties for the cycle tile template is available using the CycleTileData class.


Image is taken from the SDK help file.

The small cycle iconic tile is 159×159 pixels and only allows a small background image (SmallBackgroundImage) and a counter (Count).

The medium cycle tile is 336×336 pixels and allows a title (Title), counter (Count) and between 1 and 9 background images (CycleImage1, CycleImage2…).

The wide cycle tile is 691×336 pixels and allows the same properties as the medium cycle tile.

// thomas

2 Responses to “Tiles and Notifications in Windows Phone 8”

  1. Claus Jørgensen January 3, 2013 at 01:28 #

    Hey, while your tile sizes for the IconicTemplate is technically correct, it’s essentially wrong, as you’ll not be able to utilize all the pixels when also having a count and/or a message.

    See my answer on http://stackoverflow.com/a/12958512/95309 for the correct resolutions to use for the IconicTemplate.

Trackbacks/Pingbacks

  1. Windows Phone 8 SDK is now available « xamlgeek - October 30, 2012

    […] Tiles and Notifications in Windows Phone 8 […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: