Advanced transparent live tiles with count for windows phone

The live tiles are brilliant to show information regarding your application without forcing the user to open it up. The basic live tile gives you two sides with some text, a count and ability to set background images. Outlined in the MSDN documentation, and thousands sites with getting started information. However, when you want to do something more advanced your mostly on your own. Here is a walkthrough with how you handle images, texts and the hardest part transparencies.

In the post Crafting the Øredev Windows Phone app live tile we explained the basic idea how this works. Using a WritableBitmap for composition and saving that result in isolated storage for your tile. Here the focus is on saving it as transparent images and how to place and define text and fonts.

Designing your live tile

The first idea in my head was to have a live tile that was more like the messaging, phone an mail tiles. I start out with a sketch of what I want to accomplish, and move that over Photoshop to handle the image parts that are needed for the tile. The first sketch was something like this:


I wanted to have a count that follows the style and tone of the native application tiles (messaging, mail, etc). I also wanted it to be transparent and follow white on accent color. After some Photoshopping I ended up with this look as empty and with a count notification:

WithoutCount   WithCount

This design above already have space for the count but you could easily extend the code to use two images, one for the count and a bigger empty one without the count.  Other things that are important is that the correct size and font weight is used as well as everything being transparent to let the accent color come through. I cut out the graphics, save it to a PNG, 173×173 with alpha channel to get smooth lines.

PNG format caveat

Here I made a little mistake: Make sure you save it in the correct PNG format – Windows Phone supports 8 pixel color depths + alpha (ARGB32), by mistake I first saved with 16 bit color depth. The result is horrible…

Composing with WritableBitmap

As with the Øredev tile you start out with images, canvas and WritableBitmap as the tools. First off  is to open the background image with the following:

private void StartCreateTileImage()
    var bmp = new BitmapImage
        CreateOptions = BitmapCreateOptions.None

    bmp.ImageOpened += OnBackgroundBmpOpened;
    bmp.UriSource = new Uri("Background.png", UriKind.RelativeOrAbsolute);

Even if the image is included in the project as content it will be loaded asynchronously, thus you need to handle it on the Image opened event. First is a call for creating the tile image, then save to isolated storage and finally update the live tile, like this:

private void OnBackgroundBmpOpened(object sender, RoutedEventArgs e)
    var img = sender as BitmapImage;
    var wbmp = CreateTileImage(img);

So for the details of CreateTileImage(image), this is where the the composition is taking place. We take the image that was read, render the text and place it all in a canvas to align it properly. And after that we render it with WritableBitmap:

private WriteableBitmap CreateTileImage(BitmapImage img)
    var image = new Image { Source = img };

    Canvas.SetLeft(image, 0);
    Canvas.SetTop(image, 0);

    // If the _count is 0 you want to clean the text block
    var textBlock = new TextBlock
        Foreground = new SolidColorBrush(Colors.White),
        Text = _count > 0 ? _count.ToString() : null,
        FontSize = 64,
        FontFamily = new FontFamily("Segoe WP SemiBold")

    // Measure the actual size of the TextBlock, this is with
    // the characters full hight/width (includning char spaceing)
    var width = textBlock.ActualWidth;
    var height = textBlock.ActualHeight;

    // Place the text in the lower right corner
    Canvas.SetLeft(textBlock, 165 - width);
    Canvas.SetTop(textBlock, 176 - height);

    // Create a canvas and place the image and text on it
    var canvas = new Canvas
        Height = TILE_SIDE,
        Width = TILE_SIDE

    // This is where the images is placed
    // based on the Canvas.SetLeft & SetTop values

    // Render all of it to the WritableBitmap
    var wbmp = new WriteableBitmap(TILE_SIDE, TILE_SIDE);

    wbmp.Render(canvas, null);

    return wbmp;

Notes on image composition

  • Use a canvas to compose on and remember to set top/left. There are no bottom/right so you have to calculate where stuff goes from top/left
  • ActualWidth/ActualHeight gives you the calculated dimensions for a UI element
  • Use FontFamily = new FontFamily(“Segoe WP SemiBold”) to set the font family or you will get Segoe Regular

Saving as PNG

