How to style colour of WPF 3-state button

Question

I'm trying to change the background colour of a 3-state button depending on the check state, but it's not responding. What I have is:

<Style x:Key="StatusBarBtn" TargetType="ToggleButton">
    <!-- The next line is just to make sure the background is
         visible. The issue is the same if I delete it. -->
    <Setter Property="Background" Value="Violet"/>
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Content">
                <Setter.Value>
                    <Setter Property="Background" Value="Green"/>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="IsChecked" Value="False">
            <Setter Property="Content">
                <Setter.Value>
                    <Setter Property="Background" Value="Pink"/>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="IsChecked" Value="{x:Null}">
            <Setter Property="Content">
                <Setter.Value>
                    <Setter Property="Background" Value="Yellow"/>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

And the button is:

<ToggleButton x:Name="PatternExtensionButton" Style="{StaticResource StatusBarBtn}" IsThreeState="True">
<Image Margin="1" Source="ResourceFiles/Icons/Pattern.png" Height="15" ToolTip="Pattern extensions"/>
</ToggleButton>

The background is turning violet by default, so I know it's picking up the style, but when the button is checked the background turns a pale blue - I don't know where that's coming from - and when it's unchecked or indeterminate (null) it goes back to the violet. The behaviour is the same if I delete the line setting the background to violet, except the default changes to white of course.

So how do I set the background colour based on the check state?

Edit: simplifying the styling, as suggested by the.Doc, gets me part way there. If I do:

<Style.Triggers>
    <Trigger Property="IsChecked" Value="True">
        <Setter Property="Background" Value="Green"/>
    </Trigger>
    <Trigger Property="IsChecked" Value="False">
        <Setter Property="Background" Value="Pink"/>
    </Trigger>
    <Trigger Property="IsChecked" Value="{x:Null}">
        <Setter Property="Background" Value="Yellow"/>
    </Trigger>
</Style.Triggers>

then the pink and yellow for unchecked and indeterminate work fine, but the green for checked is still not working and coming out a pale blue.

Answer 1

I don't know where that's coming from ...

It's hardcoded in the default template which means that you need to define your own custom template. I am afraid it's not enough to define some triggers without creating a custom template.

Here is an example that is based on the default template:

<Style x:Key="StatusBarBtn" TargetType="ToggleButton">
    <Setter Property="Background" Value="Violet"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <ControlTemplate.Resources>
                    <Style x:Key="FocusVisual">
                        <Setter Property="Control.Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Rectangle Margin="2" StrokeDashArray="1 2" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" SnapsToDevicePixels="true" StrokeThickness="1"/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                    <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
                    <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
                    <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
                    <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"/>
                </ControlTemplate.Resources>
                <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 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="Button.IsDefaulted" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Background" TargetName="border" Value="Green"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="Background" TargetName="border" Value="Pink"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="{x:Null}">
                        <Setter Property="Background" TargetName="border" Value="Yellow"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                    </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 may of course remove or modify the IsMouseOver, IsPressed and IsEnabled triggers according to your requirements.