***** 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"
};
appTile.Update(standardTile);
}
}
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:

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"
};
foundTile.Update(liveTile);
}
}
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)
{
foundTile.Delete();
}
}
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