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

Question

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

<Button Width="22" Height="22" Command="{Binding PreviousCommand}">                               
  <Button.Template>
    <ControlTemplate>
      <Image Source="C:UsersabcdefDesktopSlide-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:Usersdheeraj.dilip.awaleDesktopSlide-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做更多的事情来提供其他类型的视觉提示，但希望这能让你开始。