Add Flare to Your Windows Phone 7 (WP7) App with Simple Animations

The market for mobile apps today is quite competitive and as such you need ways to pull your app out of the pack. Aside from starting with a great design, eye candy such as animations is one way in which apps differentiate themselves from one another. Traditionally, adding animations was a fairly complex process; however, Windows Phone 7 (WP7) includes very powerful tools for creating animations. You could use the Microsoft Expressions Blend application for creating animations using a designer. However, Microsoft Expressions Blend is really a designer tool and not geared towards developers. Luckily, the ability to create animations is accessible in the eXtenstible Application Markup Language (XAML) editor as well as C# within Visual Studio.

Within WP7, animations are grouped together in one or more Storyboards. Each Storyboard can perform multiple animations on one or more objects within the page. The Storyboard is essentially a way to logically group animations. For instance, when a user touches a button you could group all of the animations to occur as a result of the button press in a single Storyboard. The basic types of animations, which can be performed within a Storyboard are listed below:

  • ColorAnimation - Used to animate the color change of an element on the page.
  • DoubleAnimation - Allows you to animate a property value that accepts a double value such as Opacity.
  • PointAnimation - Used to animate a point value, which allows for an element to move around the screen.

There are a couple of other advanced animation types, which are not listed above; however, for the most part the other animation types provide additional control including key frame type animations. To demonstrate the animation we will create simple Fade-In and Fade-Out Storyboards. Listed below is the XAML markup showing a FadeTitleOut and FadeTitleIn Storyboards.

<phone:PhoneApplicationPage.Resources> 
 <Storyboard x:Name="FadeTitleOut"> 
 <DoubleAnimation Storyboard.TargetName="PageTitle" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1" /> 
 </Storyboard> 
 
 <Storyboard x:Name="FadeTitleIn"> 
 <DoubleAnimation Storyboard.TargetName="PageTitle" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:1" /> 
 </Storyboard> 
 </phone:PhoneApplicationPage.Resources>

As you can see, the two Storyboards are contained within the Page Resources. The first Storyboard called FadeTitleOut contains a single DoubleAnimation, which will target a control called PageTitle. The animation will target the control's Opacity property and will adjust the value from 1.0 to 0.0 over 1 second. So if you were to start this animation the PageTitle will slowly fade into the background over 1 second. The second Storyboard called FadeTitleIn is almost identical expect for the change in the From and To values. To start one of these animations from C# is fairly easy. The snippet shows how to start each animation from a button click event.

private void btnFadeIn_Click(object sender, RoutedEventArgs e) 
 { 
 FadeTitleIn.Begin(); 
 } 
 
 private void btnFadeOut_Click(object sender, RoutedEventArgs e) 
 { 
 FadeTitleOut.Begin();
 }

As you can see, the first event handler calls the Begin() method on the FadeTitleIn Storyboard. Similarly, the second event handler launches the FadeTitleOut Storyboard. However, a more real-world example might be to first fade the title out, change the text and fade it back in. Thus you would need to wait until the fade out Storyboard completes before changing the Text, and then launch the fade in Storyboard. The Storyboard contains an event called Completed, which can be used for this very purpose. The following code snippet demonstrates this example scenario.

private void btnChangeTitle_Click(object sender, RoutedEventArgs e) 
 { 
 FadeTitleOut.Begin(); 
 
 FadeTitleOut.Completed += delegate 
 { 
 PageTitle.Text = "New Title"; 
 FadeTitleIn.Begin(); 
 }; 
 }

In this example, we first launch the fade out Storyboard and add a delegate to fade out Storyboard. Once completed we change the title and fade the title back in.

Conclusion

As you can see from the above example, to fade the Title out slowly, change it and fade it back in is simple but effective. While this was a very simple example it is effective and a starting place to build upon more complex effects to use within your application. While not a replacement for a well-designed application and functionality, animations can be used to make your app more appealing and fun to use for the user.



About the Author

Chris Bennett

Chris Bennett is a Manager with Crowe Horwath LLP in the Indianapolis office. He can be reached at chris.bennett@crowehorwath.com.

Related Articles

Comments

  • The best WP7 animation tutorial out there

    Posted by Saurabh on 05/17/2012 02:37am

    Thanks a lot for writing this simple tutorial. I was just looking for a simple overview of how to make storyboard animations with XAML, and all the other tutorials were an overkill. This one was perfect :)

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Lenovo recommends Windows 8 Pro. "I dropped my laptop getting out of the taxi." This probably sounds familiar to most IT professionals. If your employees are traveling, you know their devices are in for a rough go. Whether it's a trip to the conference room or a convention out of town, any time equipment leaves a user's desk it is at risk of being put into harm's way. Stay connected at all times, whether at the office or on the go, with agile, durable, and flexible devices like the Lenovo® …

  • When individual departments procure cloud service for their own use, they usually don't consider the hazardous organization-wide implications. Read this paper to learn best practices for setting up an internal, IT-based cloud brokerage function that service the entire organization. Find out how this approach enables you to retain top-down visibility and control of network security and manage the impact of cloud traffic on your WAN.

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date