Creating Windows 8 Live Tile Notifications with WinRT C# .NET

Introduction

WinRT is the new platform software application architecture for creating Windows 8 apps (formerly, called Metro-style apps). Applications written in WinRT with C# .NET , C++, or Javascript/TypeScript can be installed on the Windows 8 desktop and distributed within the Windows App Store. One of the unique features of WinRT apps, running on the new Windows 8 lock screen desktop,, is the ability to display Live Tile notifications. A Live Tile notification is an animated display of the tile. Such notifications include displaying a text message, image, animation, or other helpful information to notify the user of an action by the app. Live Tile notifications may be created in C# .NET by calling the applicable API methods.

In this tutorial, we’ll walk through the steps to create a basic Windows 8 Live Tile notification. Our example application will display its tile in Windows 8, and upon clicking a button, will change its tile to display a Live Tile notification. We’ll include an example of a text, image, and animated Live Tile notification in C# .NET.

The Inner-Workings of a Windows 8 Live Tile

A Live Tile is really just an XML file. The XML file defines the fields to be displayed on the tile and the behavior that it should follow. The complete list of tile templates and their associated XML files can be found on Microsoft’s dev center site. An example XML template for a basic text tile notification appears as follows:

<tile>
  <visual>
    <binding template="TileSquareBlock">
      <text id="1">Text Field 1</text>
      <text id="2">Text Field 2</text>
    </binding>  
  </visual>
</tile>

Notice the XML is a basic template. This one is for TileSquareBlock and contains two elements to define the text content. The first element will be displayed in a large font, while the second element will display in a smaller font underneath. The style and appearance is defined on the Microsoft dev center page.

Creating a Live Tile Text Notification

To begin creating a simple Windows 8 live tile notification in C# .NET, we start by creating a basic helper method for creating the tile notification. We’ll first specify which template we’d like to use. Then we’ll load the XML file. Finally, we’ll issue the notification and update our tile. Our helper method for creating the tile notification appears as follows:

public static void SetLiveTile(string title, string body, int seconds)
{
    // Get tile template.
    var tileTemplate = TileTemplateType.TileSquareBlock;
    var tileXml = TileUpdateManager.GetTemplateContent(tileTemplate);

    // Create notification.
    var notification = new TileNotification(tileXml);
    notification.ExpirationTime = DateTime.Now + TimeSpan.FromSeconds(seconds);

    // Set notification text.
    XmlNodeList nodes = tileXml.GetElementsByTagName("text");
    nodes[0].InnerText = title;
    nodes[1].InnerText = body;

    // Update Live Tile.
    var upd = TileUpdateManager.CreateTileUpdaterForApplication();
    upd.Update(notification);
}

// Call the tile notification.
LiveTileManager.SetLiveTile("Hi!", "I'm a live tile.", 20);

In the above code, we first load the built-in Windows 8 Live Tile notification template. This returns an XmlDocument, containing the XML for the specific tile notification. We then modify the XML to insert our own text within the text elements. Finally, we issue the notification update.

Creating a Live Tile Image Notification

For our second example Windows 8 live tile notification in C# .NET, we’ll create an image-only notification. To do this, we can create a new helper method that populates the required image element within the XML, as follows:

public static void SetLiveTile(string imageFileName, int seconds)
{
    // Get tile template.
    var tileTemplate = TileTemplateType.TileSquareImage;
    var tileXml = TileUpdateManager.GetTemplateContent(tileTemplate);

    // Create notification.
    var notification = new TileNotification(tileXml);
    notification.ExpirationTime = DateTime.Now + TimeSpan.FromSeconds(seconds);

    // Set notification text.
    XmlNodeList nodes = tileXml.GetElementsByTagName("image");
    nodes[0].Attributes[1].NodeValue = "ms-appx:///Assets/" + imageFileName;

    // Update Live Tile.
    var upd = TileUpdateManager.CreateTileUpdaterForApplication();
    upd.Update(notification);
}

// Call the tile notification.
LiveTileManager.SetLiveTile("neptune.png", 20);