Next up is saving the tile. The preferred format to use is PNG that will support lossless transparent and alpha blended images, just what we want. Unfortunately, saving to PNG isn’t supported out of the box. There are a number of libraries available, for example ImageTools, or the additional extension methods for WritabelBitmapEx. But with live tiles, you often want to do the update in a background agent, the encoder needs to be as small as possible. Try to keep from adding libraries. I found PNGWriter from ToolStack to be compact and it doesn’t rely on any external libraries. A small drawback may be that it doesn’t support compression but for this purpose I don’t see it as a big limitation.

With the code files in place I could easily save the image and then update the tile to use as a background image instead of the original icon. The following code block will do that for you:

private void SaveTileImage(WriteableBitmap wbmp)
    using (var store = IsolatedStorageFile.GetUserStoreForApplication())
        if (store.FileExists(TILE_IMAGE_URI))
        var stream = store.OpenFile(TILE_IMAGE_URI, FileMode.OpenOrCreate);

public void UpdateTileIcon()
    var tileData = new StandardTileData
        BackgroundImage = new Uri("isostore:/" +
            TILE_IMAGE_URI, UriKind.RelativeOrAbsolute),
        Title = "Grymt",
    var tile = ShellTile.ActiveTiles.First();

A couple of things regarding saving tile images

  • If you want to do the saving in a background agent avoid using large image libraries
  • The image has to be saved in /shared/shellcontent to be available for the tile
  • When specifying the URI add isostore:/ so that the Tile knows where to read from

Smoothing it out

The result is almost the desired, all the things ended up in the right places. But there is a strange shadow, if you look close (or check the zoomed in picture) you can see a dark border where it should have been alpha transparencies:


Some give up here and instead use a background from the current theme color and save it as JPG. As soon as the user change the color theme it will get ugly. For me, this is not good enough and I needed a complete solution.

The problem is with the internal representation of each pixels. Normally you would think it’s a 32bit value with 8bit for each color (RGB) and an 8bit alpha channel – ARGB32. However, to speed up composition you there is something called alpha pre-multiplication. Go ahead and read the article, it gives you a good explanation. Anyway, this is why we get the dark line effect. If you look close you can actually read about it in the MSDN documentation, it’s down there in the remarks. Don’t see it? Let me show you:


I found a good snippet of code that will help out with the algorithm from the article and remove the pre-multiplication from your bitmap:

public void CompensateForRender(int[] bitmapPixels)
    if (bitmapPixels.Length == 0) return;

    for (int i = 0; i < bitmapPixels.Length; i++)
        uint pixel = unchecked((uint)bitmapPixels[i]);

        double a = (pixel >> 24) & 255;
        if ((a == 255) || (a == 0)) continue;

        double r = ( pixel >> 16 ) & 255;
        double g = ( pixel >> 8 ) & 255;
        double b = ( pixel ) & 255;

        double factor = 255 / a;
        uint newR = (uint)Math.Round(r * factor);
        uint newG = (uint)Math.Round(g * factor);
        uint newB = (uint)Math.Round(b * factor);

        // compose
        bitmapPixels[i] = unchecked((int)(( pixel & 0xFF000000 ) | ( newR << 16 ) | ( newG << 8 ) | newB ));

Running this just before saving the PNG will give us the end result we want. Now we have a smooth and transparent live tile for our application.


Look, no strange colors!

Final thoughts

  • The Alpha Pre-multiplication will still affect the values a little, but it will be good enough
  • Too small letters or thin lines will let the accent color bleed especially in purple avoid those
  • If you do a lot of image handling it’s not the most effective code but for most tile updates it will do

Also, I have added a sample project for you to look into that does all the above on the main tile.

Now, please clean up your tiles and make them pop!

This Post Has 5 Comments

  1. Hannes


    great article + exactly what i was lookin for!
    CompensateForRender.cs => Line 13 and 22 shows html code that should not be here, i guess. ;)

  2. Håkan Reis


    The €#@! publishing system thought it would be cool to change certain combinations to a smiley…

  3. Shikhar Tanwar

    Probably one of the best article i’ve read on custom live tiles.. So wonderfully explained.. Awesome.. Thanks a lot!

  4. armin

    very good
    but when we use CompensateForRendr in background task, it will cause out of memory exception error

    1. Håkan Reis

      You have to watch the memory consumption closely as the background task is very limited. It’s hard to know exactly what is wring here. I would make sure you not use images that are bigger then necessary. Maybe even. First trying it out without images altogether. The memory performance tools is probably where you want go first to check.

Leave a Reply