StoryBoard: Animations in WPF

I recently discovered how to do animations in WPF. It's super simple! So what if you want to create a mouse over animation on a StackPanel? You use the StoryBoard XAML element. Snippet:

 <Storyboard x:Key="mouseFadeIn">

This will cause a the Opacity of the element to change from 0.25 to 1.0 over a period of 5 seconds. Note: this should be put in the "Resources" tag. So, if it's a Window it would be "Window.Resources" or if it's a UserControl it would be "UserControl.Resources"... Snippet:

  <StoryBoard key="blah">...

So how do we get this to trigger on a mouse over? By using Triggers of course! Snippet:

    <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="myStackPanel">
        <BeginStoryboard Storyboard="{StaticResource mouseFadeIn}" />

If you want to create a Fade Out effect, just use the "Mouse.MouseLeave" event and reverse the animation. You can even have multiple animations in a StoryBoard. They can run simultaneously or sequentially. If you have multiple animations in a StoryBoard and you want them to run sequentially, you need to add a "BeginTime" attribute. This ensures that the animation is executed after the previous animation(s).

If you made it this far, you should follow me on Twitter.


comments powered by Disqus