I have a StackPanel on a WPF window, and have bound the Visibility property to another element on the window. The StackPanel appears and disappears correctly, so I thought I would add an animation to it.
I tried the following style, which I applied to the StackPanel...
<Style x:Key="VisibilityChangedStyle"
TargetType="{x:Type StackPanel}">
<Style.Triggers>
<Trigger Property="Visibility"
Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height"
From="0"
To="30"
Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="Visibility"
Value="Collapsed">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height"
From="30"
To="0"
Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height"
From="0"
To="30"
Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
This works fine when the StackPanel is shown, but when it's hidden, it just disappears without animation.
My guess is that the Visibility property is being set to Collapsed before the animation runs, but I can't work out how to fix this. I'm new to animation, and have spent about two hours reading up, and am thoroughly confused.
Please can someone explain to me the best way to achieve what I want. Thanks
Also, is there a way to use the actual height of the StackPanel instead of hard-coding as I did? I saw someone use a clever technique that bound the To property of the animation to the ActualHeight property of the element, but I got an exception "Cannot freeze this Storyboard timeline tree for use across threads" when I tried that. Anyone know how to bind To to the actual height?