How can I make an image grow x % on mouseover event in wpf?

Question

Hi,

I have a ListBox containing a set of images in a C# WPF application. When the image enters the image area, that is, on the MouseEnter event, I want the image to grow approx 10 %. This is to notify the user that the mouse pointer is now on a new "clickable" image. Do anyone know how I can accomplish this?

Thanx in advance!

Answer 1

I can only sketch it very rough, but this could be achieved with a trigger on the IsMouseOverProperty that changes the ScaleX & Y properties of a ScaleTransform already placed on the element.

EDIT: Looking at Chris' post, this could then work:

<Style.Triggers>
  <Trigger Property="IsMouseOver" Value="True">
    <Setter Property="RenderTransform">
      <Setter.Value>
          <ScaleTransform ScaleX="1.5" ScaleY="1.5" />
      </Setter.Value>
    </Setter>
  </Trigger>
</Style.Triggers>

Answer 2

register these two events:

private void image1_MouseEnter(object sender, MouseEventArgs e)
{
    Image img = ((Image)sender);
    img.Height = img.ActualHeight * 1.1;

}

private void image1_MouseLeave(object sender, MouseEventArgs e)
{
    Image img = ((Image)sender);
    img.Height /= 1.1;
}

Answer 3

This post on Learn WPF shows how to add a glowing effect on the mouse over:

  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="BitmapEffect">
        <Setter.Value>
          <OuterGlowBitmapEffect GlowColor="Red" GlowSize="4"/>
        </Setter.Value>
      </Setter>
    </Trigger>
  </Style.Triggers>

Just replace the "BitmapEffect" setter with a "ScaleTransform" one and you should be good to go. This post on Ryan Cromwell's blog shows how to do it on the button click. It demonstrates the important point which is to set the render transform centre to be the centre of the image so that the scaling is uniform in all directions and not just from the top left.