Make Your Own Live Tiles with RadControls for Windows Phone 7

Without a doubt one of the coolest features of the Windows Phone 7 (WP7) platform sits on the home screen in the form of Live Tiles.  For those with lesser mobile operating systems, a Live Tile is a large icon that represents your application on the home screen of a WP7 device that allows for live updates.  Examples of these are seeing Facebook updates pop in for a pinned person on your phone, weather alerts popping up in WeatherBug, or something as simple as your Exchange email rolling up the numbers as new emails come in.  To give an example, here is what your WP7 screen might look like:

Believe me, it looks even better in person, but you can definitely get a taste of the Live Tile experience on the Discover Windows Phone site. 

But why all the talk about Live Tiles?  Because they are cool, for starters, but also because you can recreate this type of experience in your Windows Phone 7 applications using the Telerik RadControls for Silverlight, and I am going to show you how.

RadLiveTile Step 1 - How to Arrange Our Tiles

The Live Tile view on the start screen has very specific dimensions, but thankfully (thank you Snag-It) those are pretty easy to figure out so we know dimensions that we have to reproduce.  The standard tile is 173x173 or so, with approximately 10 pixels in margin around the visible tile.  We can easily reproduce this using a RadWrapPanel like so:

Pretty simple, right?  Now keep in mind, RadWrapPanel is going to automatically ensure that items display next to one another and that each item is alloted 193 pixels for height and width.  This includes the size of the tile as well as the margin, which means that in our tile implementation we need to account for this.  Now we have the container all set, so what comes next?

RadLiveTile Step 2 - How To Plan Our Tile

We have already covered specifications for our tile to some degree - we need a 173x173 content region with a 10px margin all around.  This will fit perfectly into our RadWrapPanel and visually look like the native Live Tile.  For most scenarios, we also need an additional 173x173 content area that will animate into view.  If we are talking about the People Live Tile we could certainly use a RadUniformGrid or RadWrapPanel with some RadTransitionControls, but we want the more bouncy animated ones for this post. :)

This means the basic breakdown of a RadLiveTile without any real content will look like this:

Stepping through the code, our surrounding Grid is transparent with an inner Grid having a 10px margin as well as using the PhoneAccentBrush to utilize the current theme colors.  This inner grid has a clip region (to hide our animated element), otherwise we have our MainTile (the one that will be viewed normally) and our LiveTile (the one that will animate).  To spice these up a bit, I'm for a little WP7 style and grace and made some vector art in Expression Design, exported to Xaml, that can utilize the default phone styles.  Again, this helps to maintain the uniform WP7 look and feel even when the user changes their theme.  You can find the Xaml for this in the attached project (way down below), but the magic is in what we're doing in code to animate these.  Here is what the tile looks like in design view after my design skills have been applied:

RadLiveTile Step 3 - RadControls Makes It Work

Right now we have two content areas, one visible, one hidden.  A Live Tile is animated, so we need some way to easily animate our tiles.  RadAnimationManager to the rescue!

Before anyone calls foul, this is a concept for how one would make a RadLiveTile.  I even comment in the code that this works great for a demonstration, but in realize you probably want to hook up a method on the tile that when triggered will show or start an animation sequence.  I'm showing you how to do this using RadControls for Windows Phone 7, but it is up to you to figure out how it will work best in your apps. :)

Disclaimer done, now onto the code:

While the code is pretty easy to read, in a nutshell we are:

1. Creating our RadAnimations (RadMoveAnimation for this example)
2. Establishing a timer to 'fake' the live data update experience on a set interval
3. Creating a list of update strings to display with xLiveTile
4. On timer tick, using some state variables and RadAnimationManager to easily apply our animation to the correct tile

Once this is all set, we go back to our RadWrapPanel and add an instance of our RadLiveTile.  The end result looks like this while running (by the way, I always made a RadLiveTile2 showing a different type of tile animation using a RadResizeAnimation - all code included of course!):

How cool is that? 

Now all you have to do is download the RadControls for Windows Phone 7, grab the RadLiveTile source code for this example, and start building some fantastic mobile applications!