by Andreas Hammar and Håkan Reis and Peter von Lochow - .Net
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.
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.
|
1 2 3 4 5 6 7 8 9 |
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:
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.
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.
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.
|
1 2 3 4 5 6 7 8 9 10 |
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); TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification); |
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.
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…
|
1 |
TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true); |
…is not very complex.
[...] Live tiles [...]
[...] the origins of the Metro design language, the inspiration that was the source of it all.”Converting to Windows 8 from Windows Phone | Live tiles (10 of 12) (Jayway Team Blog)“Live tiles was introduced with Windows Phone. Compared to an icon, which [...]