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

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.

Answer 2

You could always create an attached property for the height that does nothing other than set the height property on the target control, that way you can animate using To on your attached property.
public class AnimatedPanelBehavior
{
public static double GetAnimatedHeight(DependencyObject obj)
{
return (double)obj.GetValue(AnimatedHeightProperty);
}
public static void SetAnimatedHeight(DependencyObject obj, double value)
{
obj.SetValue(AnimatedHeightProperty, value);
}
public static readonly DependencyProperty AnimatedHeightProperty =
DependencyProperty.RegisterAttached("AnimatedHeight", typeof(double), typeof(AnimatedPanelBehavior), new UIPropertyMetadata(0d, new PropertyChangedCallback((s, e) =>
{
FrameworkElement sender = s as FrameworkElement;
sender.Height = (double)e.NewValue;
})));
}
Then to animate it you would use a normal animation, just tried it now and it works fine but I've not investigated any further than "it works".
<DoubleAnimation Storyboard.TargetProperty="(local:AnimatedPanelBehavior.AnimatedHeight)" To="100" Duration="0:0:5"/>
use AnimatedHeight instead of height on anything that you want to be able to animate.

Answer 3

Since your TargetProperty is Height, you can just set a default value of Height and it will work. In my case as soon as I have put a number for Height on the actual control itself,
<TextBlock Height="30" ..
<TextBlock Style ..
...
<StoryBoard ..
and then had the animation (which were to make toggle the height) it worked fine.