Image Animation: Make Image move left and then back - windows-phone-7

Question

I have the following which works for animating the opacity of the image, but what I'd really like to do is have the image move back in forth say 100 pixels to the right then a 100 pixels to the left. But I haven't been able to achieve this effect.
<Image Source="MyImage.jpg" Width="2000" Height="800" x:Name="MyAnimatedImageGeometry">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="MyAnimatedImageGeometry" Storyboard.TargetProperty="Opacity">
<DoubleAnimation To="0" AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>

Answer 1

Here's an image:
<Image x:Name="image" Source="/filename.png" RenderTransformOrigin="0.5,0.5" >
<Image.RenderTransform>
<CompositeTransform TranslateX="0"/>
</Image.RenderTransform>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<eim:ControlStoryboardAction Storyboard="{StaticResource moveImage}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
The initialization of the rendor transform is the interesting bit. The trigger is just there to demonstrate starting the storyboard. You wouldn't do this in a real app as tapping the item to move it in this way gets messed up when you tap it while it's moving. (Obviously this would be easy to control in code.)
Here's the other interesting bit, the related storyboard:
<Storyboard x:Name="moveImage" AutoReverse="True" RepeatBehavior="1x">
<DoubleAnimation Duration="0:0:1"
To="-100"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="image"
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseIn"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
This will move the image 100 pixels to the left (over a period of one second) and then back again.
I've added an easing function to make it more interesting.