Secondary Tiles– Part 1: Creation

Mango From Scratch

Tiles come in two flavors: Application Tiles and Secondary Tiles.  The secondary tile is SECONDARY 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.

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Essentials, Mango, WindowsPhone and tagged . Bookmark the permalink.

4 Responses to Secondary Tiles– Part 1: Creation

  1. Pingback: Tile Notifications Made Easy | WP7 Developers Links

  2. Zaakiy Siddiqui says:

    Thanks for the simple tutorial Jesse.

  3. Gaurav Bhushan says:

    Hi Jesse,
    Currently i am migrating my project from VS2005 to VS2008.But i am getting 395 reference error.i am not able to fix it.If possible plz sutggest me in this regard.
    Gaurav Bhushan
    Hexaware Tech. Lmtd
    Asso. Software Developer
    Ph:09960289235 India

  4. Pingback: Anonymous

Leave a Reply

Your email address will not be published.