Derik Whittaker



Working with Live Tiles in WP7 Mango–Creating, Updating and Deleting them

***** UPDATE *****
If you would like to see a video on this topic check out Episode 195 @ Dimecasts.Net

When Windows Phone 7 was first announced one of its distinguishing features of the OS compared to the iPhone or the Android was its Live Tile concept.  These live tiles allowed for the content on the tile to be updated and changed remotely to signify a change in the backend application, the weather applications where the info on the tile changes to reflect the current weather at your location is the typical example.  This was a cool feature and all but with Mango they have stepped that up a notch.

In this post we will take a look at how we can create not only Application Tile content but also take a look at how to Create, Edit and Delete secondary tiles.  A secondary tile is a tile which can provide a deep link directly into a given screen in your application.  This will allow someone to skip directly to a page w/ important data with ease.

Creating the Application Tile via code

public void CreateApplicationTile()
    var appTile = ShellTile.ActiveTiles.First();

    if (appTile != null)
        var standardTile = new StandardTileData
            Title = "Live Tile Demo",
            BackgroundImage = new Uri("Images/SecondaryTileFrontIcon.jpg", UriKind.Relative),
            Count = 13,	// any number can go here, leaving this null shows NO number
            BackTitle = "Back Title",
            //BackBackgroundImage = new Uri("Images/ApplicationTileIcon.jpg", UriKind.Relative),
            BackContent = "Live Tile Demo Back Title"


When creating, updating or deleting any tiles you will work from the ShellTile class which can be found in the Microsoft.Phone.Shell namespace.  This class has various static methods on it which will allow you to work with the tiles you want to create.

Also, when creating the tiles you do NOT need to fill out items such as Count (leaving null will show no value) or any of the Back tile properties (BackTitle, BackBackgroundImage and BackContent).  really the only items you should populate is the Title and the BackgroundImage

Finally, in the Beta build of WP7 Mango creating this application tile via code does NOT actually pin your application to the start screen, it simply sets up the metadata so that when it is pinned it will be populated.

Creating the Secondary Tile via code

So what is a Secondary tile?  A secondary tile is a tile which can be created programmatically and is similar to an Application tile but with one big difference.   An Application tile will simply launch the application where a Secondary tile allows for you to launch the application and navigate directly to a given page in your application.

public void CreateSecondaryTile()
    var foundTile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("DetailId=123"));

    if (foundTile == null)
        var secondaryTile = new StandardTileData
                                    BackgroundImage = new Uri("Images/SecondaryTileFrontIcon.jpg", UriKind.Relative),
                                    Title = "Secondary Tile",
                                    Count = null,
                                    BackTitle = "Back of Tile",
                                    BackContent = "You can put some data here......",
                                    //BackBackgroundImage = new Uri("Images/SecondaryTileFrontIcon.jpg", UriKind.Relative)
        ShellTile.Create(new Uri("/Views/DetailsPage.xaml?DetailId=123", UriKind.Relative), secondaryTile);

After running the code above you should notice one thing very quickly and that is that you will be navigated away from your application and back to the start menu.  This is currently by design (although I think it is a really bad idea) and will cause your application to tombstone.  Your users can get back into your application by either clicking on the tile or hitting the back  button. 

One key item here is that when you call the .Create method on the Shelltile object make sure you put a valid Uri.  This URI along with the provided query string will allow WP7 Mango to navigate directly to this page w/ the provided query string data.  Now when the user navigates to this page you WILL be required to parse out the content of the query string in order to repopulate the screen.

Also, your tiles should look something like below:
image    image

Updating an existing Tile via code

public void EditExistingTile()
    var foundTile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("DetailId=123"));

    if (foundTile != null)
        // what sucks here is we cannot get access to the information on the existing tile...
        var liveTile = new StandardTileData
            Title = "New Tile Text"


The code above will search for (via the ShellTile object) a given tile and overlay any file tile with a new StandardTileData object.  What I totally hate here is that I have not seen any way to get ahold of the metadata on the found tile (Title, image, count, etc) which means you must repopulate it from scratch when you want to make a change.  This is not a huge issue but just sucks.

This will NOT cause the user to navigate away from the app it will simply update any found secondary tile.

Deleting an existing Tile via code

public void DeleteExistingTile()
    var foundTile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("DetailId=123"));

    // If the Tile was found, then delete it.
    if (foundTile != null)

If we can find an existing tile we can simply call the ‘Delete’ method on it.  This will NOT cause the user to navigate away from the app it will simply remove any secondary tile.

As you can see working with the Live Tiles in WP7 mango is cake which is great because this is an awesomely powerful new feature.

Till next time,

Posted 07-16-2011 2:24 PM by Derik Whittaker
Filed under: , ,


About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Google Reader or Homepage Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of
Red-Gate Tools For SQL and .NET


SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
NHibernate Profiler
Balsamiq Mockups
JetBrains - ReSharper
Web Sequence Diagrams
Ducksboard<-- NEW Friend!


Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers


Community Server (Commercial Edition)