How to Use Windows 8 Live Tiles in an Application

Hello, Live Tile

Before diving into creating live tiles, the first thing you need to look at is how to define the static tile. In Visual Studio 2012, create a new Windows Metro–style application using the Blank App (XAML) template in C#. There are two areas of interest in the Solution Explorer to look at first. The first is the Assets folder that's created, which contains a group of default images. Logo.png is a 150 x 150–pixel image that's used for the default square tile. The image that's used for the application's tile is defined in the application manifest. Open the application manifest by double-clicking the package.appmanifest file located in the project's root directory. The Application UI tab contains a Tile section that lets you define the default tile settings, as shown in Figure 1.


Figure 1: Defining Default Tile Settings

For our purposes in this article, the only two items you need to familiarize yourself with are Logo and Wide logo. You'll notice that the Wide logo property is blank by default. In order for your application to support wide tiles, you have to add a valid 310 x 150–pixel image to your project; enter the image's path in the Wide logo text area. The other options in this section are for you to define the branding of the tile, including the branding logo or name that appears on the bottom left corner of the tile.

To see the default tile in action, run your application in the debugger (F5 is the shortcut for this). After your application loads, return to the Start screen, and you'll see that a new tile was added for your application. The tile should appear similar to the image shown in Figure 2.


Figure 2: Default Tile Example

Although this isn't a very inspiring tile, it does work as a placeholder, letting you create your base tile and avoid the need to generate an image, so that you can build the application. However, until you create a live tile, the default tile is what your users will see, so it's worth your time to make the default tile look a bit more appealing than a big white X on a black background.

Creating a Live Tile

Now that you know how the default tile is defined within the application, it's time to look at how your application can update the tile. The UI for the example is a simple form that you'll implement throughout this article. Figure 3 shows the final UI, and Listing 2 shows the full XAML for the page.


Figure 3: Tile Application UI

Listing 2: XAML for the Tile Page

    x:Class="TileExample.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TileExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    
        
            
            
            
            
        
        
            Tile Sample
            
                Text 1:
                
            
            
                Text 2:
                
            
            
                Tag :
                
            
            
                Enable Queueing:
                
            
            
                Expire in 5 min:
                
            
            
            
        
    

private void btnTile_Click(object sender, RoutedEventArgs e)
{
    var tileContent = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareBlock);

    var tileLines = tileContent.SelectNodes("tile/visual/binding/text");
    tileLines[0].InnerText = txtLine1.Text;
    tileLines[1].InnerText = txtLine2.Text;

    var notification = new TileNotification(tileContent);

    if (!String.IsNullOrEmpty(txtTag.Text))
    {
        notification.Tag = txtTag.Text;
    }

    var updater = TileUpdateManager.CreateTileUpdaterForApplication();

    updater.EnableNotificationQueue(cbQueue.IsChecked.Value);

    if (cbExpire.IsChecked.Value)
    {
        notification.ExpirationTime = DateTime.Now.AddMinutes(5);
    }
    updater.Update(notification);


}

private void btnClear_Click(object sender, RoutedEventArgs e)
{
    var updater = TileUpdateManager.CreateTileUpdaterForApplication();
    updater.Clear();
}

var tileContent = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareBlock);

The method will return an XML document containing XML code that represents the template. It's important to note that it isn't necessary to use the API to retrieve the XML content. The content can be generated from any source as long as its schema is correct.

After the template has been retrieved, you can modify the nodes to populate the live tile with relevant information. Our example here uses the TileSquareBlock tile, which contains two text nodes. Populate the InnerText of the two text nodes with the contents of the first two TextBlocks in our UI, txtLine1 and txtLine2:

var tileLines = tileContent.SelectNodes("tile/visual/binding/text");
tileLines[0].InnerText = txtLine1.Text;
tileLines[1].InnerText = txtLine2.Text;

With the updated XML document completed, you can create a new TileNotification object by passing in the modified XML document into the constructor:

var notification = new TileNotification(tileContent);

The final step is to create a TileUpdater for your application. This is accomplished by using the CreateTileUpdaterForApplication() method of the TileUpdateManager. Calling the TileUpdater's Update() method with the new TileNotification will update your application's live tile:

var updater = TileUpdateManager.CreateTileUpdaterForApplication();
updater.Update(notification);

If you haven't already done so, you'll need to create an empty event handle for btnClear_Click before you run the application. After this has been created, the application should successfully compile and run. Before you try to create a live tile, take a moment and return to the Start screen. The application will add a tile to the Start screen the first time the app is run in the debugger. The tile should have the default look of a white box and X on a black background. Returning to your application, on the form fill in some text for Text 1 and Text 2, then click the Submit Tile button. One more trip to the Start screen, and you'll see that your application's tile has been updated with the live tile that you just created.

