Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

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 Wink | ;)
 
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 Wink | ;)
 
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.


Dead | 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?

License

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

Share

About the Author

Lionberg

Russian Federation Russian Federation
No Biography provided

Comments and Discussions

 
GeneralI was having this problem, and this did the trick. Thank yo... PinmemberJordan Marr16-Nov-11 7:11 
I was having this problem, and this did the trick. Thank you for posting your solution!
GeneralReason for my vote of 5 I had the same problem, and this pos... PinmemberJordan Marr16-Nov-11 7:10 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 15 Jan 2011
Article Copyright 2011 by Lionberg
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid