Changing Style of button in `ResourceDirectory` on `IsMouseOver`

Question

I have a button style hooked to a ResourceDirectory like so

<Button x:Name="btnPO_Manager" Height="23" Content="PO Manager" Click="Menu_Button" Style="{StaticResource button_Menu}" />

And here is my ResourceDirectory Style

<Color x:Key="color_BaseFont">Black</Color>
<Color x:Key="color_MajorFont">#d8b243</Color>
<Color x:Key="color_MinorFont">#a01e21</Color>
<Color x:Key="color_MajorBackground">Black</Color>
<Color x:Key="color_MinorBackground">#FF272727</Color>


<SolidColorBrush x:Key="brush_BaseFont" Color="{StaticResource color_BaseFont}"/>
<SolidColorBrush x:Key="brush_MajorFont" Color="{StaticResource color_MajorFont}"/>
<SolidColorBrush x:Key="brush_MinorFont" Color="{StaticResource color_MinorFont}"/>
<SolidColorBrush x:Key="brush_MajorBackground" Color="{StaticResource color_MajorBackground}"/>
<SolidColorBrush x:Key="brush_MinorBackground" Color="{StaticResource color_MinorBackground}"/>


<Style BasedOn="{StaticResource {x:Type Button}}"
       TargetType="Button"
       x:Key="button_Menu">
   <Setter Property="FontSize" Value="10"/>
   <Setter Property="Foreground" Value="{StaticResource brush_MajorFont}"/>
   <Setter Property="Background" Value="{StaticResource brush_MinorBackground}"/>

   <Style.Triggers>
      <Trigger Property="IsMouseOver" Value="True">
         <Setter Property="Foreground" Value="{StaticResource brush_MinorFont}"/>
         <Setter Property="Background" Value="{StaticResource brush_MajorBackground}"/>
      </Trigger>
   </Style.Triggers>

</Style>

This all works great except the triggers background property. the foreground changes on mouse over but the background stays the default blue/gray color.

I tried moving my default colors to the IsMouseOver = False but ended with the same results. Everything working except the mouseover background.

<Style.Triggers>
   <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Foreground" Value="{StaticResource brush_MinorFont}"/>
      <Setter Property="Background" Value="{StaticResource brush_MajorBackground}"/>
   </Trigger>
   <Trigger Property="IsMouseOver" Value="False">
      <Setter Property="Foreground" Value="{StaticResource brush_MajorFont}"/>
      <Setter Property="Background" Value="{StaticResource brush_MinorBackground}"/>
   </Trigger>
</Style.Triggers>

Why does this do this and how can I fix it? Any help would be appreciated.

If you looked at the template for a wpf button ( or googled your question ) you'd see there's more to a button than you're assuming. The border background is hard coded. And there's a mouse over effect changes a rectangle fill to give the light blue mouse over. https://stackoverflow.com/questions/35024405/need-help-overriding-a-wpf-button-style-background-color/35024544 — Andy, Oct 28 '20 at 20:17
See question about `DataGridCell`, I hope the answer will help to understand your issue: [Selection does hide the DataGridCell](https://stackoverflow.com/questions/59682395/selection-does-hide-the-datagridcell/59683601#59683601) — Rekshino, Oct 29 '20 at 09:10

score 1 · Accepted Answer · answered Oct 29 '20 at 08:22

Your button style does not show the correct background color, because it is not bound to the Background property of the parent button in the control template's Mouse Over state, it uses a statically referenced color.

In order to change this, you have to change the control template. Please note that control templates are complex. They require specific parts and states to work properly, you can find them in the documentation.

The easiest way is to extract the default control template using Blend or Visual Studio and adapt it to your needs. Below is the default template adapted with your custom colors.

<Style x:Key="button_Menu_FocusVisual">
   <Setter Property="Control.Template">
      <Setter.Value>
         <ControlTemplate>
            <Rectangle Margin="2" StrokeDashArray="1 2" SnapsToDevicePixels="true" StrokeThickness="1" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="button_Menu" TargetType="{x:Type Button}">
   <Setter Property="FocusVisualStyle" Value="{StaticResource button_Menu_FocusVisual}"/>
   <Setter Property="Background" Value="{StaticResource brush_MinorBackground}"/>
   <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
   <Setter Property="Foreground" Value="{StaticResource brush_MajorFont}"/>
   <Setter Property="BorderThickness" Value="1"/>
   <Setter Property="HorizontalContentAlignment" Value="Center"/>
   <Setter Property="VerticalContentAlignment" Value="Center"/>
   <Setter Property="Padding" Value="1"/>
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type Button}">
            <Border x:Name="border" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="true">
               <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>
            <ControlTemplate.Triggers>
               <Trigger Property="IsDefaulted" Value="true">
                  <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
               </Trigger>
               <Trigger Property="IsMouseOver" Value="true">
                  <Setter Property="Background" TargetName="border" Value="{StaticResource brush_MajorBackground}"/>
                  <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                  <Setter Property="TextElement.Foreground" TargetName="border" Value="{StaticResource brush_MinorFont}"/>
               </Trigger>
               <Trigger Property="IsPressed" Value="true">
                  <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                  <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
               </Trigger>
               <Trigger Property="IsEnabled" Value="false">
                  <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                  <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                  <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
               </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

You can change the other default brushes, too, or replace them with your own colors.

Changing Style of button in `ResourceDirectory` on `IsMouseOver`

1 Answers1