WPF. Storyboard animation locks properties it's animated.

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"/>
            </DoubleAnimationUsingKeyFrames>
 </Storyboard>

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;
storyBoard.Begin();

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?