使用 DataTrigger 启动需要动态值的动画答案

【问题标题】：Using a DataTrigger to start an animation that requires a dynamic value使用 DataTrigger 启动需要动态值的动画
【发布时间】：2015-04-10 17:18:45
【问题描述】：

我有一个将边框（使用渲染转换变换）移动到其宽度的动画。此动画需要应用于多个边框，并且这些边框的宽度会有所不同。所以我将动画关键帧的Value属性绑定到了边框的ActualWidth，所以它会滑出。

尝试运行此代码将产生异常并显示以下消息：Cannot freeze this Storyboard timeline tree for use across threads.

硬编码关键帧的Value 属性值可以解决这个问题，但动画要么走得太远，要么不够远。

这里有一些示例代码，显示了我想要完成的工作。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication1" xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" x:Class="WpfApplication1.MainWindow"
    Title="MainWindow" Height="350" Width="525">
<Grid >
  <Button Content="Show Menu" HorizontalAlignment="Left" Margin="270,30,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" Click="Button_Click"/>

  <Border x:Name="border" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="100" Margin="260,108,0,0" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.5,0.5">
     <Border.Style>
        <Style>
           <Style.Resources>
              <Storyboard x:Key="SlideOut">
                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="border">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="{Binding ActualWidth, ElementName=border}"/>
                 </DoubleAnimationUsingKeyFrames>
              </Storyboard>
              <Storyboard x:Key="SlideIn">
                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="border">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                 </DoubleAnimationUsingKeyFrames>
              </Storyboard>
           </Style.Resources>
        <Style.Triggers>
              <DataTrigger Binding="{Binding IsMenuOpen}" Value="True">
                 <DataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource SlideOut}"/>
                 </DataTrigger.EnterActions>
                 <DataTrigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource SlideIn}"/>
                 </DataTrigger.ExitActions>
              </DataTrigger>
           </Style.Triggers>
        </Style>
     </Border.Style>
        <Border.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Border.RenderTransform>
        <Border.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Border.Background>
    </Border>
</Grid>
</Window>

【问题讨论】：

标签： wpf animation mvvm .net-4.5 datatrigger

【解决方案1】：

您在Storyboard 中使用Binding。您不能使用动态资源引用或数据绑定表达式来设置Storyboard 或动画属性值。这是因为Style 中的所有内容都必须是thread-safe，并且计时系统必须冻结Storyboard 对象以使其成为thread-safe。如果 Storyboard 或其子时间线包含动态资源引用或数据 binding 表达式，则无法冻结它。

编辑这个Link有解决办法。

【讨论】：

有没有办法绕过这个限制？
刚才我已经用新链接更新了答案。对于此类问题，它有详细的解决方案。让我知道它是否适合你。

【解决方案2】：

我不确定你得到的错误是实际原因，但更多的是源自原始问题的问题

试试：

  <Storyboard x:Key="SlideOut">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="border">
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"/>
    </DoubleAnimationUsingKeyFrames>
 </Storyboard>

您可以通过 ElementName 引用对象本身对我来说没有意义。

【讨论】：