WPF - Trying to animate height but getting error that height is NaN

Question

Been trying to create an animation to dynamically adjust height. I found this info that helped but when I try to use it I get an error: 'System.Windows.Media.Animation.DoubleAnimation' cannot use default destination value of 'NaN'.

If I specify the height I get that error.

Style:

<Style x:Key="bdrSlideIn"
   TargetType="{x:Type Border}">
        <Style.Resources>
            <Storyboard x:Key="storyBoardIn">
                <DoubleAnimation BeginTime="00:00:00"
                                 From="0"
                                 Duration="00:00:00.65"
                                 Storyboard.TargetName="{x:Null}"
                                 Storyboard.TargetProperty="(FrameworkElement.Height)"
                                 DecelerationRatio="1" />
            </Storyboard>

            <Storyboard x:Key="storyBoardOut">
                <DoubleAnimation BeginTime="00:00:00"
                                 To="0"
                                 Duration="00:00:00.65"
                                 Storyboard.TargetName="{x:Null}"
                                 Storyboard.TargetProperty="(FrameworkElement.Height)"
                                 AccelerationRatio="1" />
            </Storyboard>
        </Style.Resources>

        <Style.Triggers>
            <DataTrigger Binding="{Binding SearchExecuted}"
                         Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource storyBoardIn}"
                                     Name="SlideStoryboard" />
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource storyBoardOut}" />
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>

Border:

<Border VerticalAlignment="Top"
    Style="{StaticResource bdrSlideIn}">
        <WPFToolKit:DataGrid Name="dgSearchResults"
                             ItemsSource="{Binding SearchResults}"
                             MaxHeight="280"
                             VerticalAlignment="Top">...

Answer 1

If you want to keep Height dynamic then you can't animate Height directly: As you've seen, unless you explicitly assign it WPF will try to interpolate to NaN.
Instead, give your element a LayoutTransform <ScaleTransform/>, and animate the ScaleX and ScaleY parameters of that transformation.