The only difference in the above code is that we’re using the TileSquareImage template. Since we have a new template, we’ll populate an image element instead of a text element. The image element takes an internal path, pointing to an image resource in the project. You can add images to the Assets folder within your project and then load them in a Windows 8 tile notification. For this example, the image should be 150x150 pixels.

Creating an Animated Tile Notification

Our final example will be an animated Windows 8 live tile notification. We’ll use the TileSquarePeekImageAndText04 template to display both an image and text block, in an animated display. the image will scroll in vertically and alternate between showing the text and the image. It’s important to note the visual effect from this type of tile notification. It should be used sparingly to avoid overwhelming (and annoying) the user. Similar to popups in earlier Windows web browsers, we’ll wait and see how the usability of this type of notification works out.

public static void SetLiveTileAnimated(string imageFileName, string text, int seconds)
{
    // Get tile template.
    var tileTemplate = TileTemplateType.TileSquarePeekImageAndText04;
    var tileXml = TileUpdateManager.GetTemplateContent(tileTemplate);

    // Create notification.
    var notification = new TileNotification(tileXml);
    notification.ExpirationTime = DateTime.Now + TimeSpan.FromSeconds(seconds);

    // Set notification text.
    XmlNodeList nodes = tileXml.GetElementsByTagName("image");
    nodes[0].Attributes[1].NodeValue = "ms-appx:///Assets/" + imageFileName;
    nodes = tileXml.GetElementsByTagName("text");
    nodes[0].InnerText = text;

    // Update Live Tile.
    var upd = TileUpdateManager.CreateTileUpdaterForApplication();
    upd.Update(notification);
}

// Call the tile notification.
LiveTileManager.SetLiveTileAnimated("neptune.png", "Hi, I'm an animated tile!", 30);

In the above code, we set two elements in the C# .NET Windows 8 live tile notification. We set the attribute value for the image element. We also set the InnerText value for the text element. The result is an animated tile that briefly shows the image, then scrolls vertically to display the text, and so-on, until the timer expires.

Refactoring For Some Cleaner Code

You’ll notice, in the above examples, that displaying a C# .NET Windows 8 live tile notification contains a lot of the same code, regardless of the type of notification. In fact, the only differing code involves the customization of the XML template. We can take advantage of this common code to refactor and create a generic Windows 8 live tile notification helper method to make our notification code easier and cleaner.

private static void SetLiveTile(TileTemplateType tileTemplateType, int seconds, Action<XmlDocument> customizeMethod)
{
    // Get tile template.
    var tileTemplate = tileTemplateType;
    var tileXml = TileUpdateManager.GetTemplateContent(tileTemplate);

    // Create notification.
    var notification = new TileNotification(tileXml);
    notification.ExpirationTime = DateTime.Now + TimeSpan.FromSeconds(seconds);

    // Set notification options.
    customizeMethod(tileXml);

    // Update Live Tile.
    var upd = TileUpdateManager.CreateTileUpdaterForApplication();
    upd.Update(notification);
}

The above method takes a TileTemplateType, so we can display text, images, animated, or any other type of Windows 8 live tile notification. It also takes the number of seconds to display the notification. We also provide a custom method (ie., anonymous method), which will include customization code for populating the XML document with our text or image values.

With our common code encapsulated, we can now set a Windows 8 live tile text notification in C# .NET with the following refactored code:

public static void SetLiveTile(string title, string body, int seconds)
{
    SetLiveTile(TileTemplateType.TileSquareBlock, seconds, (XmlDocument tileXml) =>
    {
        // Set notification text.
        XmlNodeList nodes = tileXml.GetElementsByTagName("text");
        nodes[0].InnerText = title;
        nodes[1].InnerText = body;
    });
}

The code would be the same for an image or animated notification, with the only difference within the anonymous method block, for customizing the XML document template.

Download @ GitHub

You can download the project source code on GitHub by visiting the Windows 8 Live Tiles example project.

About the Author

This article was written by Kory Becker, software developer and architect, skilled in a range of technologies, including web application development, machine learning, artificial intelligence, and data science.

Sponsor Me