Tile Flip Animation using XAML, Silverlight, and Expression Blend 4 (WP7, WPF, Silverlight)

In this post, I am going to show you step by step on how to make a tile flip animation using Silverlight, Expression Blend 4 and XAML. This animation can be used in WPF, Silverlight, and Silverlight for Windows Phone 7. I created this animation for a Windows Phone 7 silverlight game I am currently working on, though this animation can be applied to other scenarios as well. This tutorial assumes a basic understanding of Expression Blend 4 and XAML coding.

First thing is first, Open up Expression Blend 4 and create a new Windows Phone 7 project. Once the project is created add a new UserControl to the project. I named mine “TileControl”.

Create a new UserControl

Once your user control is created, you should be presented with a blank design canvas. I don’t intend to use these tiles for anything larger than 64×64 pixels so I am going to set my width and height to
that, you can set yours to any value you choose. You can do this either by using the XAML or by setting the properties within the property pane. If you are unfamiliar with Expression Blend you can get to the XAML view by pressing one of these buttons. The first one takes you to the designer, the second one to full XAML view, and the third is a split window between the two.

Use these to switch between views.

Now that you have a UserControl and it has been sized to your liking, we need to add some content to demonstrate the flip. I am going to add two grids to the LayoutRoot of the UserControl and name them TileFront and TileBack. You can feel free to assign whatever properties to these grids as you like, you just need to keep everything the same width and height. I am going to assign my grids a background color, preferrably the PhoneBackgroundBrush.

UserControl with a TileFront and TileBack grid.

Once your grids are in place, we need to add some content that we can flip! This content can be anything that you would like (that is the beauty about WPF/Silverlight). For this tutorials purpose, I will just use a TextBlock control. The TileFront grid will contain a TextBlock that contains the letter “F” and the TileBack grid will contain a TextBlock that contains the letter “B”.

TileFront and TileBack grids containing TextBlocks

Now that our grids are created, it is time to make them flip. The first thing we need to do is to create a storyboard for the Front to Back flip. To create a storyboard, navigate to your “Objects and Timeline” tab. Towards the top of that tab will be a ”+” symbol next to a drop down icon. Click the “+” symbol and give it the name “TileFlipF_B”.

"+" symbol to create storyboards.

When you press OK, you will now be in Expression Blend’s recording mode. This keeps track of all changes you make to your controls and can play them back in an animation. You will also notice there is now a timeline visible with frames marked on a second interval. If you move the yellow arrow around, that will show you the state of your object at that point in time. For the first frame (starting at 0 on the timeline) we are going to want to select the TileBack grid and set its opacity property to 0%.

Keyframe on 0. Represents Opacity Property.

Opacity property for TileBack grid at frame 0.

Next, move the yellow arrow across the timeline to half the desired length of the flip. I’m going to move mine to 0:00.200. Once there, highlight the TileBack grid and expand the transform group under properties. Once expanded, click the scale tab and set its x value to 0. Now select the TileFront and set its opacity to 0 and the x factor of its scale to 0 as well.

Scale X factor of 0.

Once you have those values set, you should slide the yellow arrow to the length you want the tile flip to take. Generally, you want the frames of this animation to be even. I am going to place mine at 0:00.400 which is the same length as between frames 1 and 2. Once the slider is there, select the TileFront grid and set its Scale X back to 1. Afterward, select the TileBack grid and set its Scale X back to 1 and its Opacity back to 100%. You should now be able to test this animation by hitting the play button right about the timeline.

To create the reverse of this animation, click the drop down next to the “+” button you used to create the first storyboard. There are a few options that appear. First we need to duplicate the current storyboard. This creates a copy that we can edit without affecting the one we just worked on. After the animation has been duplicated, click the drop down again. This time the one we want is “Reverse”. This will create a reversed version of the animation we just created allowing us to flip from Front to Back and now Back to Front.

Select "Reverse" from the drop down.

Congratulations! You now have a tile that can flip both directions! You can find a sample WP7 project demonstrating the tile flip here: TileAnimation


This was my first attempt at what I thought was a fairly useful tutorial. If you guys have any suggestions, comments, questions, etc. Please feel free to let me know in the comments below!
by Gregory Gammon