XAML 动画移动倒计时

Question

我有以下 TextBlock，它将是一个移动的倒数计时器：

 <TextBlock x:Name="countdown">
      <TextBlock.RenderTransform>
          <TranslateTransform x:Name="countdownTransform" />
      </TextBlock.RenderTransform>
 </TextBlock>

以下触发器应移动 TextBlock 并设置倒计时文本：

<Grid.Triggers>
    <EventTrigger SourceName="PlayButton" RoutedEvent="Button.Click">
         <BeginStoryboard>
               <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="songProgressBar" 
                                     Storyboard.TargetProperty="Value"
                                     From="0:30:0" To="0" Duration="0:30:0" />
                    <DoubleAnimation Storyboard.TargetName="countdownTransform" 
                                     Storyboard.TargetProperty="X" AutoReverse="True" 
                                     From="0.0" To="{Binding ElementName=countdown, Path=Width}" Duration="0:30:0" />
               </Storyboard>
          </BeginStoryboard>
    </EventTrigger>
</Grid.Triggers>

但是，DoubleAnimation 的 From 属性不接受（显然）TimeSpan 并且对于第二个触发器，To 属性没有绑定到 TextBlock 的 Width。是否有自定义类型的动画在 To 属性中接受 TimeSpan？

我希望能够在 XAML 中做到这一点，我知道这在 c# 代码中是可能的。

Answer 1

除非您明确设置，否则 TextBlock 的 Width 是 NaN，并且 NaN 不是 DoubleAnimation 的 To 属性的有效值。您应该已经在 VS 输出窗口中看到了错误消息：

System.Windows.Data 错误：5：BindingExpression 产生的值是 对目标属性无效。；值='NaN' 绑定表达式：路径=宽度； DataItem='TextBlock' (Name='countdown'); 目标元素是“DoubleAnimation”（HashCode=62632450）；目标 属性是'To'（类型'Nullable`1'）

您可以改为绑定到ActualWidth：

<DoubleAnimation ... To="{Binding ElementName=countdown, Path=ActualWidth}" />

对于其他动画：如果持续时间是一个常数值，为什么不简单地设置From="30"？否则，您还必须有一个 ProgressBar，它需要 Value、Minimum、Maximum 等的 TimeSpan。