Animating transitions in WPF/Silverlight–Part I–Code Behind

When I saw a question from an user in the MSDN forums about animating an user control to give the exit effect while clicking a button, I thought this would be an excelent opportunity to create a series of posts here in the blog, showing many ways to do it.

Although I will put the alternatives here, some can be not so good: this post, putting animation on the code behind, although easy to implement, has these disadvantages:

  • The animation code is put on the code behind, a technique I don’t like. I don’t think that the MVVM pattern should have zero code behind, but I don’t like to put code behind, unless is indispensable and strictly related to the view.
  • It’s not design friendly – if the designer wants to change the animation, the code should be changed.
  • It’s not portable – if you want to create the same animation on other places, the code must be copied or refactored to be accessed from other places.
  • It’s not easy to manipulate – everything is on the code. Any changes, like the duration of the animation must be changed in code.

We have the following problem: we have a control in the window and we want to hide it when the button is clicked with an animation, like we see below:

imageimageimageimage

To do that, we should create a transformation for the control, of type RenderTransform and animate it. We can do everything in code this way: at the button click, we create the transform, add it to the control and animate it:

private void Button_Click(object sender, RoutedEventArgs e) { // create the transformation and add it to the control var translate = new TranslateTransform(0, 0); gridLogin.RenderTransform = translate; // create the animation and start it var da = new DoubleAnimation(0, -ActualWidth, new Duration(TimeSpan.FromMilliseconds(1000))); translate.BeginAnimation(TranslateTransform.XProperty, da); }

This code has many shortcomings:

  • It can only be applied to our control. To add it to another control, we must copy the code.
  • The animation duration is 1 second – the duration is fixed.
  • It only animates from right to left.

In this first phase, we can refactor the code and leave it more generic:

public enum AnimationType { Right, Left, Up, Down } private void Button_Click(object sender, RoutedEventArgs e) { AnimateControl(gridLogin, TimeSpan.FromMilliseconds(1000), AnimationType.Left); } private void AnimateControl(UIElement control, TimeSpan duration, AnimationType type) { double xEnd = 0; double yEnd = 0; if (type == AnimationType.Left) xEnd = -ActualWidth; else if (tipo == AnimationType.Right) xEnd = ActualWidth; else if (tipo == AnimationType.Up) yEnd = -ActualHeight; else if (tipo == AnimationType.Down) yEnd = ActualHeight; // create the transformation and add it to the control var translate = new TranslateTransform(0, 0); control.RenderTransform = translate; // create the animation and start it if (tipo == AnimationType.Left || tipo == AnimationType.Right) { var da = new DoubleAnimation(0, xEnd, new Duration(duration)); translate.BeginAnimation(TranslateTransform.XProperty, da); } else { var da = new DoubleAnimation(0, yEnd, new Duration(duration)); translate.BeginAnimation(TranslateTransform.YProperty, da); } }




Although the code is larger, it is more generic and allows to be reutilized. We can use any control, set the duration and the animation direction. It still isn’t ideal, but it’s better than last code, non reutilizable. On the next posts, we will see other ways to do it. See you then!

9 thoughts on “Animating transitions in WPF/Silverlight–Part I–Code Behind”

  1. WPF employs XAML, a derivative of XML, to define and link various UI elements. WPF applications can be deployed as standalone desktop programs, or hosted as an embedded object in a website. Thanks.

  2. The effect is an optical illusion of motion due to the phenomenon of persistence of vision, and can be created and demonstrated in several ways. The most common method of presenting animation is as a motion picture or video program, although there are other methods. Thanks.

  3. WPF has a flexible data binding system. UI elements can be populated and synchronized with data from an underlying data model. Rather than showing simple text for the bound data WPF can apply a Data Template before rendering to the Visual Tree. Thanks.

  4. Your article is incredibly instructional! Looking at your work has enlightened me. Learned a lot from it. I will store your website and will continue to browse your upcoming content. Good! Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>