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.

            <StackPanel x:Name="FlyoutContent">

                <StackPanel.Resources>
                    <Storyboard x:Name="HideStackPanel">
                        <DoubleAnimation Storyboard.TargetName="ChangePasswordPanel" Storyboard.TargetProperty="Height" From="190" To="0" Duration="0:0:1">
                            <DoubleAnimation.EasingFunction>
                                <PowerEase EasingMode="EaseIn"></PowerEase>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                    <Storyboard x:Name="ShowStackPanel">
                        <DoubleAnimation Storyboard.TargetName="ChangePasswordPanel" Storyboard.TargetProperty="Height" From="0" To="190" Duration="0:0:1">
                            <DoubleAnimation.EasingFunction>
                                <PowerEase EasingMode="EaseIn"></PowerEase>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </StackPanel.Resources>

                <TextBlock Margin="0, 20, 0, 0" FontWeight="Bold" Text="Change Current Password" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" IsTapEnabled="True" Tapped="ChangePasswordHeader_Tapped"/>
                <StackPanel x:Name="ChangePasswordPanel" Margin="0, 5, 0, 0" Height="0">

C# Event Handler

private void ChangePasswordHeader_Tapped(object sender, TappedRoutedEventArgs e)
{
    if (ChangePasswordPanel.Height == 0)
    {
        ShowStackPanel.Begin();
    }
    else
    {
        HideStackPanel.Begin();
    }
}

It does hit ChangePasswordHeader_Tapped event handler and execute ShowStackPanel.Begin or HideStackPanel.Begin statement as expected. But it does not have any impact on the output. The Height of the StackPanel just stays at 0.

Any idea on what's happening??

Answer 1

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!

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

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.