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:
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.
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:
In the Data window click the icon “Create sample data from class” and select the TileData class.
Edit the sample data so we have some nice data to show. I used the following data:
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.
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.
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.
Download Sample project:
Geert van der Cruijsen