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

  • Live Event Date: April 29, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT Leveraging Flash storage to accelerate an Oracle Real Application Clusters (RAC) environment is one of today's hottest technology topics. Oracle databases require guaranteed levels of storage performance and high availability of data. Until recently, Oracle RAC could only use Flash storage for SmartFlash Cache, which addresses some performance improvements, but limits the benefits that can be gained from a shared Flash infrastructure. Enter …

  • Hurricane Sandy was one of the most destructive natural disasters that the United States has ever experienced. Read this success story to learn how Datto protected its partners and their customers with proactive business continuity planning, heroic employee efforts, and the right mix of technology and support. With storm surges over 12 feet, winds that exceeded 90 mph, and a diameter spanning more than 900 miles, Sandy resulted in power outages to approximately 7.5 million people, and caused an estimated $50 …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds