Change image on button on MouseOver XAML (WPF) - wpf

Question

I am working on application and one requirement is to change the image of the button on mouse hover.
Below is my code for button,
<Grid Margin="0 20 0 0" Name="ButtonsGrid" Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="AnswerButton" Style="{StaticResource hover2}" Grid.Column="0" VerticalAlignment="Center" HorizontalContentAlignment="Center" Width="60" Height="60" Background="Transparent" IsEnabled="False" Click="AnswerButton_OnClick" BorderBrush="Transparent" BorderThickness="0" >
<Image Source="/Training.Project.Demo;component/Images/Answer.PNG" Stretch="UniformToFill"/>
</Button>
And below is the style i am applying,
<Style x:Key="hover2" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter.Content>
<Border Name="border"
BorderThickness="0"
BorderBrush="Transparent"
Background="{TemplateBinding Background}">
<Image x:Name="ButtonImage1" Source="/Training.Project.Demo;component/Images/Answer.PNG" Height="17" Width="17" />
</Border>
</ContentPresenter.Content>
</ContentPresenter>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
<Setter TargetName="ButtonImage1" Property="Source" Value="/Training.Project.Demo;component/Images/answer-hover.PNG" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am not sure what wrong am i doing but the above code is not working.
Any help would be appreciated

Answer 1

Remove IsEnabled="True" and define the Border element in the ControlTemplate itself and not in a ContentPresenter:
<Style x:Key="hover2" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="0"
BorderBrush="Transparent"
Background="{TemplateBinding Background}">
<Image x:Name="ButtonImage1" Source="/Training.Project.Demo;component/Images/Answer.PNG" Height="17" Width="17" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
<Setter TargetName="border" Property="BorderThickness" Value="1" />
<Setter TargetName="ButtonImage1" Property="Source" Value="/Training.Project.Demo;component/Images/answer-hover.PNG" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
XAML:
<Button x:Name="AnswerButton" Style="{StaticResource hover2}" Grid.Column="0" VerticalAlignment="Center" HorizontalContentAlignment="Center" Width="60" Height="60" Background="Transparent" Click="AnswerButton_OnClick" BorderBrush="Transparent" BorderThickness="0" >
<Image Source="/Training.Project.Demo;component/Images/Answer.PNG" Stretch="UniformToFill"/>
</Button>
If you want a ContentPresenter, you should replace the its Content in the trigger:
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="0"
BorderBrush="Transparent"
Background="{TemplateBinding Background}">
<ContentPresenter x:Name="cp" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
<Setter TargetName="border" Property="BorderThickness" Value="1" />
<Setter TargetName="cp" Property="Content">
<Setter.Value>
<Image Source="/Training.Project.Demo;component/Images/answer-hover.PNG" Stretch="UniformToFill"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
The IsMouseOver property is never set to true if the Button is disabled.