将鼠标悬停效果到一个按钮在XAML图像 [英] adding mouseover effect to a button with Image in XAML

问题描述

我有上图像的按钮如下：

I am having a button with Image on it as follows:

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

我想通过效果来识别按钮应用一些鼠标是可以点击/可获得焦点。
我尝试添加触发器，但它不工作如下：

I want to apply some mouse over effect to recognise button is clickable/focusable. I tried adding trigger as follows but its not working:

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

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

Its not working. what I need to do? please help me out.

推荐答案

您控制模板包含的只有的在这一点上的形象，所以没有什么是可以改变的背景（通过你触发）。如果你想添加背景变化，你需要扩大你的控件模板一点点。尝试是这样的：

Your control template consists only of an Image at this point, so there is nothing that you can change the background on (through your trigger). If you'd like to add a background change, you'll need to expand your ControlTemplate a little. Try something like this:

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

这仅仅是一个的很简单的例子，你可以如何利用您在上方显示的触发器。所有这一切确实是添加电网图像下面和保证金来的图像，从而使<$ C的一部分$ C>电网可见。然后，它使用二传手分配背景目标属性C>在网​​格当用户将鼠标悬停在该按钮。你当然可以做你的控件模板来提供其他类型的视觉线索，但希望这将让你开始。

This is just a very simple example of how you can utilize the trigger you've shown above. All this does is add a Grid under the image and a Margin to the image so that part of the Grid is visible. It then uses the Target property of the Setter to assign the Background of the Grid when the user hovers over the button. You can certainly do much more with your ControlTemplate to provide other types of visual cues, but hopefully this will get you started.

这篇关于将鼠标悬停效果到一个按钮在XAML图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！