Secondary Tiles– Part 1: Creation

Mango From Scratch

Tiles come in two flavors: Application Tiles and Secondary Tiles.  The secondary tile is always created programmatically, typically based on an interaction with the user.  Secondary tiles are often used to provide user-specific data such as the weather or headlines in the user’s local area.

Secondary tiles are placed on the start page as soon as they are created (and you can even have a secondary tile on Start without having an application tile there.)

Secondary tiles can have a back as well as a front, and if there is a back the tile will flip between them.  You may set a number of properties for the tile:

• Background image for the front of the tile
• Title for the front of the tile
• Count (an integer from 1 to 99 – if not set it will not appear).
• BackBackgroundImage for the back of the tile
• BackTitle for the back of the tile
• BackContent – a string displayed on the back of the tile

Creating and manipulating secondary tiles can feel a bit overwhelming at first, but the process is pretty straightforward.  In this first of a series of mini-tutorials we’ll look at how to create a secondary tile.

To get started, create a new Windows Phone application with a single button named Create and with the contents: Create.  All the work will be done in the event handler, which we’ll build in the constructor as an anonymous method,

ShellTile secondaryTile =
    ShellTile.ActiveTiles.FirstOrDefault(
    x => x.NavigationUri
        .ToString()
        .Contains( "TileID=Secondary" ) );

This first line creates a local variable secondaryTile of type ShellTile and sets it to the result of searching for a tile whose NavigationUri contains the string Secondary.  If this is found it will be returned, otherwise the default value (null) will be returned.

Assuming we get back null the tile has not yet been created, and we can create it now. To do so we’ll need to pass in the Uri of the tile and an instance of StandardTileData.  It is in the latter that we’ll assign all the properties for the tile,

if (secondaryTile == null)
{
    StandardTileData NewTileData = new StandardTileData
    {
        BackgroundImage =
             new Uri("Blue.jpg", UriKind.Relative),
        Title = "Secondary Tile",
        Count = 1,
        BackBackgroundImage =
             new Uri( "Red.jpg", UriKind.Relative ),
        BackTitle = "Current Weather",
        BackContent = "72 degrees, Sunny",
    };

Note that the BackgroundImage refers to Blue.jpg and the BackBackgroundImage refers to Red.jpg. You can create these easily by creating jpg files that measure 173 x 173 and then adding them to the project (Add->Existing…).  Be sure to set their Build Action to Content.

We are now ready to create the secondary tile

ShellTile.Create(
    new Uri(
        "/MainPage.xaml?Secondary",
        UriKind.Relative ),
        NewTileData );

As soon as this last line executes, the program will be suspended and control will return to the Start page where the tile will be displayed.