Windows Phone From Scratch – Animation

Animation in Silverlight is declared in Storyboards and triggered by a user’s action, by a background action or process or, most commonly, by a change in state. Thus an animation might be triggered by pressing a button, but more often the animation will ease the user’s perception of the transition from one state such as the mouse-over, to another, such as mouse press.

Outside of games, most animations are brief and fairly simple, but they can make a significant difference both to the sense of polish as well as to avoiding confusion for the user.

We’ve already seen simple state transition animation used in the mini-tutorial on Visual State. Let’s take a look at animation used to facilitate an illusion that allows us to place more information on a page than would otherwise be possible.

A common idiom that has evolved in mobile phones (and throughout Rich Internet Applications) is that of the panel with additional information on “the back side.”

A Demo Application

Create a Windows Phone Application in Blend

In the Content area, add a StackPanel; name it FormFront, and set its margins to 70 all around. Inside the StackPanel place a Grid, creating six rows of equal height and two rows of equal width. Within these place TextBlocks for prompts and TextBoxes for data entry for the following fields:

First Name

Last Name

Street Address

Address Line 2

Locality

In the final row place a small button, perhaps with just the letter i in it, or perhaps with the word “Help.”

The Back Of The Form

With this in place, add a second StackPanel right above the first, and into the same grid at the same location, and name it FormBack. Set its margins to 70 as well, so that it perfectly overlaps the first StackPanel.

You can show and hide the two stack panels by clicking on the “eyeballs” in the Objects and Timeline; with both visible the front will block the back.

The FormBack StackPanel takes two TextBlocks and a button. Put any content you like into the TextBlocks and have the Button say something like “Return to form.”

To distinguish the stack panels from the general background, give each StackPanel a background brush set to #FF868686 (dark Grey).

Creating The Animation

Open the animation window, create a new animation named FlipToBack, and set the following values:

For FormFront, opacity to 100% and Projection-Rotation Y-value to 0.

For FormBack, opacity to 0% and Projection-Rotation Y-value to 270

At 1 second, set Form Front Projection-Rotation Y-value to 90

At 1.1 second set FormFront opacity to 0% and FormBack opacity to 100%

At 2 seconds, set FormBack Projection-Rotation Y-value to 360.

Run the animation and you’ll see the form appear to flip over. We make the switch from FormFront to FormBack at 90 /270 degrees when the form is edge on. As it swings out of 90 degrees you appear to be seeing the back of the same form.

Save this and create FlipToFront which works to undo the above. Here’s the Xaml for FlipToFront which you can see simply reverses the initial animation:

All that is left is to tie these animations to events; specifically pressing the respective buttons. That work is done in the code behind for the page so save the project and open it in Visual Studio. The following this assumes you named the button on FormFront “Help” and the button on FormBack “HelpBack”:

About Jesse Liberty

Jesse Liberty is a Senior Consultant with Wintellect, with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight & LinkedIn Learning courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP and a Microsoft MVP.

7 Responses to Windows Phone From Scratch – Animation

@Jesse Liberty
Ok, the opacity appears not to be needed because i stop the animation at 90 degrees (edge on) and so it is essentially invisible anyway. You can see the reason for the opacity change if you take the opacity out but instead of having the animation be from 0 to 90 degrees, have it go from 0 to 80 degrees.