Working with Live Tiles Locally

 

LiveTiles_thumb7If 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.

  1. Creating A Live Tile that is Engaging and Inviting
  2. Working with Live Tiles Locally (This Post)
  3. Rotating Live Tiles to keep interest
  4. Modifying Live Tiles in a Background Process
  5. 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.

image

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.

using Windows.UI.Notifications;

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.

image

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.

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[0].AppendChild(xml.CreateTextNode("A message"));textNodes[1].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.
We also need to find and modify the Image node in the XML.
var imageNodes = xml.GetElementsByTagName("image");var elt = (XmlElement)imageNodes[0];elt.SetAttribute("src", "ms-appx:///Assets/SmallLogo.png");
And since we are using XmlElement we need to add the following using statement
using Windows.Data.Xml.Dom;

 

Just like the text elements, we know there is only one image node so we set its “src” to an image we have in our project.
IMPORTANT NOTE:  If it does not find the image, the WHOLE thing will fail silently. I repeat, it will fail SILENTLY, so you will not  get an error, it will just not show up.
Now we use the TileUpdateManager to update the tile to the xml we just specified.
var tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();var tile = new TileNotification(xml);tileUpdater.Update(tile);

 

Before this will work, since we are using a Wide layout, we need a Wide Logo.  Right click on the Logo.png found in your Assets folder and select OpenWith.
From the list select Paint (or another graphics program of you choice)
image
When paint opens, click on the resize button and set the size to 310 X150 (in pixels) while unchecking the “Maintain aspect ratio” checkbox.
paint
Save the image back into the Assets folder and call it WideLogo.png.
widelogo
Make sure you include it in your project (Click show all files, right click on WideLogo.png and select include in project)
image
Next, double click on your Package_appmanifest file in your Solution Explorer and modify the WideLogo section to point to your image.
image
Run your project and click on the button.  When it completes, return to your start screen.  Your live tile should show you the image and two text nodes you inserted.
image
As talked about in our last post, you would want to repeat this for a small tile layout so that you still can get a dynamic tile even when it is small.
That is it for basic tiles.  In the next post, we will talk about how to rotate 5 different tiles to keep your users interested.
Happy Programing
Daniel Egan – The Sociable Geek


Sorry, comments are closed for this post.