Crafting the Øredev Windows Phone app live tile

In November last year, it was once again time for the 2011 Øredev developer conference. For the 2010 conference, we at Jayway created a schedule app with a social twist – a puzzle game that you played by talking to other participants. When updating the app this year, we decided to make use of the live tile feature on Windows Phone. We were happy with the results and the added user value, and would like to share how we did it.

Deciding what to show

Since the app was going to be used throughout the conference, showing something about what’s coming up would be nice. At first we were thinking about showing upcoming session titles with speaker names etc – maybe one randomized at a time. But then, we ended up with something more personal and more graphical – thumbnails of upcoming speakers. Here’s what the tile looks like:

front:  tile_before_front         back: tile_before_back

Hence the front of the tile shows the speakers, and the back of the tile shows at what time the next sessions start. Instead of just using the back of the tile – we opted for giving the user as immediate information as possible – so whenever he/she would look at their start screen – something useful would be there, not just the app logo. This we think is a viable solution for this kind of short-term usage app, but maybe is not suitable for a lifetime app, like your bank, that you will (hopefully) keep forever and will not use every 5 minutes.

We put a finale in there as well; after the conference was over – the tile changed to:

front: tile_original_tile         back: tile_after_back

Nice huh? When the conference is over – the conference logo comes back as the app’s front tile and a nice message shows on the back. Maybe the message is a bit too much, but I think it’s a nice pointer to un-pin the app from your start screen. An app should be on the start screen for a reason– and this conference app does not really belong there once the conference is over.

Install size vs bandwidth usage

We bundled all speaker images with the app. This creates a larger file to install, but gives less data to download when updating the tile, and less hassle if you compare with downloading and caching. With lots of people coming from abroad, we thought it would be better to rely the dodgy conference wireless once during installation instead of on each tile update.

Implementing the tile

The of-the-shelf solution for updating a tile is very well documented here: updating the tile and running in the background. What can be a bit tricky is creating a fully customized tile, which is done by rendering a background image for the tile using WriteableBitmap. The blog post Customize a Windows Phone 7 Live Tile by John P Alioto helped me on the way.

The OnInvoke method first checks whether to reset the tile and remove the background agent, then launches the canvas setup on the current dispatcher. When not running on the dispatcher, cross threading issues keep popping up.

as you can see, the SetupCanvas only opens the background image then returns. Since the original tile file Background.png is a content file – we have to wait for the ImageOpened event to be raised before trying to render it – otherwise the result will only be black.

So, when the image is opened, we open all the images for all the speakers:

and finally, when all images have been opened, we render the image and update the tile:

The Control Canvas is used for layout of the tile. As guys who love Grid’s and dynamic layout – we first tried using a Grid with three columns and three rows, but could not get the images to render correctly. During a Windows Phone Code Camp at Jayway, Dag König nicely pointed us towards the Canvas which he had used in his Month Tile app – works beautifully. It’s probably just some Measure/Arrange-calls together with an Invalidate to get a Grid-powered tile to render correctly, left as exercise for the reader Winking smile

That’s it! Hope this inspires or helps someone out there. L8r g8rs!

This Post Has One Comment

Leave a Reply

Close Menu