Question

I have the following TextBlock which will be a moving countdown timer:

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

The following triggers should move the TextBlock and set the countdown text:

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

However, the DoubleAnimation’s From property doesn’t accept (obviously) TimeSpan and for the second trigger, To property isn’t binding to the TextBlock’s Width. Is there a custom type of animation that accepts TimeSpan at To property?

I want to be able to do this in XAML, I know this is possible in c# code.

Answer 1

The Width of the TextBlock is NaN unless you explicitly set it, and NaN is not a valid value for the To property of a DoubleAnimation. You should have seen the error message in VS output window:

System.Windows.Data Error: 5 : Value produced by BindingExpression is
not valid for target property.; Value=’NaN’
BindingExpression:Path=Width; DataItem=’TextBlock’ (Name=’countdown’);
target element is ‘DoubleAnimation’ (HashCode=62632450); target
property is ‘To’ (type ‘Nullable`1’)

You could instead bind to ActualWidth:

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

For the other animation: If the duration is a constant value, why not simply set From="30"? Otherwise you would also have to have a ProgressBar that takes a TimeSpan for Value, Minimum, Maximum etc.