Silverlight Animation

Im creating a header for a website in silverlight.
The header will take an image slide the image across the header & fade out.
When the image reaches the other side of the header the image must change.
The animation is working but the image does not want to change.
What am i doing wrong ?
xaml attached
	Width="640" Height="239">
		<Storyboard x:Name="ImageMove">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="119"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="83"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="-22"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-98"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="-234"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01.7000000" Value="-329"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.1000000" Value="-367"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="-383"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.9000000" Value="-326"/>
				<SplineDoubleKeyFrame KeyTime="00:00:03.3000000" Value="-279"/>
				<SplineDoubleKeyFrame KeyTime="00:00:03.6000000" Value="-221"/>
				<SplineDoubleKeyFrame KeyTime="00:00:03.9000000" Value="-148"/>
				<SplineDoubleKeyFrame KeyTime="00:00:04.3000000" Value="-48"/>
				<SplineDoubleKeyFrame KeyTime="00:00:04.6000000" Value="125"/>
				<SplineDoubleKeyFrame KeyTime="00:00:05" Value="163"/>
				<SplineDoubleKeyFrame KeyTime="00:00:05.3000000" Value="190"/>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.485"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.59"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0.695"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0.795"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="0.895"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01.7000000" Value="0.985"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.1000000" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="0.1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.9000000" Value="0.17"/>
				<SplineDoubleKeyFrame KeyTime="00:00:03.3000000" Value="0.395"/>
				<SplineDoubleKeyFrame KeyTime="00:00:03.6000000" Value="0.575"/>
				<SplineDoubleKeyFrame KeyTime="00:00:03.9000000" Value="0.715"/>
				<SplineDoubleKeyFrame KeyTime="00:00:04.3000000" Value="0.895"/>
				<SplineDoubleKeyFrame KeyTime="00:00:04.6000000" Value="0.705"/>
				<SplineDoubleKeyFrame KeyTime="00:00:05" Value="0.53"/>
				<SplineDoubleKeyFrame KeyTime="00:00:05.3000000" Value="0.135"/>
	<Grid x:Name="LayoutRoot" Background="White">
		<Image HorizontalAlignment="Right" Margin="0,0,8,8" Width="249" Source="Images/underfloor-heating.jpg" Stretch="UniformToFill" RenderTransformOrigin="0.5,0.5" Opacity="0.185" x:Name="image">
					<ScaleTransform ScaleX="1" ScaleY="1"/>
					<TranslateTransform X="257"/>

Open in new window

Who is Participating?
TSmoothConnect With a Mentor Commented:
You can't "animate" an image change I don't think. I'm not positive on that though but I can tell from looking at your xaml that there is no image changing in any of the storyboard. I can think of two ways you can do what you need:

1) Have two images present and just animate the opacity of both so that one shows up and the other doesn't at the right time in your storyboard.

2) In code behind, add code that fires when the proper storyboard completes that changes the image source.
How are you going about changing the image?
u2envy1Author Commented:
While the storyboard is recording I selected the new image to the image control.
What is the options in changing the image ?
If you can't get it to work the way you are attempting. Have both or all of your images as seperate images in the animation.  when you reach the desired frame, you can then fade your images in and out, you can even get a better morphing effect this way.

After reading your 2nd post, I don't think you can do what you are trying to do in a storyboard.  I would just have both images ready with ones opacity set to 0
u2envy1Author Commented:
Any code example for the 2nd option ?

2) In code behind, add code that fires when the proper storyboard completes that changes the image source.

If I would want to use this control in my app. Must I create the control as a silverlight project in expression blend or silverlight project in visual studio ?
For using the control in I just want to add a reference to the control & use it.
Is that possible ?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.