Click here to Skip to main content
13,295,441 members (29,678 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


2 bookmarked
Posted 15 Jan 2011

WPF. Storyboard animation locks properties it's animated.

, 15 Jan 2011
Rate this:
Please Sign up or sign in to vote.
Dear friends, how simple a solution could be... But, to realize it you might need couple of hours ;)

During coding and playing with WPF, you may need to resize a control after storyboard animation, or set different brush color after an animation. But if you try to change a property which a storyboard used as an target property to animate, you will find that you can't. In no way, even through debugger, hardly ;)

When I have met this strange behaviour (and that is really strange, I don't know the reason, yet), the research was started. Here is the short report:

How to: Set a Property After Animating It with a Storyboard

Short, they suggest three methods:

- Set the animation's FillBehavior property to Stop
- Remove the entire Storyboard.
- Remove the animation from the individual property.

X| (sometimes smiles can express more then I can tell)

After useless manipulatings with these suggestions, I came up with clever idea ( I hope):

If I animate something with storyboard, I always know the value of needed property after my animation. Taking into account suggestion about FillBehavior property (set it to 'Stop'), and Completed event I can use, I can do the following:

1. Create an animation. For example:

<Storyboard x:Key="CollapseSB" FillBehavior="Stop">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="DockPaneUserControl">
                <EasingDoubleKeyFrame KeyTime="0" Value="150"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>

Here we use FillBehavior property.

2. Now, somewhere in the server code we will make your animation to begin animation:
var storyBoard = FindResource("CollapseSB") as Storyboard;
// let us be assigned to 
storyBoard.Complete += storyBoard_Complete;

Aha.. Almost done. How, what we have? The storyboard will play and return animated object back to its state before the animation ('cos of FillBehavior). FillBehavior let us to modify the property, width property in our case.

3. And now, in order to make our animated control looks "a-la without FillBehavior" whe restore the width in our subscribed event:

private void storyBoard_Complete(object sender, EventArgs e)
    // 150 -- this is final width from the storyboard (see 1.)
    animatedControl.Width = 150;

Hm... Bingo?


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Russian Federation Russian Federation
This member doesn't quite have enough reputation to be able to display their biography and homepage.

You may also be interested in...


Comments and Discussions

GeneralI was having this problem, and this did the trick. Thank yo... Pin
Jordan Marr16-Nov-11 8:11
memberJordan Marr16-Nov-11 8:11 
GeneralReason for my vote of 5 I had the same problem, and this pos... Pin
Jordan Marr16-Nov-11 8:10
memberJordan Marr16-Nov-11 8:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171207.1 | Last Updated 15 Jan 2011
Article Copyright 2011 by Lionberg
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid