Use an API to update live tiles on the Start Screen in Windows 8
| Downloads |
|---|
| 143640.zip |
RELATED: "How to Build Windows 8 Applications" and "How to Work with Local Notifications in Windows 8-Style Apps."
Windows 8's new Start screen and user experience has been the topic of many a tech conversation this year, as developers delve into building applications for the new Windows platform. As you begin to get your head around building Windows Store applications (formerly known as "Metro-style" apps), an important feature not to overlook is live tiles -- a significant evolution away from the standard UI design practice of representing an application using a static icon image. The Windows 8 Start screen presents each application as a tile. Although an application's tile is initially a static image, Windows 8 exposes an API that lets you provide users with relevant, frequently updated information about your application via the tile. Using this API, you can make your application's tile live using a combination of text and imagery that will keep the user informed and engaged with your application.
You might wonder why you need to implement live tiles in your application. The purpose of live tiles is to provide the user with "information snacking." By providing small pieces of information from your application, you can update the user without having to actually run the application itself. As an example, consider an email application. A tile that displays the number of new email messages lets the user get updated email information from a quick glance at the tile, saving the user the trouble of opening the email application. Tiles can be used similarly in a range of applications -- from social media to gaming to line-of-business apps.
Join me now as we explore Windows 8's live tiles and walk through examples of how to work with them. Note that this article was written on the Windows 8 Release Preview; the information covered herein is subject to change when the final version of Windows 8 is released.
Anatomy of a Windows 8 Tile
Live tiles come in two sizes: square and wide (150 x 150 pixels and 310 x 150 pixels, respectively). A wide tile encompasses the same screen real estate as two square tiles. Therefore, the extra 10 pixels in the width are there to cover the spacing between two square tiles sitting next to each other. Each application is required to provide a square tile logo. This static image will be the default tile for your application unless an active live tile replaces it. The wide tile logo is optional. If a wide logo isn't supplied, the user will have only the option to show the tile in the square format. Even if you provide both logos, the user is in control of how the tile is supplied. Therefore, when implementing live tiles, you need to create one for both sizes if you want to support both.
In addition to holding the tile's content, a live tile (and a static tile, too) can contain two additional pieces of information. The bottom left corner can contain your application's branding: either a small logo or a short name. The bottom right corner can display a small badge. Badges are set using an additional API; a discussion of them is beyond the scope of this article. It's important to keep these features in mind when you're determining tile layouts and images to use so that you don't lose information behind the branding or badges.
Defining a Live Tile
There are three different types of live tiles: text-only, image-only, and a combination of text and images. For the text-only and image-only formats, the tiles are considered to be static and contain only a single view. Tiles containing a combination of images and text can either have a static view or animate between two views in a peek tile. Peek tiles show a collection of images; the tile's content will "slide up" to show additional content below it. Regardless of the layout that you decide to use, each live tile is defined and implemented the same way.
To create a live tile, you use a predefined XML template. These templates are provided in the Windows 8 SDK and are non-extensible. Creating a custom template isn't an option; however, the SDK provides a large collection of templates for you to choose from. As of the Windows 8 Release Preview, there are a total of 46 tile templates, with 10 of those defining square tile templates. For more information about templates and downloads, see the Windows Store Apps section in the Windows Dev Center.
Each tile template follows the same XML scheme. It contains all the nodes allowed by that template; modifying the structure results in an error message. Listing 1 shows an example of a wide live tile that contains both images and text.
Listing 1: XML for a Wide Live Tile that Contains Images and Text
<visual>
<binding template="TileWidePeekImage05">
<image id="1" src="image1.png" alt="alt text"/>
<image id="2" src="image2.png" alt="alt text"/>
<text id="1">Text Header Field 1</text>
<text id="2">Text Field 2</text>
</binding>
</visual>
</tile>
For each <text/> node that's listed in the binding, you can enter the appropriate text for your tile. Depending on the tile, you can have as many as 10 text entries. The font size and placement for each text line is determined by the template. Each template has right-to-left (RTL) language support and will automatically adjust layouts for those languages. In an <image/> node, you can define the image source and an alternate text that's displayed when you mouse over the image. Some live tiles contain as many as six distinct images. The multiple-image support affords the tile a great deal of flexibility in its presentation.
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
