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?

I think that the problem is that the stack panel is collapsed before the animation can execute (the fact that it is collapsed triggers the subsequent animation), then you can't see it — Bruno
What you should do is to trigger the Visibility change via animation. So you can execute the bounce and fade out then set the Visibility to Collapsed from the same storyboard. — Novitchi S

Bruno Bruno · Accepted Answer · 2015-09-17T09:17:56

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>

Reverse animation in datatrigger

1 Answers