数据触发器中的反向动画答案

【问题标题】：Reverse animation in datatrigger数据触发器中的反向动画
【发布时间】：2015-12-14 01:48:06
【问题描述】：

我有这个动画：

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

当我的StackPanel 可见时触发。我的问题是创建反向动画，何时将 stackpanel 更改为 Collapsed 的可见性。我已经尝试在DataTrigger 中使用ExitActions 我还尝试通过创建一个新的DataTrigger 将绑定设置为Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=IsVisible}" Value="False"

但是这些尝试都没有给我正确的反向动画。有什么建议吗？

【问题讨论】：

我觉得问题是stack panel在动画执行之前就被折叠了（折叠了会触发后面的动画），然后就看不到了
您应该做的是通过动画触发可见性更改。因此，您可以执行反弹和淡出，然后从同一个故事板将可见性设置为折叠。

标签： wpf xaml

【解决方案1】：

这段代码是否可以满足您的需要（外部事件触发动画）？

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

【讨论】：

它似乎不起作用，行为与我的问题相同。动画应该由布尔值触发，或者如您在示例中的复选框 IsChecked 属性。
我稍微更新了我的代码 sn-p 但这完美地工作：堆栈面板在开始时不可见（高度 = 0）并在由外部值触发时显示动画（此处为复选框但可以是其他任何东西，例如视图模型中的属性）。取消选中该复选框会触发退出操作，并且堆栈面板看起来像是在折叠。但是您必须删除所有可见性触发器：将数据触发器直接绑定到您的布尔触发器而不是使用可见性
我会在几分钟内尝试一下，并提供反馈。谢谢
将其粘贴到 Kaxaml 应用程序时可以使用。所以我会假设我的代码中还有其他内容。我会接受答案。
你能粘贴更多你的代码吗？例如应该触发动画的类？