扩展器折叠动画不起作用答案

【问题标题】：Expander collapse animation not work扩展器折叠动画不起作用
【发布时间】：2013-08-14 13:02:32
【问题描述】：

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

问题是什么，解决方法是什么？！

【问题讨论】：

stackoverflow.com/a/17242914/1834662
我试过你的代码......它似乎根本不起作用。
@Sheridan：要查看结果，请将一些内容放入网格中。我已经更新了 xaml。
我认为动画必须在Collapsed event 之前播放，但我不知道如何！有什么想法吗？

标签： wpf animation expander

【解决方案1】：

在播放折叠动画之前，他的父级 (ExpandSite ContentPresenter) 变得不可见。所以我们必须在播放折叠动画之前将其设为visible：

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

;)

【讨论】：

对 scaletransform 进行动画处理的问题是它看起来很奇怪。我想你可能会习惯它，但它不是很漂亮，因为它看起来更像是挤压/拉伸动画而不是展开/折叠动画：P 但是一个公平的解决方案