Storyboard can't be executed twice - windows-phone-7

Question

I tried to use an animation in my app and I'm using only two pages to test the animation.
When the app starts for the first time, I want to animate my application title with a sliding effect. The title should come from outside the page.
I used the following code:
<StackPanel x:Name="TitlePanel"
Grid.Row="0"
Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle"
Text="{Binding LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"
Style="{StaticResource PhoneTextNormalStyle}" RenderTransformOrigin="0.5,0.5" >
<TextBlock.RenderTransform>
<CompositeTransform x:Name="ApplicationTitleTransIn" TranslateX="-200"/>
</TextBlock.RenderTransform>
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard BeginTime="00:00:0.5">
<DoubleAnimation Duration="00:00:0.7"
Storyboard.TargetName="ApplicationTitleTransIn"
Storyboard.TargetProperty="TranslateX"
From="-200" To="0">
<DoubleAnimation.EasingFunction>
<BackEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</StackPanel>
And it works pretty well.
When I click a button, my application title should move to the right side of my page and then the second page should be displayed.
I created the following storyboard:
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="ApplicationTitleTransOut">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ApplicationTitle">
<EasingDoubleKeyFrame KeyTime="0" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseIn"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="600">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseIn"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
In the code behind, the storyboard is executed as follow:
ApplicationTitleTransOut.Completed += delegate
{
ApplicationTitleTransOut.Stop();
var vm = DataContext as MainViewModel;
if (vm != null)
{
vm.OpenPageCommand.Execute(listBox.SelectedItem as TileItem);
}
};
ApplicationTitleTransOut.Begin();
The text will move to the right side of my page and then I'll navigate to the second page.
Until now everything works.
But when I press the back button (on the phone) I've an exception.
ExceptionObject = {System.InvalidOperationException: Cannot resolve TargetName ApplicationTitleTransIn.}
Did I miss something? Is this the right way to achieve this animation?
Thank you for your help.

Answer 1

In your situation, I would structure the XAML layout differently. First of all, it does not seem that you need CompositeTransform, but just TranslateTransform. In this case, use this snippet for RenderTransform:
<TextBlock.RenderTransform>
<TranslateTransform x:Name="ApplicationTitleTransIn" X="-200"/>
</TextBlock.RenderTransform>
Now, when you are binding the DoubleAnimation to it, use relative property conventions:
<DoubleAnimation Duration="00:00:0.7"
Storyboard.TargetName="ApplicationTitle"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
From="-200" To="0">
Same applies to your DoubleAnimationUsingKeyFrames:
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ApplicationTitle">
Works like a charm.