#Win8Dev Tutorial: Create Great Experience with LiveTile for your WinRT applications

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:

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>

    <binding template="TileSquareBlock">

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

      <text id="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>

    <binding template="TileSquarePeekImageAndText01">

      <image id="1" src="image1" alt="alt text"/>

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

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

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

      <text id="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.