Generic template for Image with style and triggers

Question

I saw this post Given a WPF Image control, how can I make it bigger through animation on MouseEnter?

and I was wondering if I want to reuse this code on many Images in my project how can I apply a template to do so?

I tried creating a style but i got exception that I cannot use TargetName in Storyboard.TargetName="scale"

The Code:

<Image Width="100" Height="100" Source="...">
    <Image.RenderTransform>
        <ScaleTransform 
            x:Name="scale" 
            CenterX="50" 
            CenterY="50" 
            ScaleX="1" 
            ScaleY="1" />
    </Image.RenderTransform>

    <Image.Triggers>
        <EventTrigger RoutedEvent="Image.MouseEnter">
            <BeginStoryboard>
                <BeginStoryboard.Storyboard>
                    <Storyboard Duration="0:0:0.2">
                        <DoubleAnimation 
                            Storyboard.TargetName="scale" 
                            Storyboard.TargetProperty="ScaleX" 
                            To="1.5" />
                        <DoubleAnimation 
                            Storyboard.TargetName="scale" 
                            Storyboard.TargetProperty="ScaleY" 
                            To="1.5" />
                    </Storyboard>
                </BeginStoryboard.Storyboard>
            </BeginStoryboard>
        </EventTrigger>

        <EventTrigger RoutedEvent="Image.MouseLeave">
            <BeginStoryboard>
                <BeginStoryboard.Storyboard>
                    <Storyboard Duration="0:0:0.2">
                        <DoubleAnimation 
                            Storyboard.TargetName="scale" 
                            Storyboard.TargetProperty="ScaleX" 
                            To="1" />
                        <DoubleAnimation 
                            Storyboard.TargetName="scale" 
                            Storyboard.TargetProperty="ScaleY" 
                            To="1" />
                    </Storyboard>
                </BeginStoryboard.Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Image.Triggers>
</Image>

Answer 1

this is not the final answer, but I have been trying since this morning (I have to go now :-) ) but I thought this can lead you to find an answer. I still have a runtime error, but it seems to be on the right path.

<Window.Resources>
    <ScaleTransform x:Key="Scale" 
        CenterX="50" 
        CenterY="50" 
        ScaleX="1.5" 
        ScaleY="1.5" />
    <Style x:Key="ImageStyle" TargetType="Image">
        <Style.Setters>
            <Setter Property="Image.RenderTransform" Value="{StaticResource Scale}" />
        </Style.Setters>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Image.MouseEnter">
                <BeginStoryboard>
                    <BeginStoryboard.Storyboard>
                        <Storyboard Duration="0:0:0.2">
                            <DoubleAnimation 
                                Storyboard.Target="{DynamicResource Scale}"
                                Storyboard.TargetProperty="ScaleX" 
                                To="1.5" />
                            <DoubleAnimation 
                              Storyboard.Target="{DynamicResource Scale}"
                              Storyboard.TargetProperty="ScaleY" 
                              To="1.5" />
                        </Storyboard>
                    </BeginStoryboard.Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>


</Window.Resources>

   <Image Grid.Row="2" Width="100" Height="100" Source="C:\WindowPhoneApp7_1.PNG" Style="{StaticResource ImageStyle}">