在 XAML 中将鼠标悬停效果添加到带有图像的按钮

Question

我有一个带有图像的按钮，如下所示：

<Button Width="22" Height="22" Command="{Binding PreviousCommand}">                               
  <Button.Template>
    <ControlTemplate>
      <Image Source="C:\Users\abcdef\Desktop\Slide-To-Left-Arrow-24.png"></Image>                            
    </ControlTemplate>
  </Button.Template>
  <Button.InputBindings>
    <KeyBinding Key="Up" Command="{Binding PreviousCommand}" Modifiers="Alt+Shift" />
  </Button.InputBindings>
</Button>

我想应用一些鼠标悬停效果来识别按钮是可点击/可聚焦的。 我尝试按如下方式添加触发器，但它不起作用：

<ControlTemplate.Triggers>
  <Trigger Property="IsMouseOver" Value="True"> 
    <Setter Property="Background" Value="Black" /> 
  </Trigger>
</ControlTemplate.Triggers>

它不工作。我需要做什么？请帮帮我。

Answer 1

此时您的控件模板仅包含一个图像，因此您无法更改背景（通过触发器）。如果您想添加背景更改，您需要稍微扩展您的ControlTemplate。试试这样的：

<Button.Template>
  <ControlTemplate>
    <Grid x:Name="bg">
      <Image Margin="4" Source="C:\Users\dheeraj.dilip.awale\Desktop\Slide-To-Left-Arrow-24.png"></Image>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Target="bg" Property="Background" Value="Black" /> 
        </Trigger>
     </ControlTemplate.Triggers>                            
  </ControlTemplate>
</Button.Template>

这只是一个非常简单的示例，说明如何利用上面显示的触发器。所有这一切都是在图像下方添加一个Grid，并在图像中添加一个Margin，以便Grid 的一部分可见。然后，当用户将鼠标悬停在按钮上时，它使用Setter 的Target 属性来分配Grid 的Background。您当然可以使用 ControlTemplate 做更多的事情来提供其他类型的视觉提示，但希望这能让您开始。