In this short article I’ll show you the most interesting way, how to create custom Live Tiles using generated Png images.

When creating Live/Pinned Tiles for your Windows Phone application, you have basically two options, how to create them.

The easier way is to use just ShellTile object, define static front and back image, strings for the front and back tile and you are done.

StandardTileData NewTileData = new StandardTileData
{
    Title = "title",
    BackgroundImage = new Uri("", UriKind.Relative),
    Count = 0,
    BackTitle = "back title",
    BackBackgroundImage = new Uri("", UriKind.Relative),
    BackContent = "back content"
};

Basic tutorial, how to use this mechanism is here: http://msdn.microsoft.com/en-us/library/hh202948(v=vs.92).aspx

or here: http://www.silverlightshow.net/items/Windows-Phone-7.5-Using-advanced-tiles-API.aspx

There is also more flexible way, how to create Live Tile – to render your own images and use them as the BackgroundImage for tiles. Using this mechanism you can put anything you want on the tile – several lines of text, multiple arranged images, etc. This generated Live Tile is especially good for displaying interactive content generated using Background Agent. Great example, how generated Live Tile is used, is in application AppFlow:

http://www.windowsphone.com/s?appId=578ef361-c265-46b7-b6f4-63cbd7fbefe0

To create your custom tile you need only your own UserControl, filled with target tile data and then rendered into WriteableBitmap and saved into Jpeg image using built-in extension method SaveJpeg. Simple tutorial, how to do it, is here:

http://windcape.posterous.com/how-to-generate-a-custom-live-tile-directly-o

The problem with this solution is obvious – jpeg image format is lossy and you can’t use transparency in there, if you want to create tile showing the background accent color.

The Pro solution is to save the rendered image into Png format with transparency. This sounds pretty simple, but the problem is how to save it as Png? There is no “SavePng” in Windows Phone libraries, but luckily this guy created PngEncoder lib that works just fine. All you need is add PngEncoder and EditableImage class into your project and write this simple extension method  SavePng for saving WriteableBitmap into target file in isolated storage.

 public void SaveTile(UserControl tile, string fileName)
 {
    // call Measure and Arrange because Tile is not part of logical tree
    tile.Measure(new Size(173, 173));
    tile.Arrange(new Rect(0, 0, 173, 173));
 
    // render the Tile into WriteableBitmap
    WriteableBitmap tileImage = new WriteableBitmap(173, 173);
    tileImage.Render(tile, null);
    tileImage.Invalidate();
 
    // save is as Png file
    using (IsolatedStorageFileStream stream = IsolatedStorageFile.GetUserStoreForApplication().CreateFile(fileName))
    {
       tileImage.SavePng(stream);
    }
 }

Author of the standalone PngEncoder: http://blogs.msdn.com/b/jstegman/archive/2008/10/30/updated-source-for-image-samples.aspx

Note you can also use ImageTools, but this method I’ve used is pretty straightforward.

Working sample, how to use generated Tile saved into Png: http://www.suchan.cz/wp7/samples/ProTile.7z

Several useful hints to remember about Live Tiles:

– you cannot have two tiles with the same navigation Uri, if you try to add the second, you get Exception
– you need to save your generated images in /Shared/ShellContent/ folder, if you want to use them on Tiles
– if you don’t know, how to generate unique file name for each image, use simple trick: navigationUri.GetHashCode().ToString()
– use this for gathering the query string from navigation Uri: NavigationContext.QueryString.TryGetValue(“id”, out value) And that’s all, no magic, just Pro Png Live Tile 🙂