WPF Styling: BasedOn template but change 2 difference background colours - wpf

Question

I have got a button with a ControlTemplate, this ControlTemplate has 2 different Control's with different background colours. I want to be able to change these colours using a new style which is BasedOn this main style.
Read the code and it should make more sense. For some reason though the new Style.Resources are not changing the background colours, they are still using the two defined in the main style.
How can I fix this?
Style BasedOn="{StaticResource ButtonIcoSmall}" TargetType="Button" x:Key="greenSmallButton">
<Style.Resources>
<SolidColorBrush Color="#FF8AB71C" x:Key="colour1" />
<SolidColorBrush Color="#FF72A000" x:Key="colour2" />
</Style.Resources>
</Style>
<Style BasedOn="{StaticResource ButtonIcoSmall}" TargetType="Button" x:Key="greySmallButton">
<Style.Resources>
<SolidColorBrush Color="#FF434953" x:Key="colour1" />
<SolidColorBrush Color="#FF22252b" x:Key="colour2" />
</Style.Resources>
</Style>
<Style x:Key="ButtonIcoSmall" TargetType="Button">
<Style.Resources>
<SolidColorBrush Color="#FF434953" x:Key="colour1" />
<SolidColorBrush Color="#FF22252b" x:Key="colour2" />
</Style.Resources>
<Setter Property="FontFamily" Value="{StaticResource FontAwesome}" />
<Setter Property="FontSize" Value="16" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Padding" Value="8" />
<Setter Property="Margin" Value="6" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<WrapPanel>
<Border Grid.Column="0"
CornerRadius="5 0 0 5"
BorderThickness="0"
Background="{StaticResource colour1}"
Name="buttonIcon">
<WrapPanel>
<ContentPresenter Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="{TemplateBinding Margin}" />
</WrapPanel>
</Border>
<Border Grid.Column="0"
CornerRadius="0 5 5 0"
BorderThickness="0"
Background="{StaticResource colour2}"
Name="buttonText" >
<TextBlock Text="{TemplateBinding Tag}"
FontSize="13"
Foreground="White"
Padding="{TemplateBinding Padding}" />
</Border>
</WrapPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{Binding ElementName=buttonIcon}" TargetName="buttonText" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!--<Setter Property="Background" Value="#757b8d" />
<Setter Property="Foreground" Value="White" />-->
</Trigger>
</Style.Triggers>
</Style>

Answer 1

Two things:
You should move you main style above the derived styles. If you use BasedOn before the style that its basing itself on, it will not find it.
For the colors that you are changing, use a DynamicResource instead. This allows the two colors to be re-defined instead of using the defaults.
I got it working using the following code:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Name="TestWindow">
<Window.Resources>
<Style x:Key="ButtonIcoSmall" TargetType="Button">
<Style.Resources>
<SolidColorBrush Color="#FF434953" x:Key="colour1" />
<SolidColorBrush Color="#FF22252b" x:Key="colour2" />
</Style.Resources>
<Setter Property="FontFamily" Value="{StaticResource FontAwesome}" />
<Setter Property="FontSize" Value="16" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Padding" Value="8" />
<Setter Property="Margin" Value="6" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<WrapPanel>
<Border Grid.Column="0"
CornerRadius="5 0 0 5"
BorderThickness="0"
Background="{DynamicResource colour1}"
Name="buttonIcon">
<WrapPanel>
<ContentPresenter Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="{TemplateBinding Margin}" />
</WrapPanel>
</Border>
<Border Grid.Column="0"
CornerRadius="0 5 5 0"
BorderThickness="0"
Background="{DynamicResource colour2}"
Name="buttonText" >
<TextBlock Text="{TemplateBinding Tag}"
FontSize="13"
Foreground="White"
Padding="{TemplateBinding Padding}" />
</Border>
</WrapPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{Binding ElementName=buttonIcon}" TargetName="buttonText" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!--<Setter Property="Background" Value="#757b8d" />
<Setter Property="Foreground" Value="White" />-->
</Trigger>
</Style.Triggers>
</Style>
<Style BasedOn="{StaticResource ButtonIcoSmall}" TargetType="Button" x:Key="greenSmallButton">
<Style.Resources>
<SolidColorBrush Color="#FF8AB71C" x:Key="colour1" />
<SolidColorBrush Color="#FF72A000" x:Key="colour2" />
</Style.Resources>
</Style>
<Style BasedOn="{StaticResource ButtonIcoSmall}" TargetType="Button" x:Key="greySmallButton">
<Style.Resources>
<SolidColorBrush Color="#FF434953" x:Key="colour1" />
<SolidColorBrush Color="#FF22252b" x:Key="colour2" />
</Style.Resources>
</Style>
</Window.Resources>
<Button Style="{StaticResource greenSmallButton}"/>
</Window>