Implementing a Live Tile

By now, you should be familiar with the Windows 8 start menu, which features tiles for installed programs. There are two sizes of tiles, a square tile, and a wide tile. The wide tile is a landscape-oriented rectangle that is the size of two square tiles.

Some tiles update their content via logic in the associated app. These are called live tiles. Typically, the new content animates into place.

Live tiles have two basic purposes:

For line-of-business applications, the second purpose will rarely be needed. But if you are creating a app aimed at consumers, it might be relevant.

Use caution when designing live tiles. When a live tile changes its content too often, the associated animation can be distracting and irritating to the users. Used judiciously, however, live tiles can be a nice addition to an app.

Live tiles are templates with XML files. That makes the process of updating a live tile somewhat tedious. You need to manipulate an XMLDocument and its nodes to fill in the updated content for a live tile.

Several starting point templates are available, and you can see the list in an enumeration of type TileTemplateImage. You can build your own XML document for a tile template up from scratch if you like, as long as you get all the nodes right. However using the built-in templates and just manipulating nodes is usually easier and more reliable.

Here is a brief code snippet that updates a live tile to place an image in the tile. The template type is TileSquareImage (code file: LiveTileUpdate.vb):

Dim TileXML As XmlDocument = 
    TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareImage)

Dim XMLNodes As XmlNodeList = TileXML.GetElementsByTagName("image")
XMLNodes(0).InnerText = "http://localhost/BigBuxInc.png"
Dim s As String = XMLNodes(0).InnerText
TileUpdateManager.CreateTileUpdaterForApplication().Update(New 
    TileNotification(TileXML))

Notice that the starting point is to obtain an XML document with the proper nodes. From there, the necessary logic varies. The XML document might have several nodes that need to be updated. For this one, I'm only updating the image node to provide a URL for an image.

The image supplied was hardcoded in this code for simplicity. In production, typically the values placed in the XML nodes are dependent on data.

If you app allows wide tiles, which apps do by default, then you will probably want your tile update logic to update both kinds of styles. That requires combining XML nodes from different templates.