Why does the animation I copied in from Expression Blend to Silverlight VS project only run once?

Question

In my Silverlight application, I want different texts to repeatedly fly in from the right changing colors and getting smaller. The animation works the first time through the loop but not subsequent times.

Here's what I did:

(1) I went into Expression blend, used the "Create Storyboard" tool to create the animation.

then (2) copied the StoryBoard block to my XAML:

<UserControl x:Class="TestWeb124.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="800" Height="600">
    <UserControl.Resources>
        <Storyboard x:Key="FadeTextIn">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-111" KeySpline="0,0,0,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-88" KeySpline="0,0,0,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(TextBlock.FontSize)">
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="14" KeySpline="0,0,0,1"/>
            </DoubleAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFC24343"/>
                <SplineColorKeyFrame KeyTime="00:00:01.5000000" Value="#FF000000" KeySpline="0,0,0,1"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Margin="20">
            <TextBlock Height="57" Margin="190,90,133,0" VerticalAlignment="Top" Text="This is a test." TextWrapping="Wrap" FontSize="36" RenderTransformOrigin="0.5,0.5" x:Name="OutputText" Foreground="#FF000000">
      <TextBlock.RenderTransform>
       <TransformGroup>
        <ScaleTransform/>
        <SkewTransform/>
        <RotateTransform/>
        <TranslateTransform/>
       </TransformGroup>
      </TextBlock.RenderTransform>
            </TextBlock>
        </StackPanel>
    </Grid>
</UserControl>

Then (3) in my code behind I run through a timer loop. The animation works great the first time, but subsequent times there is no animation:

public void Each_Tick(object o, EventArgs sender)
{
    if (_secondsElapsed % 5 == 0 || _secondsElapsed == 0)
    {
        OutputText.Text = String.Format("{0}", _customerFirstNames.ElementAt(_customerNodeIndex));
        Storyboard fadeTextIn = (Storyboard)Resources["FadeTextIn"];
        fadeTextIn.Begin();
        _customerNodeIndex++;
        if (_customerNodeIndex > _customerFirstNames.Count() - 1) _customerNodeIndex = 0;
    }
    _secondsElapsed++;
}

It seems that I need to reset the position of the new piece next piece of text that is supposed to fly it. How do I do that?

Answer 1

        <Storyboard x:Name="FadeTextIn">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" KeySpline="0,0,0,1"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-111" KeySpline="0,0,0,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" KeySpline="0,0,0,0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-88" KeySpline="0,0,0,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(TextBlock.FontSize)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="36" KeySpline="0,0,0,0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="14" KeySpline="0,0,0,1"/>
            </DoubleAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFC24343"/>
                <SplineColorKeyFrame KeyTime="00:00:01.5000000" Value="#FF000000" KeySpline="0,0,0,1"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

What the Storyboard is doing is to take an Element and then animate the manipulation of it's properties. That's why the second time it runs the Element already has the target properties, so by adding a keyframe for the start of the animation that sets the values to the initial values your animation will repeat nicely.