Creating dynamic Windows Phone 7 live tile images client side

One of the best parts of windows phone that makes Windows Phone stand out are the live tiles. Microsoft enables you to do a few out of the box customizations to the live tiles but  when you want to go all out most people think you’ll need to generate the images on a server using ASP.NET and then send them to the application as a notification. This is not always the case, you can also create custom tiles client side running on your phone to show custom messages or imitate the outlook tile for example with a number of how many unread messages you have.

First lets sum up what you can do by default and after that we’ll go into going beyond this and creating even better live tiles by adding multiple images or multiple texts to a live tile using the colors and fonts of your choice.

By default you can set the following properties on a live tile

  • Title (shown in the bottom left)
  • Count (black circle with a number between 1 and 99)
  • BackGroundImage (image to show on your tile)
  • BackTitle (shown in the bottom left on the backside of the tile)
  • BackContent (piece of text shown on the backside of the tile)
  • BackBackGroundImage (Image on the backside of the tile)

Ok this is pretty cool but what if we want to make something like Runkeeper does in their app as shown in the following picture:runkeeper live tile

So how do we generate such image on the client side in Silverlight? The trick behind all this is that you can render a user control as a WriteableBitmap and store this image in the isolated storage of your phone so you can use it as the tile BackGroundImage. The final working codesample is linked at the bottom of this post but I’ll show all code to build this example in this blogpost.

We start of creating a new Silverlight for Windows Phone project. Normally I would use MVVM but for this example I want to make it as simple as possible to focus on the tile part.

We’ll create a new UserControl called “TileControl” which is going to be used as our live tile and a “TileData” class to be used for containing the data we’ll be showing on the  live tile.

   1: public class TileData

   2: {

   3:     public string Text1 { get; set; }

   4:     public string Text2 { get; set; }

   5:     public string ImageSource { get; set; }

   6: }

Create the TileControl, set it to 173 by 173pixels and set the background to use PhoneAccentBrush so the live tile has the color the user has selected. Lets make our designers happy and open up the TileControl in expression blend so our designers (or if you are a devigner you!) can design our live tile with dynamic data.

Add a few text boxes and a image to the control so you have something like this:

   1: <Grid x:Name="LayoutRoot" Width="173" Height="173" Background="{StaticResource PhoneAccentBrush}">

   2:     <TextBlock Height="55" Margin="4,4,3,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontSize="24"/>

   3:     <TextBlock Margin="0,64,-17,-3" TextWrapping="Wrap" FontSize="64" HorizontalAlignment="Right" Width="70" Foreground="White"/>

   4:     <Image Margin="6,55,0,13" Width="100" HorizontalAlignment="Left"/>

   5: </Grid>

In the Data window click the icon “Create sample data from class” and select the TileData class.

create sample data

Edit the sample data so we have some nice data to show. I used the following data:

   1: <CustomLiveTileExample:TileData xmlns:CustomLiveTileExample="clr-namespace:CustomLiveTileExample" 

   2: ImageSource="ApplicationIcon.png" 

   3: Text1="The first Text"

   4: Text2="9"/>

Now drag the fields from the test data window to the text and image control to bind them. After this your XAML should look like this and the design surface should already show a nice live tile with an image and 2 texts. In our code we’ll databind this control to a programmatically filled TileData object.

   1: <Grid x:Name="LayoutRoot" Width="137" Height="137" Background="{StaticResource PhoneAccentBrush}" d:DataContext="{d:DesignData /SampleData/TileDataSampleData.xaml}">

   2:     <TextBlock Height="55" Margin="4,4,3,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontSize="21.333" Text="{Binding Text1}"/>

   3:     <TextBlock Margin="0,50,-10,11" TextWrapping="Wrap" FontSize="48" HorizontalAlignment="Right" Width="70" Foreground="White" Text="{Binding Text2}"/>

   4:     <Image Margin="12,51,65,17" Width="60" Source="{Binding ImageSource}"/>

   5: </Grid>

blend tile

The live tile is ready so lets head back to the main page of our application and add the logic to set the live tile. To trigger the creation of the live tile I’ve added a button on the page and attached a click event. in the button1_Click method I’ll add all code needed to create the live tile.

   1: private void button1_Click(object sender, RoutedEventArgs e)

   2:         {

   3:             TileControl frontTile = new TileControl();

   4:             TileData tileData = new TileData() { ImageSource = "/ApplicationIcon.png", Text1 = "The first text", Text2 = "8" };

   5:             frontTile.DataContext = tileData;

   6:  

   7:             frontTile.Measure(new Size(173, 173));

   8:             frontTile.Arrange(new Rect(0, 0, 173, 173));

   9:             var bmp = new WriteableBitmap(173, 173);

  10:             bmp.Render(frontTile, null);

  11:             bmp.Invalidate();

  12:  

  13:             var isf = IsolatedStorageFile.GetUserStoreForApplication();

  14:             var filename = "/Shared/ShellContent/tile.jpg";

  15:  

  16:             if (!isf.DirectoryExists("/Shared/ShellContent"))

  17:             {

  18:                 isf.CreateDirectory("/Shared/ShellContent");

  19:             }

  20:  

  21:             using (var stream = isf.OpenFile(filename, System.IO.FileMode.OpenOrCreate))

  22:             {

  23:                 bmp.SaveJpeg(stream, 173, 173, 0, 100);

  24:             }

  25:  

  26:             var data = new StandardTileData

  27:             {

  28:                 BackgroundImage = new Uri("isostore:" + filename, UriKind.Absolute)

  29:             };

  30:  

  31:             ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), data);

  32:         }

First we’ll create a TileControl object called frontTile, then we’ll fill it with our tileData by creating a TileData object and setting the DataContext to tileData. After this we’ll create a WriteableBitmap and set it to 173 by 173 pixels. Well use the Render method to render the usercontrol as a bitmap.

After that we’ll check if the directory in the isolated storage exists and if it doesn’t we’ll create it. After that we’ll open the tile file and use the SaveJpeg method to save the WritableBitmap as a .jpg file (bit of a shame you can’t do png that’s why we’ve set the background color to the PhoneAccentColor). after saving the image the only thing we need to do is Call Create on the ShellTile and we’re done.

Lets run the app, press the button and there it is, our dynamically created livetile.

app1    app2

Download Sample project:

Happy coding!

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

4 thoughts on “Creating dynamic Windows Phone 7 live tile images client side

  1. Pingback: Creating dynamic Windows Phone 7 live tile images client side

  2. Unfortunately – I’ve noticed that there are many cases when a control that doesn’t live on the visual tree doesn’t render quite right, even with a measure and arrange, a lesson learnt by bitter experience writing StormGlass.

    Oh, and you can use to use http://imagetools.codeplex.com/ to render PNGs :)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>