Windows Phone 8 : Phone Integration - Live Tiles (part 2)

IEnumerable<ShellTile> tiles = ShellTile.ActiveTiles;

// Get the default tile
var tile = tiles.First();

The ShellTile class represents a tile for the home screen. The Active-Tiles property is a collection of these ShellTile objects. The first one is always the default tile. This class allows you to update the default tile. To update the default tile, you can create a data structure that matches the style of live tile you want. For instance, to create a Flip style, you would use a class called FlipTileData that contains the data with which to update the tile:

IEnumerable<ShellTile> tiles = ShellTile.ActiveTiles;

// Get the default tile
var tile = tiles.First();

// The new tile information to use to update the tile
var tileData = new FlipTileData()
{
  Title = "Live Tile Updated!",
  Count = 54,
  BackgroundImage =
    new Uri("/Assets/Tiles/icon-336.png", UriKind.Relative),
  SmallBackgroundImage =
    new Uri("/Assets/Tiles/icon-159.png", UriKind.Relative),
  WideBackgroundImage =
   new Uri("/Assets/Tiles/icon-wide.png", UriKind.Relative),
};

// Update the Tile
tile.Update(tileData);

Calling the Update method will update the tile with the new information. If the default tile (in this case) has not been pinned yet, when the application is pinned it will include this new set of information instead of the information contained in the WMAppManifest.xml file.

The Flip style of icon supports both the front (which we set previously) and a set of properties for the back of the live tile. To set these, just set the rest of the properties like so:

var tileData = new FlipTileData()
{
  Title = "Live Tile Updated!",
  Count = 54,
  BackgroundImage =
    new Uri("/Assets/Tiles/icon-336.png", UriKind.Relative),
  SmallBackgroundImage =
    new Uri("/Assets/Tiles/icon-159.png", UriKind.Relative),
  WideBackgroundImage =
    new Uri("/Assets/Tiles/icon-wide.png", UriKind.Relative),
  BackTitle = "Live Tiles",
  BackContent = "This is standard content",
  WideBackContent = "This is even more content!"
};

These properties are used to specify what is on the back of the tile. You can also specify a background image if you don’t want to simply use the theme color as a background.

Be careful selecting the style of live tile in your WMAppManifest.xml file because you can’t change the style of your main live tile. This means when you update the main live tile, you have to use the correct StandardData derived class to update it (for example, FlipTileData, CycleTileData, and IconicTileData).

var tileData = new IconicTileData()
{
  IconImage =
    new Uri("/Assets/Tiles/icon-202.png", UriKind.Relative),
  SmallIconImage =
    new Uri("/Assets/Tiles/icon-101.png", UriKind.Relative),
  Count = 5,
  WideContent1 = "This is line 1",
  WideContent2 = "This is line 2",
  WideContent3 = "This is line 3"
};

var deepUri = new Uri("/DeepLinkPage.xaml?id=Hello World",
                      UriKind.Relative);

ShellTile.Create(deepUri, tileData, true);

You should notice that the ShellTile.Create method requires a URI to be specified. This URI is used as the location from which to launch the navigation in your application. This is how deep-linking works. You can see in this example the URI is going to a view we have called DeepLinkPage.xaml and I am passing in a query string to help that view know how to show the data the Live Tile is specifying. This URI must be unique for all secondary tiles, so if you try to create a new secondary tile with the same URI, it will throw an exception. In addition, the last parameter is required (there is an overload without the third parameter, but it’s there only for backward-compatibility). This last parameter specifies whether the tile supports a wide tile.

When ShellTile.Create is called, it takes the user to the home screen and scrolls to the new tile (to allow the user to move it on the home screen if she desires). This behavior is not overrideable. The purpose of going to the home screen is to prevent applications from hiding from the user the fact that they are adding new tiles. Because it deactivates the application, if the user did not want the Live Tile added, he could just delete it and not launch the nefarious application again.

You can find your own Live Tiles by interrogating the NavigationUri property of the ShellTile class (in the ActiveTile collection), like so:

var myTile = ShellTile.ActiveTiles
                      .Where(t => t.NavigationUri
                                   .OriginalString
                                   .Contains("DeepLinkPage.xaml"))
                      .FirstOrDefault();

// If it was found
if (myTile != null)
{
  // ...
}

After you find the appropriate tile, you can update it like you did the default tile:

  // If it was found
if (myTile != null)
{
  var tileData = new IconicTileData()
  {
    IconImage =
      new Uri("/Assets/Tiles/icon-202.png", UriKind.Relative),
    SmallIconImage =
      new Uri("/Assets/Tiles/icon-101.png", UriKind.Relative),
    Count = 15,
    WideContent1 = "It was updated!",
    WideContent2 = "This is line 2",
    WideContent3 = "This is line 3"
  };

  myTile.Update(tileData);
}

Typically you should change the tile with some information for the user to see that she should revisit your application (like updating the Count property).

If you need to change something else (like the NavigationUri), you need to delete the tile and re-create it. The ShellTile class allows you to delete a Live Tile (as long as it is not the default tile):

myTile.Delete();

On the whole, secondary tiles can be a very powerful feature, but the user will not necessarily tolerate a lot of tiles from a single application, so using this functionality judiciously is encouraged!