Trying to animate height, but getting an error, height - NaN

Question

There was an attempt to create animations for dynamic height adjustment. I found this information that helped, but when I try to use it, I get an error: "System.Windows.Media.Animation.DoubleAnimation" cannot use the default destination value for "NaN".

If I indicate the height, I get this 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 maintain a dynamic height, you cannot directly characterize the height: as you saw, if you did not explicitly assign it, WPF will try to interpolate to NaN. Instead, give the LayoutTransform element <ScaleTransform />, and animate the ScaleX and ScaleY parameters of this transformation.

Answer 2

You can always create an attached property for a height that does nothing but set the height property in the target control, so you can animate it using the To function in 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 revive it, you would use the usual animation, just try it now, and it works fine, but I have not explored it further than "it works".

 <DoubleAnimation Storyboard.TargetProperty="(local:AnimatedPanelBehavior.AnimatedHeight)" To="100" Duration="0:0:5"/> 

use AnimatedHeight instead of height to whatever you want to animate.

Answer 3

Since your TargetProperty is set to Height, you can simply set the default value to Height and it will work. In my case, as soon as I set the number for Height on the actual control itself,

 <TextBlock Height="30" .. <TextBlock Style .. ... <StoryBoard .. 

and then the animation (which was supposed to switch the pitch), it worked perfectly.