Windows Phone From Scratch – Animation

Animation in Silverlight is declared in Storyboards and triggered by a user’s 3d fon of fomaction, 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  the3d back of fom 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:

<Storyboard x:Name="FlipToFront">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FormBack">
  <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
  <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
  <EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="FormBack">
  <EasingDoubleKeyFrame KeyTime="0" Value="360"/>
  <EasingDoubleKeyFrame KeyTime="0:0:1" Value="270"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FormFront">
  <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
  <EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="FormFront">
  <EasingDoubleKeyFrame KeyTime="0" Value="90"/>
  <EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="90"/>
  <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

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”:

 public MainPage()
 {
    InitializeComponent();
    Help.Click += Help_Click;
    HelpBack.Click += HelpBack_Click;
 }

 void HelpBack_Click( object sender, RoutedEventArgs e )
 {
    FlipToFront.Begin();
 }

 void Help_Click( object sender, RoutedEventArgs e )
 {
    FlipToBack.Begin();
 }

Use of animation here allows you to significantly increase the usable real-estate, without confusing the user by popping one form over another.

The complete source for this example is available for download from here.

NB: This was originally marked as Part 1, but rather than creating part 2, best is to refer you to this full tutorial on Silverlight Animation for the Phone.

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight 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, Microsoft MVP and Telerik MVP.
This entry was posted in Patterns & Skills. Bookmark the permalink.

7 Responses to Windows Phone From Scratch – Animation

  1. Pingback: Windows Phone From Scratch #20

  2. Pingback: Windows Phone From Scratch

  3. Pingback: http://links.ginktage.com

  4. Jesse Liberty says:

    @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.

  5. Jesse Liberty says:

    @Henrik
    I have the opacity changes to ensure that you can see the back which would otherwise be occluded by the front. I’ll try removing them and see where the confusion is.

  6. Henrik says:

    I tried to remove all Opacity changes from the storyboards. That did not change the effect in anyway. So why do you have them?

Leave a Reply

Your email address will not be published.