Animation, used with restraint, can greatly enhance the user’s experience of the phone; clarifying transitions and creating useful illusions. One, discussed here previously, is the illusion of “flipping” part of the page over, perhaps to reveal a help file.
In a mini-tutorial on December 22, I showed how to do this, using code to start the animation. Today, we’ll take a look at how to do all of this in Expression Blend, without using any code whatsoever. (Okay, of course there’s code, written by Microsoft, but no user-written code).
The first part of this mini-tutorial is very much like the previous, but in case you don’t have that handy, here are the directions…
Creating the 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
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).
Set the visibility of the back panel to Collapsed, its starting point.
Creating the Storyboards
Switch Workspaces to Animation (Windows->WorkSpaces or F6). Click on the Plus sign to create a new animation and name it Flip To Back.
At the bottom of the timeline it should say 100%. By clicking and dragging to the right you can greatly expand that until you can see tenths of a second (approximately 1100% magnification).
Click on Form Front. You’ll want this to rotate out of the plane from 0 to 90%. Click on 0.5 seconds to set the timeline marker (yellow) and the properties window will open. Open the Transform panel and under projection set the y property to 45 (just to see the effect) and then change it to 90. Notice that at 90 it is edge on. Press the play button to see the form rotate halfway from front to back.
If you continue to 180 degrees, you’ll see the back of the front of the form. Try it (change the value to 180 and hit play). Interesting, but not what we want. We want formback to be shown, so we’ll make the switch at 90 degrees, where they are both edge on. We also need to switch the visibility.
The back of the form needs to continue rotating in the same direction but not be backwards, so at 5/10 of a second, set its y projection rotation to 270. It will rotate from 270 to 360.
At 6/10 of a second set formFront from visible to collapsed, and set formBack from collapsed to visible.
At 1 second set the y value for projection rotation of FormFront from 90 to 180 and set the Y value for Formback from 270 to 360. Play the animation and it should appear to flip over.
Stop recording and create a second storyboard that begins with FormFront collapsed and FormBack visible. Call this one FlipToFront.
Set the visibility of FormFront to collapsed and set its y value to 180. Set the visibility of FormBack to visible and its y value to 360.
At 5/10 of a second set the y value of FormBack to 270 and of FormFront to 90
At 6/10 of a second reverse the visibilities.
At 1 second set the y value for FormBack to 180 and for FormFront to 0. Play the animation and you should see the form flip back whence it came.
Look Ma, No Code!
Rather than coding the buttons in code behind, this time we’ll use behaviors. Switch back to the Design workspace and close the timelines.
Expand FormFront to reveal the help button and then up in Assets click on Behaviors and locate the ControlStoryBoardAction behavior. Drag this onto the help button. In the properties window, give this a name (e.g., HelpButtonClickAction. The SourceName should be pointing to your help button and the EventName should be pointing to Click. These are fine as is. The Clipboard operation is set to Play which is what you want so just drop down the storyboard and pick FlipToBack.
Expand FormBack and find HelpBack (the button). Repeat the steps in the above paragraph, dragging on a behavior, naming it and setting its storyboard (this time to FlipToFront).
That’s it, run the program. Hey! Presto! the storyboards run without your writing any code!