Making the Most of Your Tiles

Now that you've created a live tile, the fun doesn't stop there. There are a few features that are worth knowing about so that you can fully take advantage of live tiles. The most important of these features is notification queuing. Updating your application's live tile can be a very effective way to communicate with the user, but what happens when you have more than one thing to communicate? The tile API allows an application's tile to have up to five live tiles at any one time. The Start screen will automatically rotate through the available tiles.

Typically, tiles are added in the order that they're received. Once five tiles have been received, the oldest one will be replaced with the next tile. The TileUpdater class exposes a method to enable or disable queuing. By default, notification queuing is disabled. The following line will enable queuing based on the IsChecked property of the cbQueue CheckBox and should be added to your application immediately following the code that creates the updater object:

updater.EnableNotificationQueue(cbQueue.IsChecked.Value);

Now run your application again and add a new tile with the Enable Queuing option selected. Your application's tile will now have two tiles that will be rotated through.

One thing to consider when using live tiles is that you want the tile to show only relevant information. For instance, if your application pushes event reminders as live tiles, you wouldn't want the reminders to still show on the tile after the event is over. Imagine a user's disappointment when she gets excited about her favorite band coming to town only to find out that the concert was the night before. Luckily for your concert-going user, the tile API has a couple of features that will help to prevent such a tragedy from occurring.

The first option you have is to set an expiration time on the TileNotification by setting the ExpirationTime property. When this property is set, the tile will be removed when the expiration time is reached. If queuing is enabled, the tile will simply be removed from the rotation. If queuing isn't enabled or if there's only a single tile in the queue, the tile will revert back to the default tile. You can test this by adding code to check for the value of the cbExpire CheckBox. The following code will expire the tile five minutes after it's created:

if (cbExpire.IsChecked.Value)
{
    notification.ExpirationTime = DateTime.Now.AddMinutes(5);
}

if (!String.IsNullOrEmpty(txtTag.Text))
{
    notification.Tag = txtTag.Text;
}

private void btnClear_Click(object sender, RoutedEventArgs e)
{
    var updater = TileUpdateManager.CreateTileUpdaterForApplication();
    updater.Clear();
}

Mechanisms for Updating Your Tiles

This article demonstrates how to update your application's tile directly from the application. However, there are times when this isn't the optimal solution. For instance, you might want a mail application to display the number of new email messages. If you're only updating the tile from within the application and it isn't currently running, it won't be able to update the tile. Fortunately, there are several approaches that you can take to get around this problem. Although this article won't dive into these approaches in detail, they're worth knowing about.

The first option at your disposal is to create a scheduled tile update to post at a future date and time. The tile API exposes a ScheduledTileNotification class that's nearly identical to the TileNotification class described earlier -- except for the addition of a DeliveryTime property. The TileUpdater class has an AddToSchedule() method that will let you add the notification to be posted at the DeliveryTime. In addition, you can review and remove scheduled notifications through the GetScheduledTileNotifications() and RemoveFromSchedule() methods of the TileUpdater.

With Metro you have two options for updating tiles remotely. The TileUpdater has a StartPeriodicUpdate() method that lets you define a URI to query and a frequency in which to query the URI. The URI must return a correctly formatted XML template. This polling approach lets your tile present relevant information to the user even if the user hasn't run your application for an extended period of time.

A similar approach is to use the Windows Push Notification Service (WNS) to push updates to your users' machines. The WNS lets your application subscribe to a remote service. When the service sends updates to the WNS, they're sent to all subscribers. A major benefit of this approach is that it lets you deliver notifications whenever necessary, making them timely and removing the need and overhead of constant polling.

Wrapping Up

The Windows 8 Start screen brings a unique opportunity to application developers. It lets you present timely and useful information to users without requiring users to open your application. This not only keeps users informed but also acts as a reminder about your application and can help promote frequent usage. If you're interested in learning more about the live tiles API beyond what I've covered here, refer to the documentation in the Windows Dev Center.

Tony Champion is a Silverlight MVP and owner of Champion DS, creating custom solutions on Microsoft platforms. He is currently authoring his first book on Windows 8 and is an active speaker and blogger.

• Email: [email protected]
• Twitter: @tonychampion
• LinkedIn: http://www.linkedin.com/in/championt
• Blog: http://tonychampion.net

Learn more about Windows 8 Application Development:

• What Windows 8 WinRT and Metro Mean for .NET Developers
• Microsoft Windows 8, Metro, and WinRT: A New Era for Microsoft Platform Developers
• How to Write a WinRT XAML Metro App
• Build a WinRT Metro App to Access the Windows 8 File System
• Microsoft Windows 8 Metro UI: One Size Does Not Fit All