Fun With New Live Tile API

In Windows Phone OS 7.0, you could update your Live Tiles (but not create them) – but you had to do it via a push notification. In Windows Phone OS 7.1, this changes to allow you to not only update the Live Tile for your application, but your application can create multiple Live Tiles.

The ShellTile class gives you access to all the Live Tiles for your application. Before you ever create a single tile, you always have one tile. This tile is the default tile that your application will show if the user manually pins an application to the home screen. You can add additional Live Tiles manually. Each of these additional tiles are specifically to link deeply into your application. For example, if I had an airline application, I could have additional tiles that linked directly to individual flights. Let’s get started.

Updating the Default Live Tile

You can use the ShellTile class to retrieve the default tile like so:

// Get the default tile
ShellTile firstTile = ShellTile.ActiveTiles.First();

You can update the data in the shell tile, but creating an instance of the StandardTileData class as shown here:

// Create the new data
var newData = new StandardTileData()
{
  Title = "AgiliTrain",
  BackgroundImage = new Uri("background.png", UriKind.Relative),
  Count = 3,
};

// Update the default tile
firstTile.Update(newData);

You can create the StandardTileData instance to contain the new, updated information then call the ShellTile’s Update method to update the tile. This updates the tile immediately.

Creating New Live Tiles

In addition, you can create new tiles with the same classes:

var newTile = new StandardTileData()
{
  Title = "A Deep Link",
  BackgroundImage = new Uri("background.png", UriKind.Relative),
  Count = 42,
};

var uri = "/DeepLink.xaml?state=From a Live Tile";

ShellTile.Create(new Uri(uri, UriKind.Relative), newTile);

The StandandTileData includes information about the new Live Tile. You also need a Uri that points to a deeper part of the application. In this case the Uri points at a deeplink.xaml file that is in my project and I am including query string information. This Uri is important as each tile must point at a different Uri to your application. Finally you can use the ShellTile.Create method to then create the new tile.

When the Create method is called, your application will be suspended and the user will be taken to the Live Tile on the home screen. This behavior is to prevent unwanted new Live Tiles. This makes it clear that the current app is the one adding the Live Tile and allows the user an opportunity to remove it. Hitting the back button returns them to your application (with Fast App Switching).

Updating Secondary Live Tiles

If you need to update tiles that are on the home screen, you can use the same method used earlier to find the default tile to find these secondary tiles. Usually you would use an Uri to do the search like so:

var uri = new Uri("/DeepLink.xaml?state=From a Live Tile", 
                  UriKind.Relative);

var myTile = ShellTile.ActiveTiles.Where(t => t.NavigationUri == uri);

// Update the tile
if (myTile != null)
{
  // ...
}

Live Tile Backs

Finally, any of these Live Tiles now can also have information on the back of the tile. This back of the tile is occasionally shown by the home screen and should be used to show additional, but not critical information. The StandardTileData class contains properties for the background. The background contains a different format. You can see the back of a tile in the image above (the third Live Tile). The back of the Live Tile is handled with these additional properties:

BackTitle: The small text on the bottom of the tile.
BackContent: A short piece of text that takes most of the tile
BackBackgroundImage: An image that takes the whole space of the back of the tile (must be 173x173 and be .png file).

You can see these properties used below:

var newTile = new StandardTileData()
{
  Title = "A Deep Link",
  BackgroundImage = new Uri("background.png", UriKind.Relative),
  Count = 42,
  BackContent = "This is the back",
  BackTitle = "The Back",
  BackBackgroundImage = new Uri("http://foo.com/moonimage.jpg")
};

var uri = new Uri("/DeepLink.xaml?state=From a Live Tile", 
                  UriKind.Relative);

var myTile = ShellTile.ActiveTiles.Where(t => t.NavigationUri == uri);

Make sense?