Bard's Tile I : Introduction and local tiles and Badges

This is the start of Bard’s Tile (I feel so funny) a new series of posts about the Live Tiles.

Detail of the series :

Bard’s Tile I : Introduction and local Tiles and Badges

Bard’s Tile II : Scheduled and Periodic Notifications

Bard’s Tile III : Push Notifications

Bard’s Tile IV : Secondary Tiles

Bard’s Tile V : Lock Screen Tiles and Badges

Live Tiles

Live Tiles are, IMHO, one of the (or the) most innovative and powerful feature of WP7 and Windows 8.

It allows application to show personalized relevant information to the user. The start screen becomes a sort of dashboard. You can have all the information you need at hand. No need to launch an application to know weather forecast for your city, for instance. Not only you can have the updated info on your start screen, but with the help of secondary tiles, you can have several set of information at the same time (In the weather app example, it can be several cities pinned on start menu).

Creating a Live Tile

To create/update a live tile is very simple. You just have to create a TileNotification from a specific XML that describes the Live Tile. Then you send it to the TileUpdater. The XML structure is not very complicated, it looks like this :

<tile>
  <visual lang="en-US">
    <binding template="TileSquareBlock">
      <text id="1">Text field 1</text>
      <text id="2">Text field 2</text>
    </binding>  
  </visual>
</tile>

Not complex, but nevertheless it would be a pain to recreate it, so WinRT gives us a way to have a blank Live Tile XML from a method :

TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText04);

Here I got the TileSquarePeekImageAndText04 XML structure. The list of the structures is here :

Choosing a tile template

Now that you have the XML, you have to manipulate it to add your text and/or images. Example ;

var wideTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01);

var imageXml = wideTileXml.GetElementsByTagName("image");

imageXml.Item(0).Attributes.GetNamedItem("src").InnerText = "ms-appx:///Images/pic1.jpg";

var textXml = wideTileXml.GetElementsByTagName("text");

textXml.Item(0).InnerText = "Hello World";

Important note concerning images : I spent lot of time wondering why it wasn’t updating at the first place until I realized image have to be smaller than 800*800 and less than 150k in size !

Now the XML is ready, you have to create a notification from it, and send it to the TileUpdater :

// create notification
var tileNotification = new TileNotification(wideTileXml);

// send notification
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

Now if you run the code, your application tile will look like this :

Clearing Live Tiles

To clear all updates, just to :

TileUpdateManager.CreateTileUpdaterForApplication().Clear();

Checking if Live Tile enabled

Maybe, for whatever reason, Live Tiles are disabled. You can check it using TileUpdater.Setting :

var notificationSetting = TileUpdateManager.CreateTileUpdaterForApplication().Setting;

switch (notificationSetting)
{
    case NotificationSetting.Enabled:
        // Proceed with notifications.
        break;
    case NotificationSetting.DisabledForApplication:
        // Possibly ask the user to enable notifications.
        break;
    case NotificationSetting.DisabledForUser:
        // Not applicable.
        break;
    case NotificationSetting.DisabledByGroupPolicy:
        // Possibly request that the user ask the system administrator to enable notifications.
        break;

    case NotificationSetting.DisabledByManifest:
        // Not applicable.
        break;
}

Expiration time

Maybe your notification is only relevant for a period time. You can give an expiration tile to the update, so it will be removed automatically after it expires :

var expirationTime = DateTimeOffset.UtcNow.AddSeconds(60);
tileNotification.ExpirationTime = expirationTime;

In this example , the update is removed after one minute.

Notification queue

By default, a new update will replace the older one. But there is a way to keep up to 5 updates at a time. The OS will show them one after the other in turn. To do that, just turn on the NotificationQueue during your application start :

TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);

Now, some updates are meant to erase an older one that is already in the queue. To avoid showing out-dated updates, you can assign a tag to a TileNotification. If you send a new update and there is already and update in the queue with the same tag, it will be replaced by the new one.

tileNotification.Tag = "WeatherParis";

Note that you don’t have to use same notification template for all updates in the queue. You can have one with image, another with text, a peek one (image + text), etc....

Updating Square and Wide Tiles

As you know, tiles comes in two sides : square and wide. How to update both in one time, so we are sure that the information is updated even if the user switch from one tile form to the other ?

Well, you can send two update at the time by merging the XML :

/// Wide tile
var wideTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01);

var imageXml = wideTileXml.GetElementsByTagName("image");

imageXml.Item(0).Attributes.GetNamedItem("src").InnerText = "ms-appx:///Images/pic1.jpg";

var textXml = wideTileXml.GetElementsByTagName("text");

textXml.Item(0).InnerText = "Hello World";

// Square tile 

var tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText04);

imageXml = tileXml.GetElementsByTagName("image");

imageXml.Item(0).Attributes.GetNamedItem("src").InnerText = "ms-appx:///Images/pic1.jpg";


textXml = tileXml.GetElementsByTagName("text");

textXml.Item(0).InnerText = "Hello World";

// Merge the two XML :

var tempNode = wideTileXml.ImportNode(tileXml.GetElementsByTagName("binding").Item(0), true);
wideTileXml.GetElementsByTagName("visual").Item(0).AppendChild(tempNode);



// create notification
var tileNotification = new TileNotification(wideTileXml);

// send notification
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

So the XML looks like this :

<tile>
  <visual lang="en-US">
    <binding template="TileWideImageAndText01">
      <image id="1" src="ms-appx:///Images/pic1.jpg"/>
      <text id="1">Hello World</text>
    </binding>
  <binding template="TileSquarePeekImageAndText04">
      <image id="1" src="ms-appx:///Images/pic1.jpg"/>
      <text id="1">Hello World</text>
    </binding></visual>
</tile>

Badges

Badges are some information you can add on live tiles. It can be either a number (up to 99) or a glyph.

The idea is that same as with tiles, badges are created from an XML that describes them. Then, you create a BadgeNotification from it and send it using the BadgeUpdater.

// set badge
var badgeXml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeGlyph);
var badgeElement = (XmlElement)badgeXml.SelectSingleNode("/badge");
badgeElement.SetAttribute("value", "activity");

var badge = new BadgeNotification(badgeXml);
BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);

In this example, I added the glyph Badge “activity”. The tile looks like this now :

To show a number instead of a glyph, just enter a number instead of glyph name.

List of badge glyphs.

Clear badge

To clear badge, do :

BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear();

Conclusion

Live Tiles have a huge potential. The fact you can give relevant updates to the users in a very easy way can lead to a very nice user experience. They key here is “relevant”. If it is to give info for the pleasure of giving info, it can lead to a tsunami of info on the start screen for the user and it voids its reason to be. Like for everything : use it scarce, but do it in a good way.

Here is a small app, showing the use of notification queue and badge :

Sources