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.

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

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) 
 private void btnFadeOut_Click(object sender, RoutedEventArgs e) 

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.Completed += delegate 
 PageTitle.Text = "New Title"; 

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.


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

Related Articles


  • 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 :)

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

Top White Papers and Webcasts

  • On-demand Event Event Date: December 18, 2014 The Internet of Things (IoT) incorporates physical devices into business processes using predictive analytics. While it relies heavily on existing Internet technologies, it differs by including physical devices, specialized protocols, physical analytics, and a unique partner network. To capture the real business value of IoT, the industry must move beyond customized projects to general patterns and platforms. Check out this webcast and join industry experts as …

  • On-demand Event Event Date: October 29, 2014 It's well understood how critical version control is for code. However, its importance to DevOps isn't always recognized. The 2014 DevOps Survey of Practice shows that one of the key predictors of DevOps success is putting all production environment artifacts into version control. In this webcast, Gene Kim discusses these survey findings and shares woeful tales of artifact management gone wrong! Gene also shares examples of how high-performing DevOps …

Most Popular Programming Stories

More for Developers

RSS Feeds