当鼠标悬停在按钮上时，WPF更改图像

本文关键字：WPF 图像 鼠标 悬停 按钮 | 更新日期: 2023-09-27 18:25:59

当鼠标放在按钮上时，我试图更改图像，但它不起作用

<Button x:Name="Play" Content="" ClickMode="Press" BorderThickness="0" UseLayoutRounding="True" Height="120" Width="224">
    <Button.Background>
        <ImageBrush ImageSource="Resources/Play 1.gif"/>
    </Button.Background>
    <Button.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="ImageBrush.ImageSource" Value="Resources/Play 2.gif"></Setter>
        </Trigger>
    </Button.Triggers>
</Button>

但这给了我一个错误：Triggers collection members must be of type EventTrigger.

我该如何让它发挥作用？

当鼠标悬停在按钮上时，WPF更改图像

这是正确的-您只能在其中放置EventTriggers。你需要将你的触发器移动到按钮的样式：

<Button x:Name="Play" Content="" ClickMode="Press" BorderThickness="0" UseLayoutRounding="True" Height="120" Width="224">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="..'Resources'Play 1.gif"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background">
                        <Setter.Value>
                            <ImageBrush ImageSource="..'Resources'Play 2.gif"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
         </Style>
    </Button.Style>
</Button>

我想是这样的（还没有测试过）。

编辑：这会在正确的图像之间切换，但无法正常工作（它从播放1.gif开始，转换到播放2.gif，然后转换到按钮的基本颜色）。我认为您必须覆盖按钮的ControlTemplate以防止这种情况发生，正如评论中所建议的那样。

<Window x:Class="Image_ChangeOnHover"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Title="Image_ChangeOnHover" Height="300" Width="300">
 <Grid>
   <Image Stretch="None" Margin="10">
     <Image.Resources>
       <Style TargetType="{x:Type Image}">
         <!-- Default image -->
         <Setter Property="Source" Value="/Resources/Off2.png"/>
       <Style.Triggers>
         <Trigger Property="IsMouseOver" Value="True">
           <!-- Hover image -->
           <Setter Property="Source" Value="/Resources/On.png"/>
         </Trigger>
       </Style.Triggers>
     </Style>
    </Image.Resources>
   </Image>
  </Grid>
</Window>
相关文章：