Reverse animation in datatrigger

Question

I have this animation:

  <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=IsVisible}" Value="True">
    <DataTrigger.EnterActions>
      <BeginStoryboard>
        <Storyboard>
          <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="15" To="85" Duration="00:00:0.7" Storyboard.TargetProperty="Height">
              <DoubleAnimation.EasingFunction>
                 <BounceEase Bounces="2" EasingMode="EaseOut" Bounciness="5" />
              </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
          </Storyboard>
        </Storyboard>
      </BeginStoryboard>
    </DataTrigger.EnterActions>
 </DataTrigger>

Which will trigger when my StackPanel is visible. My problem is to create the reverse animation, when to stackpanel changes it's visibility to Collapsed. I've tried with the ExitActions inside the DataTrigger I've also tried by creating a new DataTrigger which sets the binding to Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=IsVisible}" Value="False"

But none of these attemps gave me the correct reverse animation. Any suggestions?

Answer 1

Is this code can suit your need (an external event triggers the animation) ?

    <Grid>
    <Grid.Resources>
        <BooleanToVisibilityConverter x:Key="conv"></BooleanToVisibilityConverter>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <CheckBox x:Name="chk" Grid.Row="0" Margin="10" IsThreeState="False" IsChecked="false"></CheckBox>


    <StackPanel Grid.Row="1" Height="0">
        <StackPanel.Style>
            <Style TargetType="StackPanel">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=chk,Path=IsChecked}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <Storyboard x:Name="mySowStoryboard">
                                        <DoubleAnimation From="0" To="85" Duration="00:00:0.7" Storyboard.TargetProperty="Height">
                                            <DoubleAnimation.EasingFunction>
                                                <BounceEase Bounces="2" EasingMode="EaseOut" Bounciness="5" />
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <Storyboard x:Name="myhideStoryboard">
                                        <DoubleAnimation From="85" To="0" Duration="00:00:0.7" Storyboard.TargetProperty="Height">
                                            <DoubleAnimation.EasingFunction>
                                                <BounceEase Bounces="2" EasingMode="EaseOut" Bounciness="5" />
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </Style.Triggers>

            </Style>
        </StackPanel.Style>
        <Border Background="Black" BorderBrush="DeepPink" BorderThickness="2">
            <TextBlock Margin="20" Text="I'm here" Foreground="White"></TextBlock>
        </Border>
    </StackPanel>
</Grid>