- 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!"));
The following code looks for any xml nodes in our template that are named “text”. Since we know from the template that there are two, we just add the text we want to show to each of those nodes as shown above.
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);