adding mouseover effect to a button with Image in

Question

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.

Answer 1

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>

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.