how to popout the image in wpf not only the height and width but also left and top?

Question

hi guyz i saw and tried the code using scaletransform from andrej blog on how to popout the image smoothly and it's nice. here's the code

<Window.Resources>
 <Storyboard x:Key="expandStoryboard">
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
        To="2" Duration="0:0:0.2" />
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
        To="2" Duration="0:0:0.2" />
</Storyboard>
<!-- This storyboard will make the image revert to its original size -->
<Storyboard x:Key="shrinkStoryboard">
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
        To="1" Duration="0:0:0.2" />
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
        To="1" Duration="0:0:0.2" />
</Storyboard>
</Window.Resources>

and in grid area, something like this:

        <Image Name="image2" Source="C:\Documents and Settings\My Documents\Visual Studio 2010\settings_256.png" Margin="23,44,372,221" HorizontalAlignment=" center" VerticalAlignment="Center" >
        <Image.Triggers>
            <EventTrigger RoutedEvent="Image.MouseEnter">
                <BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
            </EventTrigger>
            <EventTrigger RoutedEvent="Image.MouseLeave">
                <BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
            </EventTrigger>
        </Image.Triggers>
        <Image.RenderTransform>
            <ScaleTransform ScaleX="1" ScaleY="1"/>
        </Image.RenderTransform>
    </Image>

so when im going to point my mouse in the image it will resize the height and the width of the image smoothly. but what i want to do also is if im going to do mouseover, i want my left and top of the image will change the position like decreasing the margin something like image1.margin(left-5,top-5). so it will pop the image out as width++ height++ left-- top--

anyone? thanks and God bless :)

Answer 1

You could use UIElement.RenderTransformOrigin Property:

<Image RenderTransformOrigin="0.5, 0.5"
       Name="image2" Source="C:\Documents and Settings\My Documents\Visual Studio 2010\settings_256.png"
       Margin="23,44,372,221" HorizontalAlignment="center" VerticalAlignment="Center">
    <Image.Triggers>
        <EventTrigger RoutedEvent="Image.MouseEnter">
            <BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
        </EventTrigger>
        <EventTrigger RoutedEvent="Image.MouseLeave">
            <BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
        </EventTrigger>
    </Image.Triggers>
    <Image.RenderTransform>
        <ScaleTransform ScaleX="1" ScaleY="1"/>
    </Image.RenderTransform>
</Image>