如何在 WPF 中悬停时更改图像?

Posted

技术标签:

【中文标题】如何在 WPF 中悬停时更改图像?【英文标题】:How do I change an image on hover over in WPF? 【发布时间】:2010-12-02 22:34:29 【问题描述】:

当我将鼠标悬停在图像上时如何更改图像?

到目前为止,我只有:

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

【问题讨论】:

【参考方案1】:

您需要在 IsMouseOver 属性上使用 Trigger 来修改 Image 的 Source:

<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>

请注意,触发器只能在样式内部使用,并且要让触发器更改属性,该属性的值必须由样式设置,而不是在元素上显式设置。

【讨论】:

请注意,触发器只能在样式内部使用,并且为了让触发器更改属性,该属性的值必须由样式设置,而不是在元素上显式设置。 - 这只是让我有一些问题非常清楚谢谢!【参考方案2】:
<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>

还有其他触发方式。好吗?

【讨论】:

【参考方案3】:

12 年后更新答案

&lt;Image Height="32" Source="/images/Save32.png" Cursor="Hand" /&gt;

【讨论】:

以上是关于如何在 WPF 中悬停时更改图像?的主要内容,如果未能解决你的问题,请参考以下文章

如何在悬停时更改背景图像?

如何使用 SVG 更改悬停时的图像源?

如何在悬停时实现产品图像更改

如何在悬停时更改图像源?

CSS样式:悬停时如何更改图像?

如何在wordpress中悬停时翻转产品图像?