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

0 votes
asked Oct 1, 2009 by eli-perpinyal

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

All I have so far is:

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

2 Answers

0 votes
answered Oct 1, 2009 by phil-devaney

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.

0 votes
answered Oct 1, 2009 by vincent-bouzon
<Image Stretch="Fill" >
        <Image.Style>
            <Style>
                <Setter Property="Image.Source" Value="original.png" />
                <Style.Triggers>
                    <Trigger  Property="Image.IsMouseOver" Value="True">
                        <Setter Property="Image.Source" Value="mouseover.png" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
</Image>

There are other ways that trigger. All right?

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...