WP7 Tutorial 11 : Creating an Animation for the Banner Text

This is the 11th tutorial as a part of the Windows Phone 7 Tutorial Series. In this task, you will create a storyboard

in Expression Blend to animate the text in the banner whenever the button is pressed.

1. Open the active workspace to the animation workspace. In the Window menu, point to Workspaces and select Animation. Notice that this rearranges the windows in order to maximize the space available to edit the timeline.

2. If necessary, exit the editing area of the button control template. To do this, click the Scope Up button  next to the FancyButton (Button Template) element in the Objects and Timeline panel to display the element tree of the page.

3. Now, in the Objects and Timeline panel, click New to create a storyboard. This is the button labeled with a + sign and located in the upper right corner of the panel.

4. In the Create Storyboard Resource dialog, set the Name to AnimateBanner and click OK.

5. To create the key frames in the animation, click the BannerTextBlock element in the element tree of the Objects and Timeline panel to select it.

6. Now ,click and drag the current position of the timeline playhead to an offset of 1 second.

7. Next, switch to the Properties panel, expand the Transform category, and select the Scale transform. X property value is to -1. This transform mirrors the element along its horizontal axis.

8. Switch back to the timeline panel. Check that it contains a new key frame at the chosen time offset that is the result of changing elements in the tree while timeline recording is active

9. Now, change the timeline playhead to an offset of 2 seconds.

10. Switch to the Properties panel, expand the Transform category, and select the Scale transform. Change the value of the X property back to 1 to restore the element to its original state. Notice that a second key frame appeared in the storyboard timeline because of this change.

11. To test animation in the designer, you need to add some text to the banner. First, click the red circle to the left of the AnimateBanner storyboard name in the upper left corner of the panel to turn off recording temporarily—you do not want the added text to become part of the animation.

12. Now, right-click the BannerTextBlock element on the designer surface and select Edit Text. Enter a suitable text for the banner and press ENTER.

13. To test the animation, press the Play button above the timeline. Notice how the text in the banner rotates horizontally about its middle axis and how the movement is uniform throughout the animation cycle.

14. Select the first key frame by clicking inside the gray circle icon in the timeline. Notice that when you select a frame, the designer view updates to show the state of the UI elements as they appear in that frame, in this case, the banner text appears mirrored. Now, in the Properties panel, under the Easing category, ensure that EasingFunction is selected, expand the drop down list to display a list of available functions, and then choose the Cubic Out function. This particular easing function causes the transition to reduce its rate as it approaches the key frame.

15. Repeat the procedure in the previous step to configure the easing function for the second key frame. This time choose the Cubic InOut function to make the transition start at a slow rate, gradually accelerate, and finally reduce its speed as it approaches the ending frame.

16. To test the effect of the easing functions on the animation, press Play above the timeline.Notice how the banner starts its rotation at a high rate, then slows down as the text appears mirrored, it then picks up speed again and finally slows down once again to return to its original position.

17.Now that the design of the user interface is complete, the next step is copying the updated XAML back to the main project.

• First, in Expression Blend, click the XAML tab on the right hand edge of the window or in the View menu
• Point to Active Document View and select XAML ViewThis gets you to the XAML view of the MainPage.xaml document.
• Next, select and copy the children of the root UserControl element to the clipboard. This includes the UserControl.Resources section and the Grid element namedLayoutRoot but not the UserControl element itself.

18. Now, in Visual Studio, open the MainPage.xaml document in XAML view and replace the entire child contents of the root navigation:PhoneApplicationPage element with the text in the clipboard ensuring that the root element itself remains unchanged.

19. As a last step, in the MainPage.xaml file, locate the UserControl.Resources start and end tags and replace them with navigation:PhoneApplicationPage.Resources tags.

20. Press CTRL + S to save the MainPage.xaml file.

21. So far, you have created an animation storyboard for the banner text, but it simply exists as an unused resource in the project. To play the animation, you need to trigger the storyboard in response to an event, in this case, whenever the Click Me button is pressed. To open the Click event handler for this button:

• Go to the Design view of the MainPage.xaml file
• Double-click the button on the designer surface to open the code-behind file
• Position the cursor on the event handler

22. To update the event handler to play the animation, insert the following code snippet into the “bold” space immediately before the ending brace.

private void ClickMeButton_Click(object sender, RoutedEventArgs e)
{
  BannerTextBlock.Text = MessageTextBox.Text;
MessageTextBox.Text = String.Empty;
  this.AnimateBanner.Begin();
}

The author, Vipul is a Microsoft Student Partner and also a Community Launch Lead. He is pursuing Electrical Engineering and loves to create software and web applications.