Image Transformation with ResourceDictionary

I am trying to move as well as scale an Image on mousemove/source changed of the image. I have written following style for the开发者_StackOverflow中文版 Image, but it is not working :

 <Style x:Key="MovingImage" TargetType="{x:Type Image}">
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="Stretch" Value="Uniform"/>
    <Setter Property="VerticalAlignment" Value="Top"/>
    <Setter Property="Width" Value="auto"/>
    <Setter Property="Height" Value="auto"/>
    <Style.Resources>
        <Storyboard x:Key="TransformImage">
            <DoubleAnimation Duration="0:0:3" By="-500" Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)"></DoubleAnimation>
            <DoubleAnimation Duration="0:0:3" By="-500" Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.Y)"></DoubleAnimation>
            <DoubleAnimation Duration="0:0:3" By="-500" From="1" To="0.5" Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleX)"></DoubleAnimation>
            <DoubleAnimation Duration="0:0:3" By="-500" From="1" To="0.5" Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleY)"></DoubleAnimation>
        </Storyboard>
    </Style.Resources>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource TransformImage}" />
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>

You need to do two things to get this working. Firstly define the default transform group that you want to have set (so in your case the appropriate transforms inside a transform group)

<Setter Property="RenderTransform">
    <Setter.Value>
        <TransformGroup>
            <TranslateTransform />
            <ScaleTransform />
        </TransformGroup>                        
    </Setter.Value>
</Setter>

Then next when you actually reference the target property you have to explicitly specify the point of the transform group that you want to change. I would also suggest adding in some exit actions so your image doesn't disappear forever =)

<DoubleAnimation Duration="0:0:3" By="-500" Storyboard.TargetProperty="(Image.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)"></DoubleAnimation>
<DoubleAnimation Duration="0:0:3" By="-500" Storyboard.TargetProperty="(Image.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)"></DoubleAnimation>
<DoubleAnimation Duration="0:0:3" By="-500" From="1" To="0.5" Storyboard.TargetProperty="(Image.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"></DoubleAnimation>
<DoubleAnimation Duration="0:0:3" By="-500" From="1" To="0.5" Storyboard.TargetProperty="(Image.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"></DoubleAnimation>