Advanced transparent live tiles with count for windows phone

April 3rd, 2012 by Håkan Reis - .Net

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:

   

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:

1 2 3 4 5 6 7 8 9 10

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:

1 2 3 4 5 6 7

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

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

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 & gt ; 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      canvas . Children . Add ( image ) ;      canvas . Children . Add ( textBlock ) ;        // Render all of it to the WritableBitmap      var wbmp = new WriteableBitmap ( TILE_SIDE , TILE_SIDE ) ;        wbmp . Render ( canvas , null ) ;      wbmp . Invalidate ( ) ;        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 andalpha 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 forWritabelBitmapEx. 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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

private void SaveTileImage ( WriteableBitmap wbmp ) {      using ( var store = IsolatedStorageFile . GetUserStoreForApplication ( ) )      {          if ( store . FileExists ( TILE_IMAGE_URI ) )              store . DeleteFile ( TILE_IMAGE_URI ) ;          var stream = store . OpenFile ( TILE_IMAGE_URI , FileMode . OpenOrCreate ) ;          wbmp . WritePNG ( stream ) ;          stream . Close ( ) ;      } }   public void UpdateTileIcon ( ) {      var tileData = new StandardTileData      {          BackgroundImage = new Uri ( "isostore:/" +              TILE_IMAGE_URI , UriKind . RelativeOrAbsolute ) ,          Title = "Grymt" ,      } ;      var tile = ShellTile . ActiveTiles . First ( ) ;      tile . Update ( tileData ) ; }

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

public void CompensateForRender ( int [ ] bitmapPixels ) {      if ( bitmapPixels . Length == 0 ) return ;        for ( int i = 0 ; i & lt ; bitmapPixels . Length ; i ++ )      {          uint pixel = unchecked ( ( uint ) bitmapPixels [ i ] ) ;            double a = ( pixel & gt ; & gt ; 24 ) & amp ; 255 ;          if ( ( a == 255 ) || ( a == 0 ) ) continue ;            double r = ( pixel & gt ; & gt ; 16 ) & amp ; 255 ;          double g = ( pixel & gt ; & gt ; 8 ) & amp ; 255 ;          double b = ( pixel ) & amp ; 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 & amp ; 0xFF000000 ) | ( newR & lt ; & lt ; 16 ) | ( newG & lt ; & lt ; 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.