Introduction
This is the second of my series of posts on animation, using WPF and XAML. In this post, I’m looking at how we can control an animation in WPF using code behind, and also, how two animations can be triggered simultaneously.
Button Animation in WPF with code-behind
The problem with a statement like this, is that you can pretty much replicate anything in XAML in code, so you can do everything in code, some, a little or nothing. So far, I’ve come across three approaches that make sense to me. In this article I’ll cover triggering animations from code behind; following articles will cover creating animations for elements that have the transform set in XAML, and finally, no XAML at all!
Triggering an animation from code
There’s little point in re-explaining the XAML; it’s essentially the same XAML that I’ve shown in the first post. It looks like this:
So, there’s a few things to note here:
- The storyboard is not part of the button definition; it’s actually part of the Window.Resources.
- We don’t use a named transition, but instead, specify the button name; however, we still have to tell the button that it has a transition:
Generally speaking, there’s nothing new. The same transformation, the same effect; the only difference is that it’s defined as a resource for the Window rather than for the Button.
So, now we get to the crux; now that it doesn’t fire on a button event, how does it get fired? As usual with these things, it’s surprisingly easy when you look at the code:
Storyboard sb = (Storyboard )FindResource("sbExpand");
sb.Begin( this);
You also have access to the storyboard itself; for example, try this:
Storyboard sb = (Storyboard )FindResource( "sbExpand");
sb.AutoReverse = true;
sb.Begin( this);
Multiple Animations
Cool eh?
Additionally, if you had two animations to start at the same time; this would be the way. For example, add the following label to your page:
And the following storyboard definition:
(This was taken from the Laurent Bugnion article on the same subject http://www.galasoft.ch/mydotnet/articles/article-2006102701.aspx).
Now, try running both animations together:
Storyboard sb = (Storyboard )FindResource("sbExpand");
sb.Begin( this);
Storyboard sbdLabelRotation = (Storyboard)FindResource("sbdLabelRotation" );
sbdLabelRotation.Begin( this);
Conclusion
So, both animations run at the same time. Admittedly, I’m not strictly sure what you could do with this particular animation; it’s certainly not my intention that WPF apps start taking a mid ’90s web-site feel!
In this article, we looked at controlling pre-defined storyboard definitions in code. In a future article, I intend to cover the creation of an animation from within code.