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!