Storyboard DoubleAnimation Does not work with StackPanel Height Property

Question

I\'m trying to use DoubleAnimation to change the Height property of a StackPanel. The code does not throw any exception. But the animation does not work.

Answer 1

The stack panel takes its height from the combined height of its contents. Setting the height explicitly has no meaning.

You need to change the height/visibility of the stack panel's contents.

Answer 2

The easiest way to animate the size of a UI component generally in XAML (and Silverlight/WPF) is to use a RenderTransform. Depending on the layout, you may need to do a few tricks, but for a quick animation, it generally looks very nice.

<Storyboard x:Name="Storyboard1">
<DoubleAnimation Duration="0:0:2" 
        To="0" 
        Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
        Storyboard.TargetName="StatListView" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:2" 
        To="0" 
        Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
        Storyboard.TargetName="StatListView" d:IsOptimized="True"/>
</Storyboard>

Answer 3

I figured it out myself. All I had to do was to Enable Dependent Animation (EnableDependentAnimation) on the DoubleAnimation as this animation affects the layout. And then it worked perfectly.

                        <Storyboard x:Name="HideChangePasswordPanel">
                            <DoubleAnimation EnableDependentAnimation="True" Storyboard.TargetName="ChangePasswordPanel" Storyboard.TargetProperty="Height" From="190" To="0" Duration="0:0:0.2">
                                <DoubleAnimation.EasingFunction>
                                    <PowerEase EasingMode="EaseIn"></PowerEase>
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                        <Storyboard x:Name="ShowChangePasswordPanel">
                            <DoubleAnimation EnableDependentAnimation="True" Storyboard.TargetName="ChangePasswordPanel" Storyboard.TargetProperty="Height" From="0" To="190" Duration="0:0:0.2">
                                <DoubleAnimation.EasingFunction>
                                    <PowerEase EasingMode="EaseIn"></PowerEase>
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>

Hope it saves someone some time!