If you are developing an application or game for Windows 8, making sure you have an engaging, inviting, or informative live tile is an absolute must. I am always surprised when I see the amount of effort a developer puts into their application, but then neglects to spend any time on their live tile. A live tile is a unique way to engage the consumer while they are not using your application. It is not only a way to entertain, but done right, it will drive them back into your application or game time and time again. In this series, we will discuss the many aspects of Live Tiles, from what should be placed on your live tile, to utilizing Azure and Push Notifications to send data to your application.
- Creating A Live Tile that is Engaging and Inviting
- Working with Live Tiles Locally (This Post)
- Rotating Live Tiles to keep interest
- Modifying Live Tiles in a Background Process
- Using Azure and Push Notifications with Live Tiles
Working with the TileUpdateManager
To show you the concepts of working with tile locally, we will be using a very simple application which consists of a simple form and two buttons.
In the Change Tile button click we will add the following code. First we want to make a reference to the template we would like to use for our tile.
var templateType = TileTemplateType.TileWideSmallImageAndText04; var xml = TileUpdateManager.GetTemplateContent(templateType);
You will need to add the following using statement to the top of your page.
So what is the content we are grabbing with the TileUpdateManager? Its an XML document. In order to see what the tile we are working with looks like, place your cursor under TileTemplateType and hit the F1 key on your keyboard. This will bring you to the TileTemplateType enumeration documentation. http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.notifications.tiletemplatetype(v=win.10).aspx
as you can see from the code, we have chosen to use TileWideSmallImageAndText04 for our tile. If we look on the page, you can get a reference image for what will be rendered.
This is helpful but since the tile utilizes XML to render the tile, we need to know the XML Representation of this tile. If you scroll up to the top of the TileTemlplateType enumeration page we referenced above you will see a link to the Tile Template Catalog which will bring you here http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx. If we search for our TileWideSmallImageAndText04 you will see the image along with the XML representation of that image.
We can see that this tile has one Image element and two text elements, so in order to modify them we need to get a reference to those nodes. Add the following code below the template code you just pasted (in the button click)
var textNodes = xml.GetElementsByTagName("text");textNodes.AppendChild(xml.CreateTextNode("A message"));textNodes.AppendChild(xml.CreateTextNode("This text should wrap on max 3 lines, see if this fits on the tile!"));
var imageNodes = xml.GetElementsByTagName("image");var elt = (XmlElement)imageNodes;elt.SetAttribute("src", "ms-appx:///Assets/SmallLogo.png");
var tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();var tile = new TileNotification(xml);tileUpdater.Update(tile);