Изменить изображение на кнопке на MouseOver XAML (WPF)

Question

Я работаю над приложением, и одно из требований - изменить изображение кнопки при наведении мыши.

Ниже приведен мой код для кнопки,

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

И ниже стиль, который я применяю,

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

Я не уверен, что я делаю неправильно, но приведенный выше код не работает.

Любая помощь будет принята

Answer 1

Удалить IsEnabled="True" и определить элемент Border в самом ControlTemplate, а не в 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>

Если вы хотите ContentPresenter, вы должны заменить его Content в триггере:

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

Свойство IsMouseOver никогда не устанавливается на true, если Buttonотключен.