IsMouseOver Property on Button not working

Question

I have this button and wanted to change the design if I hover over it with the mouse. It's not working and I'm not getting an error. What am I doing wrong? (I'm really new to WPF)

    <Button MaxWidth="180"
            Margin="5"
            DockPanel.Dock="Top"
            Padding="5"
            FontSize="12"
            Foreground="#1261AC"
            FontWeight="SemiBold"
            BorderBrush="Transparent">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Border CornerRadius="5" Background="LightGray" BorderThickness="1" Padding="5">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Foreground" Value="#157ec4"/>
                        <Setter Property="Background" Value="#000000"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

The button itself is working but it is not chaning the color of the background or font. (The colors in my example are just for testing)

Answer 1

The problem with your code is that you define the border-background to be gray. Now you change the control background using a trigger. However, the background that is set by the trigger is not yet related to the border background in your example. I added a template binding that fixes this issue to you. Now the border in your template will always have the Background defined in your style, set by triggers or directly set in XAML.

PLEASE NOTE: If you set the color in XAML by using <Button Background="Pink"/> this will overwrite the style and trigger attributes.

if you still want to overwrite the background property for a single button for some reason without overwritting the triggers you'll have to create a style based on the original style using the BasedOn Property:

<Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
    <Setter Propert="Background" Value="Yellow"/>    
</Style>

try this piece of art:

ButtonStyle:

<Button Content="Hello there!"
    MaxWidth="180"
    Margin="5"
    DockPanel.Dock="Top"
    Padding="5"
    FontSize="12"
    Foreground="#1261AC"
    FontWeight="SemiBold"
    BorderBrush="Transparent">
<Button.Style>
    <Style TargetType="Button">
        <Setter Property="Background" Value="HotPink"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border CornerRadius="5" Background="{TemplateBinding Background}" BorderThickness="1" Padding="5">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="Red" />
                <Setter Property="Background" Value="Lime" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Button.Style>