Click here to Skip to main content
15,867,308 members
Articles / Desktop Programming / WPF
Tip/Trick

WPF. Storyboard animation locks properties it's animated.

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
15 Jan 2011CPOL1 min read 27.5K   2   2
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:

XML
<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:
C#
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:

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



Hm... Bingo?

License

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


Written By
Russian Federation Russian Federation
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralI was having this problem, and this did the trick. Thank yo... Pin
Jordan Marr16-Nov-11 7:11
Jordan Marr16-Nov-11 7:11 
GeneralReason for my vote of 5 I had the same problem, and this pos... Pin
Jordan Marr16-Nov-11 7:10
Jordan Marr16-Nov-11 7: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.