How do I change an image on hover over in WPF?

wpf image hover
Eli Perpinyal picture Eli Perpinyal · Oct 1, 2009 · Viewed 40.1k times · Source

How can I change an image when I hover over it?

All I have so far is:

<Image Height="32" Source="/images/Save32.png" />

Answer

Phil Devaney picture Phil Devaney · Oct 1, 2009

You need to use a Trigger on the IsMouseOver property to modify the Source of the Image:

<Image>
  <Image.Style>
    <Style TargetType="{x:Type Image}">
      <Setter Property="Source" Value="C:\Image1.jpg"/>
      <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter Property="Source" Value="C:\Image2.jpg"/>
        </Trigger>
      </Style.Triggers>
    </Style>
  </Image.Style>
</Image>

Note that Triggers can only be used inside Styles, and in order for a Trigger to change a property that property's value must be set by the Style and not set explicitly on the element.

Related questions

Setting WPF image source in code

I'm trying to set a WPF image's source in code. The image is embedded as a resource in the project. By looking at examples I've come up with the below code. For some reason it doesn't work - the image …

Read More
Add an image in a WPF button

I tried this solution: <Button> <StackPanel> <Image Source="Pictures/img.jpg" /> <TextBlock>Blablabla</TextBlock> </StackPanel> </Button> But I can see the image only in the project …

Read More
Dynamic loading of images in WPF

I have a strange issue with WPF, I was loading images from the disk at runtime and adding them to a StackView container. However, the images were not displayed. After some debugging I found the trick, but it really doesn't …

Read More