Since Windows Phone 7 Mango you are able to create your own Live Tiles. To be more precisely, you can specify content, titles and images for the front side as well as for the back side. The images can be taken from the web or from the app’s isolated storage. Sometimes it may be necessary to build a Live Tile like the one of the People Hub.
As you can see I’ve created a tile with 9 custom images inside of it. These photos are loaded by a background agent and dynamically merged into one image. I’d like to explain how I did this.
At first, provide a list of images to load:
private const string FLICKR_LIVE_TILE = "/Shared/ShellContent/flickr_live_tile.jpg";
private object imageCountLock = new object();
private const int IMAGES_TO_LOAD = 9;
private const int IMAGE_DIMENSIONS = 57;
private static string PhotoLiveTileNavUri = "/MainPage.xaml?list=flickr";
private static string TwitterLiveTileNavUri = "/MainPage.xaml?list=twitter";
// Just using the DisplayImage class with an attribut called "ThumbnailImage".
//The size of the image has to be really small.
public void UpdateTileImages(IList images)
{
WebClient webClient = new WebClient();
int imageLoadedCount = 0;
var maxItems = Math.Min(images.Count, IMAGES_TO_LOAD);
Stream[] streams = new Stream[maxItems];
webClient.OpenReadCompleted += ((s, e) =>
{
lock (imageCountLock)
{
streams[imageLoadedCount] = e.Result;
imageLoadedCount++;
if (imageLoadedCount == maxItems)
{
CreateBackgroundImage(streams);
}
else
webClient.OpenReadAsync(new Uri(images[imageLoadedCount].ThumbnailImage, UriKind.Absolute));
}
});
webClient.OpenReadAsync(new Uri(images[imageLoadedCount].ThumbnailImage, UriKind.Absolute));
}
