Custom button style is not working? - wpf

Question

I'm trying to style a button, but it ends up not showing when I apply the custom style, only its content (the button's text) is visible. This is how I declare my style:
<Color x:Key="NormalColor" A="255" R="60" G ="158" B="184"/>
<Color x:Key="HoverColor" A="255" R="74" G ="177" B="204"/>
<Color x:Key="PressedColor" A="255" R="26" G ="115" B="138"/>
<SolidColorBrush x:Key="NormalBrush" Color="{StaticResource NormalColor}" />
<SolidColorBrush x:Key="HoverBrush" Color="{StaticResource HoverColor}" />
<SolidColorBrush x:Key="PressedBrush" Color="{StaticResource PressedColor}" />
<Style x:Key="FlatButton" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="Background" Value="{StaticResource NormalBrush}"/>
<Setter Property="Foreground" Value="#000000"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="Content"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource HoverBrush}" />
<Setter Property="Foreground" Value="#000000" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource PressedBrush}" />
<Setter Property="Foreground" Value="#000000" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{StaticResource NormalBrush}" />
<Setter Property="Foreground" Value="#000000" />
<Setter Property="Opacity" Value="0.5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
And here is how I use it:
<Button Content="Connect" Command="model:GlobalCommands.ConnectToDBCommand" Style="{StaticResource FlatButton}"/>
Can anyone tell me where I went wrong with this?
Thank you!

Answer 1

There is nothing in your ControlTemplate that would use Background. Put your ContentPresenter inside Border (for example) and use TemplateBinding to bind its Background
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="Content"/>
</Border>

Answer 2

Adding to #dkozl's answer, you should add TemplateBindings to any properties within the Button.ControlTemplate that you may want to set from outside the Button.ControlTemplate:
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding
BorderThickness}" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
Then you could do this:
<Button Content="Connect" Command="model:GlobalCommands.ConnectToDBCommand"
Style="{StaticResource FlatButton}" BorderBrush="Blue" BordeThickness="5" />