MouseOver style trigger won't change background

Question

New to WPF, coming from a web background.

My style trigger won't change button background. Style XAML:

<Window.Resources>
    <Style TargetType="Button">
        <Setter Property="Background" Value="GhostWhite" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="#F48230"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources> 

Button XAML (nothing relevant in Window or Grid attributes):

<Window...>
    <Grid...>
        <StackPanel Orientation="Horizontal" Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Button Name="btnEdit" Cursor="Hand" Content="Edit Settings..." HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Margin="0,0,5,0" Click="btnEdit_Click"/>
            <Button Name="btnExit" Cursor="Hand" Content="Exit" HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Margin="5,0,0,0" Click="btnExit_Click" />
        </StackPanel>
    </Grid>
</Window>

The buttons do pick up the background style in the resources section, but not the trigger - mouseover results in default behaviour.

Supplementary question: Is there a way I can debug this? I looked in Live Visual Tree but couldn't figure out how to get the info I need.

Answer 1

WPF Controls have a Template property of type ControlTemplate. This property tells WPF how to draw the control on the screen. A WPF Button uses Windows Chrome in it's ControlTemplate which uses user selected system colors to allow for consistency between different applications. Leveraging the magic of WPF and XAML, you can create your own ControlTemplate to make the button look any way you see fit.

Create a style with a key so you can choose which buttons use the template:

<Window.Resources>
    <Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="GhostWhite" />
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <!-- a simple square button -->
                    <Border Name="wrapper"
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Margin="{TemplateBinding Margin}"
                            Background="#01000000">
                        <!-- notice the wrapper has a background that is NEAR transparent. This is important. It'll ensure the button raises the click event -->
                        <Border Name=inner
                                Background="{TemplateBinding Background}">
                            <ContentPresenter Margin="{TemplateBinding Padding}"
                                              HorizontalAlignment="Center"
                                              VerticalAlignment="Center" />
                        </Border>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
       <Style.Triggers>
           <Trigger Property="IsMouseOver" Value="True">
               <Setter Property="Background" Value="#FFF48230"/>
           </Trigger>
           <Trigger Property="IsPressed" Value="true">
               <Setter Property="Background" Value="#FF99501B"/>
           </Trigger>
       </Style.Triggers>
    </Style>
</Window.Resources> 

And then to use the template on a button:

<Window...>
    <Grid...>
        <StackPanel Orientation="Horizontal" Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Button Style="{StaticResource MyButtonStyle}" Name="btnEdit" Cursor="Hand" Content="Edit Settings..." HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Margin="0,0,5,0" Click="btnEdit_Click"/>
            <Button Style="{StaticResource MyButtonStyle}" Name="btnExit" Cursor="Hand" Content="Exit" HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Margin="5,0,0,0" Click="btnExit_Click" />
        </StackPanel>
    </Grid>
</Window>