Code Focused

Secondary Live Tiles in Windows Phone

Secondary Live Tiles enable an application to utilize both sides of a tile, delivering twice the information.

• By Sam Nasr
• 08/06/2012

Windows Phone 7 offers the ability to display dynamic tiles, known as Live Tiles. My previous article serves as a good tutorial showing how to create Live Tiles. This will serve as the starting point for this article on creating Secondary Tiles.

Starting with Windows Phone 7.1, Secondary Tiles became available. Secondary Live Tiles are essentially the back side of Live Tiles. This enables an application to utilize both sides of a tile, delivering twice the information in the same space of a single tile.

As mentioned previously, I'll utilize the demo project used in the previous article to demonstrate Secondary Tiles. I'll use the demo project as my starting point and make the following modifications:

• Rename all files, namespaces, and objects from LiveTilesDemo to SecondaryLiveTilesDemo, as seen in Figure 1.
• Add a new method called CreatePrimarySecondaryTile() to Class "MainPage" in  MainPage.xaml.vb.
• In the class constructor of MainPage.xaml.vb, comment out UpdatePrimaryTile() and add a call to CreatePrimarySecondaryTile() immediately after it. The complete code listing can be seen in Listing 1.

[Click on image for larger view.]

Figure 1. Renaming the solution to SecondaryLiveTiles.

Secondary Tiles are created in a fashion similar to Primary tiles, with some exceptions:

• Secondary tiles may or may not exist on the home screen when programmatically searching for them. Therefore, they may not always be available for updates. Primary tiles, on the other hand, can be updated regardless of whether they're pinned to the home screen or not.
• Only one secondary tile can be created at a time.
• Secondary tiles can be created programmatically. Primary tiles, however, must be pinned by the user to the start screen.
• Secondary tiles contain a "BackContent" property, but not a "Count" property. The exact opposite is true for Primary tiles.

Looking at CreatePrimarySecondaryTile(), I start by searching whether a tile exists with a URI of "MainPage.xaml". If not, I continue by instantiating a StandardTileData() object called "FullTile". This object will be used to create a Primary and Secondary Tile at the same time.

Next, I set the properties for the primary tile (BackgroundImage, Count, and Title). I'm setting the count property to the number of seconds at the time the code is executed. This is only used for demonstration purposes in this scenario.

Then I set the properties for the secondary tile (BackBackgroundImage, BackContent and BackTitle). Note that "BackContent" is only available for secondary tiles and "Count" is only available for primary tiles. Once the properties are set, I make a call to ShellTile.Create(), passing it a relative URI path and the FullTile object. This will create the primary and secondary tile, per the properties set. The results can be seen in Figure 2.

[Click on image for larger view.]

Figure 2. Primary and Secondary tiles displayed.

After executing the application, the tile will flip after some time, revealing the secondary tile with BackContent and BackTitle properties displayed. The OS handles when the tile will be flipped over -- the developer has no control when it flips. The secondary tile can be updated by simply changing any of the secondary tile properties (BackBackgroundImage, BackContent or BackTitle). After updating them, the OS handles the timing of the tile flip to expose the newly-updated Secondary tile.

This example utilized the ShellTile API to create the tiles. However, you can use Microsoft Push Notification Service or ShellTileSchedule APIs for more enhanced features. In addition, the initial properties for an Application Tile can be set in the application manifest file. More information on Microsoft Push Notification Service or ShellTileSchedule APIs is available at their respective sites.

Now that you have the ability to display double the information using Secondary tiles, you should be doubly concerned with bombarding the end user with TMI (Too Much Information). Display only information relevant to the user or information the user selected.  This will ensure optimal application performance, as well as user satisfaction.

• Get Code Download