This is the continuing series of the Windows 8 Store application development tutorial and in this chapter, we will learn about creating and updating the live tiles of your WinRT application. There are 46 different types of tile templates available which we will go to learn today.

A live tile is one of the best way to provide a good experience to your application which you will find in your Windows 8 Start screen. Continue for further reading.

If you open your Windows 8 system, the first screen that you will see in your screen is the Start Screen. The start screen consists of Windows Store application Live tiles and a set of desktop application icons. A live tile can consists of text and/or images to provide you live updates. You can turn on/off the live updates from the Application Bar which you can invoke by right tapping the tile.

By default, every application will have a 150 X 150 px logo which you can extend to a wide logo by providing 310 X 150 px image icon. User will be able to switch to wide logo and default logo if your application has wide logo set.

Live Tile Templates

There are total 46 different types of Live Tile template available which you can use to set your application live title. You can set a single text line, multiple text lines, single image, multiple image or a set of texts and image. There are 7 different categories available to set square and/or wide tiles as listed below:

Square text-only templates

Square image-only templates

Square peek templates

Wide text-only templates

Wide image-only templates

Wide image-and-text templates

Wide peek templates

Here is a list of all 46 different types of Live Tile templates for your Windows 8 Store Metro applications:

TileSquareImage

TileWidePeekImageAndText02

TileSquareBlock

TileWidePeekImage01

TileSquareText01

TileWidePeekImage02

TileSquareText02

TileWidePeekImage03

TileSquareText03

TileWidePeekImage04

TileSquareText04

TileWidePeekImage05

TileSquarePeekImageAndText01

TileWidePeekImage06

TileSquarePeekImageAndText02

TileWideSmallImageAndText01

TileSquarePeekImageAndText03

TileWideSmallImageAndText02

TileSquarePeekImageAndText04

TileWideSmallImageAndText03

TileWideImage

TileWideSmallImageAndText04

TileWideImageCollection

TileWideSmallImageAndText05

TileWideImageAndText01

TileWideText01

TileWideImageAndText02

TileWideText02

TileWideBlockAndText01

TileWideText03

TileWideBlockAndText02

TileWideText04

TileWidePeekImageCollection01

TileWideText05

TileWidePeekImageCollection02

TileWideText06

TileWidePeekImageCollection03

TileWideText07

TileWidePeekImageCollection04

TileWideText08

TileWidePeekImageCollection05

TileWideText09

TileWidePeekImageCollection06

TileWideText10

TileWidePeekImageAndText01

TileWideText11

Using the above template types, you can create various styles for your Windows Store apps like these:

You can grab the specific tile template that you want to use by calling the TileUpdateManager.GetTemplateContent(…) by passing the proper template type. The method returns you an XML document. For example, if you pass TileTemplateType.TileSquareBlock or TileTemplateType.TileSquarePeekImageAndText01, you will get the following XML content respectively:

<!-- TileSquareBlock -->

<!-- One short string of large block text over a single, short line of bold, regular text. -->

<tile>

<visual>

<bindingtemplate="TileSquareBlock">

<textid="1">Text 1</text>

<textid="2">Text 2</text>

</binding>

</visual>

</tile>

<!-- TileSquarePeekImageAndText01 -->

<!-- Top: One square image, no text. Bottom: One header string in larger text on the first

line, three strings of regular text on each of the next three lines. Text does not wrap. -->

<tile>

<visual>

<bindingtemplate="TileSquarePeekImageAndText01">

<imageid="1"src="image1"alt="alt text"/>

<textid="1">Text Header 1</text>

<textid="2">Text 2</text>

<textid="3">Text 3</text>

<textid="4">Text 4</text>

</binding>

</visual>

</tile>

You can see in the above XML code snippet that the individual XmlDocument has different text and/or image tag. You need the handle of those tags to set proper content in your application tile.

How to generate application live tile from code?

Now it’s time for us to create a method to integrate live tile creation from the code. To start with that, create a new Windows Store application by choosing proper C#/XAML template. Now in the MainPage.xaml file add a button and implement the button click event. In the button click event, we will call the CreateLiveTile() method that we are going to write now.

Here is our sample code to create a live tile with two text lines by providing the TileTemplateType.TileSquareBlock. As this type of template returns XML document having two text content, we will first take the reference of the appropriate node that we want to update here. You can get that by calling GetElementsByTagName(“text”) in the xml document that you get in the first line.

Once you have the nodes list, you can set the InnerText attribute of each individual node as shown below:

At the end you need to create a TileNotification object with the tile data and optionally set an expiration time to it before calling the TileUpdateManager.CreateTileUpdateForApplication().Update(…) method with the notification object that you created just now.

Similarly, if your tile template returns you the image content and you want o set proper image for that tile, get the elements by tag name as “image”. This will return you all the image tags that the tile template holds. Once you have individual image reference, you can set the “src” attribute of that image with proper relative or absolute URL of the image as shown below:

If the tile has a combination of text and images, you can call appropriate node data to set the value from the above two code snippets. As those steps are similar for all the template types, hence I am not individually sharing you the code of all those 46 templates.

What’s Next?

A complete list of Windows 8 Store Tile Template is available in MSDN as full catalog, which you can get by clicking the below link:

The above link will help you to chose the proper tile template based on your requirement. It lists out the name, tile image and XML document content for you to take reference.

Don’t forget to read my previous chapters of this series. I am available on Twitter, Facebook and Google+. Connect with me for updates and technical discussions. Also, don’t forget to drop a line in the comment section below.

If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Twitter, Facebook, Google+ and LinkedIn. I would love to hear your thoughts and opinions on my articles directly. Also, don't forget to share your views and/or feedback in the comment section below.

About Me

Kunal Chowdhury is a Windows Platform Development MVP of Microsoft, a Telerik MVP, Nokia Developer Champion, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.