IamNewbie IamNewbie - 25 days ago 7
C# Question

Background does not change of button C# WPF

I am trying to change style on mouseover.

My Code is:

<Button Name="register" Content="Register" Margin="15,410,20,0" Padding="6" FontSize="18" VerticalAlignment="Top" Background="#FF0090D6" BorderBrush="#FF0090D6" Foreground="White">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>


But the Background is the same default thing. But when i change property to
BorderThickness
then it works.

What am i doing wrong?

Answer

In the default template of button, there is trigger in ControlTemplate which set Background of button to #FFBEE6FD and since control template triggers have higher precedence compared to Style triggers that's why your trigger never works.

For that to achieve you have to override default template of button and remove that trigger from it so that your style trigger gets applied.

Here is the default template with that specific trigger commented out. In case you want to override BorderBrush as well, get rid of it as well from the template.

<ControlTemplate x:Key="DefaultTemplateOfButton" TargetType="ButtonBase">
    <Border BorderThickness="{TemplateBinding Border.BorderThickness}"
                BorderBrush="{TemplateBinding Border.BorderBrush}"
                Background="{TemplateBinding Panel.Background}"
                Name="border"
                SnapsToDevicePixels="True">
        <ContentPresenter RecognizesAccessKey="True"
                                Content="{TemplateBinding ContentControl.Content}"
                                ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
                                ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
                                Name="contentPresenter"
                                Margin="{TemplateBinding Control.Padding}"
                                HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
                                SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
                                Focusable="False" />
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="Button.IsDefaulted" Value="True">
            <Setter Property="Border.BorderBrush" TargetName="border">
                <Setter.Value>
                    <DynamicResource ResourceKey="{x:Static SystemColors.HighlightBrushKey}" />
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="UIElement.IsMouseOver" Value="True">
            <!--<Setter Property="Panel.Background" TargetName="border">
                <Setter.Value>
                    <SolidColorBrush>#FFBEE6FD</SolidColorBrush>
                </Setter.Value>
            </Setter>-->
            <Setter Property="Border.BorderBrush" TargetName="border">
                <Setter.Value>
                    <SolidColorBrush>#FF3C7FB1</SolidColorBrush>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="ButtonBase.IsPressed" Value="True">
            <Setter Property="Panel.Background" TargetName="border">
                <Setter.Value>
                    <SolidColorBrush>#FFC4E5F6</SolidColorBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Border.BorderBrush" TargetName="border">
                <Setter.Value>
                    <SolidColorBrush>#FF2C628B</SolidColorBrush>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="ToggleButton.IsChecked" Value="True">
            <Setter Property="Panel.Background" TargetName="border">
                <Setter.Value>
                    <SolidColorBrush>#FFBCDDEE</SolidColorBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Border.BorderBrush" TargetName="border">
                <Setter.Value>
                    <SolidColorBrush>#FF245A83</SolidColorBrush>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="UIElement.IsEnabled" Value="False">
            <Setter Property="Panel.Background" TargetName="border">
                <Setter.Value>
                    <SolidColorBrush>#FFF4F4F4</SolidColorBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Border.BorderBrush" TargetName="border">
                <Setter.Value>
                    <SolidColorBrush>#FFADB2B5</SolidColorBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="TextElement.Foreground" TargetName="contentPresenter">
                <Setter.Value>
                    <SolidColorBrush>#FF838383</SolidColorBrush>
                </Setter.Value>
            </Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

How to set the control template to button?

Define the template somewhere under resource section of parent panel or UserControl and can be applied via StaticResource:

<Grid>
   <Grid.Resources>
      <ControlTemplate x:Key="MyTemplate"
                       TargetType="ButtonBase">
       .......
   </Grid.Resources>
   <Button Name="register" Template="{StaticResource MyTemplate}"...>
</Grid>