Expander collapse animation not work

Question

I have implement some animation on Expander.Expanded and this work fine, but similar one does not work on Expander.Collapsed.

XAML:

<Border Name="bor3" >
   <Border.Triggers>
      <EventTrigger RoutedEvent="Expander.Expanded" SourceName="exp3">
         <EventTrigger.Actions>
            <BeginStoryboard>
               <Storyboard>
                  <DoubleAnimation 
                     From="0" 
                     To="1" 
                     Duration="0:0:0.25" 
                     Storyboard.TargetName="gr3" 
                     Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)"/>
               </Storyboard>
            </BeginStoryboard>
         </EventTrigger.Actions>
      </EventTrigger>
      <EventTrigger RoutedEvent="Expander.Collapsed" SourceName="exp3" >
         <EventTrigger.Actions>
            <BeginStoryboard>
               <Storyboard>
                  <DoubleAnimation 
                     From="1" 
                     To="0" 
                     Duration="0:0:0.25" 
                     Storyboard.TargetName="gr3" 
                     Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)"/>
               </Storyboard>
            </BeginStoryboard>
         </EventTrigger.Actions>
      </EventTrigger>
   </Border.Triggers>
   <Expander Name="exp3">
      <Grid Name="gr3">
         <Grid.LayoutTransform>
            <ScaleTransform ScaleX="1" ScaleY="0"/>
         </Grid.LayoutTransform>
         <TextBlock >Test!</TextBlock>
      </Grid>
   </Expander>
</Border>

UPDATE:

I've test Datatriggers beside control Style but that has a same problem:

<Border Name="bor3" >
    <Expander Name="exp3">
        <Grid Name="gr3">
            <Grid.Style>
                <Style TargetType="Grid">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsExpanded, RelativeSource={RelativeSource AncestorType=Expander}}" Value="true">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation 
                                             From="0" 
                                             To="1" 
                                             Duration="0:0:0.25" 
                                             Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation 
                                                From="1" 
                                                To="0" 
                                                Duration="0:0:0.25" 
                                                Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Grid.Style>
            <Grid.LayoutTransform>
                <ScaleTransform ScaleX="1" ScaleY="0"/>
            </Grid.LayoutTransform>
            <TextBlock >Test!</TextBlock>
        </Grid>
    </Expander>
</Border>

What is the problem and What is the solution?!

Answer 1

Before the collapse animation played his parent (ExpandSite ContentPresenter) becomes invisible. so we must make it visible before the collapse animation played:

XAML:

   <Border Name="bor3" VerticalAlignment="Top" >
    <Expander Name="exp3"  Collapsed="exp3_Collapsed" >
        <Expander.Resources>
            <Storyboard x:Key="sbCollapse"  >
                <DoubleAnimation Storyboard.TargetName="gr3"
                                             From="1" 
                                             To="0" 
                                             Duration="0:0:0.5" 
                                             Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)"/>
            </Storyboard>
            <Storyboard x:Key="sbExpand" >
                <DoubleAnimation  Storyboard.TargetName="gr3"
                                             From="0" 
                                             To="1" 
                                             Duration="0:0:0.5" 
                                             Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)"/>
            </Storyboard>
        </Expander.Resources>
        <Expander.Triggers>
            <EventTrigger RoutedEvent="Expander.Expanded">
                <BeginStoryboard Storyboard="{StaticResource sbExpand}" />
            </EventTrigger>
        </Expander.Triggers>
        <Grid Name="gr3" Background="Green" Height="100">
            <Grid.LayoutTransform>
                <ScaleTransform ScaleX="1" ScaleY="0"/>
            </Grid.LayoutTransform>
            <TextBlock FontSize="40">Test!</TextBlock>
        </Grid>
    </Expander>
</Border>

Code:

    private void exp3_Collapsed(object sender, RoutedEventArgs e)
    {
        var r = exp3.Template.FindName("ExpandSite", exp3) as UIElement;
        r.Visibility = System.Windows.Visibility.Visible;

        var sb1 = (Storyboard)exp3.FindResource("sbCollapse");
        sb1.Begin();
    }

;)