Laurent Bugnion (GalaSoft)

At IdentityMine, we had the chance to develop a few applications featuring the new Windows Phone 7 features coming up in the update codenamed “Mango”. This series will showcase a few of the new features included in Mango that we used in those apps.

Part 1: Adding a new live tile to the start page.

Part 2: Starting a Bing Maps navigation.

Part 3: Updating a Live Tile locally (coming soon).

Part 4: Adding your app to Bing Search Extras (coming soon).

The feature

One of the most recognizable features of Windows Phone 7 is the start page with the tiles; some of them are “live tiles”, i.e. have specific information about the state of the app. For instance, the email tile displays the number of unseen emails. In some cases, the tiles can be more complex, for example displaying the current weather for a given location.

Until Mango, there could be only one tile per application. With Mango however, an application can create additional tiles on the home page, and these tiles can deep link to specific pages in the application. They can also have query parameters that the application can read and use to configure itself.

Adding a new live tile

Adding a live tile to the home page is done with the help of the ShellTile class. The information about the tile is contained into a StandardTileData instance. Note that tiles can have a front and a back image. If you define a back image, the tile will flip periodically to reveal both sides.

var newTile = new StandardTileData();

newTile.BackgroundImage = new Uri(
    "/MyTileFrontSide.png", 
    UriKind.Relative);

newTile.BackBackgroundImage = new Uri(
    "/MyTileBackSide.png", 
    UriKind.Relative);

ShellTile.Create(new Uri(
    "/Views/DetailView.xaml?ProductId=12345", 
    UriKind.Relative), 
    newTile);

Very important: The pictures used for the live tile must be 173x173 pixels PNG or JPG, and added to the project with the Build Action set to Content. To change this, select the images in the Solution Explorer, press F4 to display the Properties and then change the Build Action to Content, and the “Copy to Output Directory” property to “Copy if Newer”.

Note that in the code above, the URIs for the BackgroundImage and the BackBackgroundImage properties can be web URLs, for example generated by server-side code according to a parametered URI. In that case, the UriKind must be Absolute instead of Relative.

However, at the time of writing, if the URIs for BackgroundImage and BackBackgroundImage are set to an absolute Web URL, the deep linking seems to fail. I will track this issue with Microsoft.

After a live tile has been added, the home page is displayed automatically.

Getting the query string

When the pinned tile is tapped, the application is started and the deep-linked page is displayed. The query string (in this case the “ProductId=12345”) can be obtained with the following code:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    if (NavigationContext.QueryString.ContainsKey("ProductId"))
    {
        MessageBox.Show(NavigationContext.QueryString["ProductId"]);
    }
}

Getting a pinned tile

If needed, the application can get a list of the pinned tiles with the following code:

private void FindTileClick(object sender, RoutedEventArgs e)
{
    var tileFound = ShellTile.ActiveTiles
        .FirstOrDefault(
        tile => tile.NavigationUri.ToString().Contains("DetailView"));

    if (tileFound != null)
    {
        MessageBox.Show(
            "Found: " + tileFound.NavigationUri.ToString());
    }
    else
    {
        MessageBox.Show("No such tile");
    }
}

Deleting a pinned tile

Finally, a pinned tile can also easily be deleted, with the following code:

var tileFound = ShellTile.ActiveTiles
    .FirstOrDefault(
    tile => tile.NavigationUri.ToString().Contains("DetailView"));

if (tileFound != null)
{
    tileFound.Delete();
    MessageBox.Show("Tile deleted!");
}
else
{
    MessageBox.Show("No such tile");
}

Conclusion

Adding new tiles to the home page can be a really fun way to help the user customize his experience. The deep linked navigation offers multiple points of entry in your application, which is a much better user experience than having to go through the home page at all times. With this addition, the live tiles (which is quite a unique feature of Windows Phone 7) are taking yet another dimension.

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

• Share This Post:
• 
• 
• 
•   Short Url: http://wblo.gs/br8