WPF Image Zoom when MouseFocus

I actually spent a day trying to figure out how to apply render transform to all images in a style. It is pretty simple using XAML and this without using any-code behind.
Then ScaleTransform ScaleX and ScaleY was binded to the ActualWidth and ActualHeight of the Image and make use of the “DoubleSplitConverter” to divide the width and height to enable the image transform on the center of its location. As what MSDN (http://msdn.microsoft.com/en-us/library/system.windows.media.scaletransform.aspx).

XAML Code:

         <Style TargetType="{x:Type Image}" >
                <Setter Property="Margin" Value="4"/>
                <Setter Property="RenderTransform" >
                    <Setter.Value>
                        <ScaleTransform ScaleX="1" ScaleY="1" CenterX="{Binding RelativeSource={RelativeSource AncestorType={x:Type Image}, AncestorLevel=1}, Path=ActualWidth, Converter={StaticResource DoubleSplitConverter}}" CenterY="{Binding RelativeSource={RelativeSource AncestorType={x:Type Image}, AncestorLevel=1}, Path=ActualHeight, Converter={StaticResource DoubleSplitConverter}}" />
                    </Setter.Value>>
                </Setter>
                <Style.Triggers>
                    <EventTrigger RoutedEvent="Image.MouseEnter" >
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.20" />
                                <DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.20" />

                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Image.MouseLeave" >
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleX)" To="1" Duration="0:0:0.20" />
                                <DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleY)" To="1" Duration="0:0:0.20" />

                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>

Then, we do have “DoubleAnimation” on RoutedEvent “Image.MouseEnter” which enables the scaleX and ScaleY to be adjusted to 1.5. “MouseLeave” does it so to return to its size 1.
The Storyboard.TargetProperty signifies that we apply these animation to the {Image.RenderTransform}.{ScaleTransform.ScaleX and Y}. This statement will not work if we don’t have a value for our RenderTransform property of <ScaleTransform>
This is the Converter to use just dividing it by 2.

    Public Class DoubleSplitConverter
        Implements IValueConverter


        Public Function Convert(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert
            Dim mValue As Double = value
            Return mValue / 2
        End Function

        Public Function ConvertBack(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack
            Dim mValue As Double = value
            Return mValue * 2
        End Function
    End Class

Hope you like it.