In this post I’ll show you how to create a card flipping animation for Windows Phone 7, using Expression Blend. The source code is available for download in the attachment. First, I create a Windows Phone 7 project from scratch, using Expression Blend, you can also create a project in Visual Studio, right click on any page and select “Open with Expression Blend…” context menu option. I actually used this technique in real Windows Phone games I built (feel free to download these games, they are pretty addictive though, be warned!). Now, if you played the games, flipping a card using Blend should be a piece of cake (I hope you can win 101 by the way, the engine plays it pretty strongly ). UNO (excuse me, DUO) is also very cool, let me know if you can win it. So first, let’s create an Expression Blend project.
Next, we’re going to use two images for the cards: the front side and the back side. For the front size I chose ace of spades. Simply drag the images to the Expression Blend page design and align them, so they are the at the same location and are of the same size.
Expression Blend did most of the work for me: added images to the project and included them in XAML, under the ContentPanel grid. For convenience, I rename images to aceSpades and cardBack.
I’ll click the plus sign in the “Objects and Timeline” tab, next to “(No Storyboard open)” to create a new storyboard for my card flipping animation, and I keep the default name: Storyboard1.
Now comes the fun part: my storyboard is automatically in the recording phase, indicated by a bright red rectangle around my designer screen, also the timeline (in seconds) appears right next to the storyboard. Any property changes I make now with my controls will be recorded in the timeline.
A card flipping consists of several parts: first the back of the card rotates around Y axis in 3D space to 90 degrees: at the beginning you see the back of the card, at the end of the transition you see only the side of the card. Then, the opposite transition begins for the front side of the card. Ace of spades rotates from 90 (side of the card) to 0 (fully visible image of the ace of spades). Easy! Let’s do it in Blend.
First, I’m positioning my timeline at the point when I want to see the back side of the card turned to 90 degrees. Let’s say in 2 seconds (notice the yellow line in the timeline stays at 2 seconds).
Next, in the Properties window, I set the angle for Y rotation to 90. At this point I don’t see the card anymore.
How did the timeline change? Expression Blend generated a rotation around Y axis by 90 degrees.
To complete this example, I’m going to rotate the front of the card starting at 2 seconds, from 90 degrees to 0 and also make the front side visible. Done! If I play my storyboard now, the card flips from 0 to 90 around Y axis, then the front side becomes visible and flips 90 to 0 in the next 2 seconds. The total duration of my animation is 4 seconds. I can speed it up, or slow it down, or change the transition from linear to cubic, quadratic or any other interpolation (the rotation will be faster at the beginning than at the end etc.).