How can I change Button color via a trigger in the button?

Question

Whats wrong with this trigger? I found it here: http://www.wpf-tutorial.com/styles/trigger-datatrigger-event-trigger/ and ive seen similar setups on SO

    <Button x:Name="ColorPickerButton" Background="{Binding SelectedColor}">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Red"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

Im trying to break down my spaghetti XAML and make it more readable. This is my old implementation which does work. I dont like it because it overwrites the button content and overlays a border which seems unnecessary. Also its massive

    <Button x:Name="ColorPickerButton" Background="{Binding SelectedColor}">
        <Button.Resources>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border x:Name="Bd"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Background="{TemplateBinding Background}"
                                    Padding="{TemplateBinding Padding}"
                                    SnapsToDevicePixels="true">
                                <GridViewRowPresenter/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsMouseOver" Value="True"/>
                                    </MultiTrigger.Conditions>
                                    <Setter Property="BorderBrush" Value="{StaticResource ColorPickerButton.MouseOver.Border}"/>
                                </MultiTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Button.Resources>
    </Button>

Answer 1

Your Trigger does not work because the default Template of the button has its own trigger that changes the background brush of the root border when the IsMouseOver Property is set. This means: As long as the mouse is on top of the button, the Background -property of the button control will be ignored by its template.

The easiest way to check out the default style of your button is to: right-click at the button in the visual studio wpf designer. Click ' Edit template ' -> ' Edit a copy ' and select a location. A copy of the default style is created at the specified location. You will see a trigger like this:

  <Trigger Property="IsMouseOver" Value="true">
      <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
      <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
   </Trigger>

On top of designer created style definition it also created the brushes that are used within the style:

     <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
     <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>

You can either change these brushes or the Value property of the setters above to change the background when the mouse is over. Or you create your own Template like you did in your old implementation.