Day: November 10, 2011

Every Windows Phone application deserves a Live Tile (part 2)

My previous post about Live Tiles showed you how to use both sides of the Application Tile in Windows Phone Mango and how to initialize it in the WMAppManifest.xml file. You also learned how to add local language support.

Now we will focus on how to update the Application Tile within your application. Even though this is considered to be a live update of the tile, the update is not triggered by a schedule. This means that the Application Tile for the sample application will not be updated spontaneously when you are looking at it on the start screen of your device. However, it will alternate between front and back side and it will show relevant information on the back.

In order to show you how to update the Application Tile from within your own application, we again take the same sample application, Clicker, and extend its functionality. Each time the game is played, we will check for a new best time. If there is a new best time, it will be visible on the back side of the Application Tile, together with the date. In order to update an Application Tile, two steps are necessary.

First you need to get access to the Application Tile. This is possible by retrieving the first tile from the generic IEnumerable collection of active tiles that belong to the application. The first tile is always the Application Tile. This tile always exists (even if the user has not pinned the Application Tile to the start screen). Optionally, one or more Secondary Tiles can also be part of the collection of Active Tiles. In order to easily get to a particular tile in the collection of ActiveTiles, methods on the Enumerable class can be called. Since this class is implemented in the System.Linq namespace, you must also add a using directive to System.Linq. Omitting to do so results in compilation errors.

Assuming you have retrieved the Application Tile from the collection, you can modify it by creating a new StandardTileData class and initializing it with the data items that you want to change on the tile. It is sufficient to set only changed properties to an instance of the StandardTileData class. In our sample, we will only update the BackContent property, but it is also possible to change the entire appearance of (both sides of) the tile if you want to do so.

Finally, you need to modify the Application Tile by calling the Update method on the found ApplicationTile, passing the newly created instance of the StandardTileData. I decided to create a static class with one method to update the Application Tile. The reason to do so is that this class will be re-used in a few similar, but different applications.

Updating the Application Tile
  1. using System;
  2. using System.Linq;
  3. using System.Text;
  4. using Clicker.Controls.Localization;
  5. using Microsoft.Phone.Shell;
  6. using System.Globalization;
  7.  
  8. namespace Clicker.Controls
  9. {
  10.     public static class LiveTile
  11.     {
  12.         public static void UpdateLiveTile(TimeSpan bestTime, DateTime bestTimeDate)
  13.         {
  14.             // Application Tile is always the first Tile, even if it is not pinned to Start.
  15.             ShellTile TileToFind = ShellTile.ActiveTiles.First();
  16.  
  17.             if (TileToFind != null)
  18.             {
  19.                 StringBuilder sb = new StringBuilder();
  20.                 sb.AppendLine(ControlResources.BestTime);
  21.                 sb.AppendLine(bestTime.TotalSeconds.ToString("N2", CultureInfo.CurrentCulture.NumberFormat));
  22.                 sb.AppendLine(ControlResources.BestTimeDate);
  23.                 sb.AppendLine(bestTimeDate.ToString("d", CultureInfo.CurrentCulture.DateTimeFormat));
  24.  
  25.                 StandardTileData NewTileData = new StandardTileData
  26.                 {
  27.                     BackContent = sb.ToString(),
  28.                 };
  29.  
  30.                 TileToFind.Update(NewTileData);
  31.             }
  32.         }
  33.     }
  34. }

The result after playing the came a few times now looks like this:

image

The UpdateLiveTile method uses localization and is called each time the user has a high score. The only down side of a localized tile that I can think of is the fact that the tile does not automatically change to another local language when the user changes the language of the device. The tile will be modified if the application has executed one time, but if the application has not been executed, the tile will keep the original local language. The reason for that is that the tile is only updated inside the application, so the application has to run in order to display modified content on the tile. Since I don’t expect users to frequently change local languages on devices, I don’t think this is much of a limitation. In my first post about tiles, I wrote that the Mango update of Clicker will be available with this blog post. Unfortunately that is not the case, so I will make sure to send out a tweet when the updated  version of Clicker hits Marketplaces all over the world.