Question

I would like to zoom in on a Image when Image.MouseEnter fires and then zoom out when Image.MouseLeave fires.
I thought of creating a Trigger, but no luck.

This is what i tried so far:

    <Image Name="logo" Source="{Binding Path=ImagePath}" 
          Width="50" Height="50">
      <Image.RenderTransform>
          <ScaleTransform x:Name="TransRotate"  />
      </Image.RenderTransform>
      <Image.Triggers>
    <EventTrigger RoutedEvent="Image.MouseEnter">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="TransRotate" 
                         Storyboard.TargetProperty="ScaleX"
                         From="0" To="100"
                         BeginTime="0:0:0"
                         Duration="0:0:10"  
                         AutoReverse="False"/>
                <DoubleAnimation Storyboard.TargetName="TransRotate" 
                         Storyboard.TargetProperty="ScaleY"
                         From="0" To="100"                                                           
                         BeginTime="0:0:0"
                         Duration="0:0:10"
                         AutoReverse="False"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
  </Image.Triggers>
</Image>

Is this the correct way, or is there a better way?

Answer 1

I would remove the From property, this makes the animation jump, apart from that you just seem to be lacking the reverse animations on MouseLeave. Also to center the zoom you can set the RenderTransformOrigin of the Image to 0.5,0.5.

Instead of using those two events i usually prefer a trigger on IsMouseOver with Enter and ExitActions.

If you want to retain the space the image takes you can place it in a container with fixed size and set ClipToBounds to true.