Converting to Windows 8 from Windows Phone | Live tiles (10 of 12)

Live tiles was introduced with Windows Phone. Compared to an icon, which only used to start an application, a live tile is more like a window into your application. A window where you can present up to date information even if your application is not running. Live tiles in one of the strengths of Windows Phone and it has, of course, been transferred to Windows 8.

But there are differences between live tiles in Windows Phone and Windows 8. With a Windows Phone you had greater limitations in display size and performance. In this post we’ll start with a short overview how live tiles work and then continue with an introduction to live tiles in Windows 8.

This post is a part in a series – you can find the full index here.

Live tiles –Windows Phone

With Windows Phone you can create both primary and secondary tiles.


The code for creating these tiles looks (more or less) the same, this example shows how to update the primary tile.

var tile = new StandardTileData
     Title = "Sista-minuten",
     BackgroundImage = new Uri("/Assets/tile.png", UriKind.Relative),
     Count = 2,
     BackTitle = "Back Title",
     BackBackgroundImage = new Uri("/Assets/tile_back.png", UriKind.Relative),
     BackContent = "Back Content"

You notice that:

  1. We send in a picture to the front and back
  2. We send in a title to the front and back
  3. We send in a text to the back
  4. We can set a count to get a number in the top right corner of the front side

But we can’t do much else. Well – you can play around and generate images runtime in order to fit more data in. The code to accomplish this is usually messy and hard to change.

Live Tiles – Windows 8

It is a little different for Windows 8. To start with you got two different form factors for tiles – square and rectangular. Which version displayed is totally up to the user.

  • Square
    These tiles (regarding form factor) reminds us a lot of the tiles that we are used to from Windows Phone. Just could speculate that you have the same limitations as well – this is not the case. More information coming up!
  • Rectangular
    Rectangular tiles are bigger and bigger tiles gives us more space for information. So you can look at a rectangular tile as a panoramic window to your application where you can show even more information. As earlier mentioned, it is the user that controls if the rectangular or square tile should be visible. Square is default, so you must always include a square tile as well.

tile windows 8

Besides the different sizes, Microsoft has also addressed the problem with developers having to hack together an image runtime in order to display information. When updating a Windows 8 tile you simply use one of the 44 templates that are available. So take for example the code below.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText02);
XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");

foreach (var tileText in tileTextAttributes)
    tileText.InnerText = "Some text";

var tileNotification = new TileNotification(tileXml);

It will generate a tile with a title and smaller text below. In our case it will say “Some text” in both of them.

Yes – no more hacking together images in order to get a richer tile with more information.

No – the code you have for your Windows Phone tile today cannot be reused and needs to be rewritten.

There’s more

In addition to the new templates there is one more new thing worth mentioning – the notification queue. We can, quite simply, activate a cycling between the five last updates. So all that we do is basically to just keep on updating the live tile and then Windows 8 will take care of cycling the updates.

This means that we don’t have to constantly update our tile in order to give an impression that the application is alive. We can just add new updates whenever we feel like it and the hand over the responsibility to Windows to make it look alive. The code to activate this functionality…


…is not very complex.

This Post Has 2 Comments

Leave a Reply