wpf - 扩展器折叠动画不起作用

Question

我已经在 Expander.Expanded 上实现了一些动画，并且效果很好，但类似的动画在 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>

更新:

我已经在控件Style旁边测试了Datatriggers，但也有同样的问题:

<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>

问题是什么以及解决方案是什么？!

Answer 1

在折叠动画播放之前，其父级 (ExpandSite ContentPresenter) 变得不可见。所以我们必须在播放折叠动画之前使其可见:

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>

代码:

    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();
    }

;)