Rotating Live Tiles to keep interest

LiveTiles_thumb7_thumb1If 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
  3. Rotating Live Tiles to keep interest (This Post)
  4. Modifying Live Tiles in a Background Process
  5. Using Azure and Push Notifications with Live Tiles

Change the Scenery

In addition to inviting them into your application, you want to make sure that the information on your live tile does not become static. While it may engage them once, fresh content is important to keep them engaged.  You can rotate up to 5 different tiles at a time. To begin, we will use the project we created in the last post (if you don’t have that, you can create a new project and follow along)

This time we will be adding the code that goes behind the Rotate Tiles button.

image

Double click on the Rotate Tiles button to get to the button click handler. Add the following code inside the click handler.

AddTileNotification("Title 1", "This is the message for number 1","1");AddTileNotification("Title 2", "This is the message for number 2", "2");AddTileNotification("Title 3", "This is the message for number 3", "3");AddTileNotification("Title 4", "This is the message for number 4", "4");AddTileNotification("Title 5", "This is the message for number 5", "5");

 

For now, you will get an error stating that AddTileNotification does not exist.  We will add that shortly.  First add the following declaration to the top of your class.

TileUpdater tileUpdater;

 

Now in the constructor add the following code

tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();tileUpdater.EnableNotificationQueue(true);

 

This will new up an instance of the TileUpdateManager and will enable notification queuing.

Now lets add the AddTileNotification method.

private void AddTileNotification(string title, string message, string tag){    var templateType = TileTemplateType.TileWideSmallImageAndText04;    var xml = TileUpdateManager.GetTemplateContent(templateType);

    var textNodes = xml.GetElementsByTagName("text");    textNodes[0].AppendChild(xml.CreateTextNode(title));    textNodes[1].AppendChild(xml.CreateTextNode(message));

    //IMPORTANT if the image is not found, this update will fail SILENTLY    var imageNodes = xml.GetElementsByTagName("image");    var elt = (XmlElement)imageNodes[0];    elt.SetAttribute("src", "ms-appx:///Assets/SmallLogo.png");

    var tile = new TileNotification(xml);    tile.Tag = tag;    tileUpdater.Update(tile);

}

 

Since we already covered most of this code in the previous post (http://thesociablegeek.com/windows-8/livetiles/working-with-live-tiles-locally/) we will just discuss what is different

DON’T PAST THIS CODE.. IT IS ALL ABOVE, THIS IS JUST FOR DISCUSSION

If  we look at the method signature we can see that we are taking in a title, message, and a tag,

private void AddTileNotification(string title, string message, string tag)

 

The title and message will be used to hydrate the xml we are using for the tile (again see last post for more detail).  Since you are only able to rotate 5 tiles at any given time, the tag property allows us to have a reference to the tile we want to replace.  If you don’t use the tag property, it will replace the first tile that was added (FIFO). You can see where we apply the tag here

tile.Tag = tag;

 

If you run the project and click the Rotate Tiles button, you can see that it will rotate through all of the tiles we created. If you want to replace a tile, add another button to the form and add the following to its button click handler.

AddTileNotification("Title 6", "This is the message for number 6", "2");
This will replace the second tile (tagged as 2) with this tile.
That’s all there is to it, there is of course added complexity if you want to create different types of tiles (which you can). You would just need to modify your method to take into account the different Tile Types and adjust the needed data accordingly.
In the next post, we we look at how you can do all of this from a background process so that changes can be made while the user is not using the program.
Happy Programming,
Daniel Egan – The Sociable Geek


Sorry, comments are closed for this post.