title: How to style colour of WPF 3-state button
body: <p>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:</p>
  <pre><code>&lt;Style x:Key=&quot;StatusBarBtn&quot; TargetType=&quot;ToggleButton&quot;&gt;
      &lt;!-- The next line is just to make sure the background is
           visible. The issue is the same if I delete it. --&gt;
      &lt;Setter Property=&quot;Background&quot; Value=&quot;Violet&quot;/&gt;
      &lt;Style.Triggers&gt;
          &lt;Trigger Property=&quot;IsChecked&quot; Value=&quot;True&quot;&gt;
              &lt;Setter Property=&quot;Content&quot;&gt;
                  &lt;Setter.Value&gt;
                      &lt;Setter Property=&quot;Background&quot; Value=&quot;Green&quot;/&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
          &lt;/Trigger&gt;
          &lt;Trigger Property=&quot;IsChecked&quot; Value=&quot;False&quot;&gt;
              &lt;Setter Property=&quot;Content&quot;&gt;
                  &lt;Setter.Value&gt;
                      &lt;Setter Property=&quot;Background&quot; Value=&quot;Pink&quot;/&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
          &lt;/Trigger&gt;
          &lt;Trigger Property=&quot;IsChecked&quot; Value=&quot;{x:Null}&quot;&gt;
              &lt;Setter Property=&quot;Content&quot;&gt;
                  &lt;Setter.Value&gt;
                      &lt;Setter Property=&quot;Background&quot; Value=&quot;Yellow&quot;/&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
          &lt;/Trigger&gt;
      &lt;/Style.Triggers&gt;
  &lt;/Style&gt;
  </code></pre>
  <p>And the button is:</p>
  <pre><code>&lt;ToggleButton x:Name=&quot;PatternExtensionButton&quot; Style=&quot;{StaticResource StatusBarBtn}&quot; IsThreeState=&quot;True&quot;&gt;
  &lt;Image Margin=&quot;1&quot; Source=&quot;ResourceFiles/Icons/Pattern.png&quot; Height=&quot;15&quot; ToolTip=&quot;Pattern extensions&quot;/&gt;
  &lt;/ToggleButton&gt;
  </code></pre>
  <p>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.</p>
  <p>So how <em>do</em> I set the background colour based on the check state?</p>
  <p>Edit: simplifying the styling, as suggested by the.Doc, gets me part way there. If I do:</p>
  <pre><code>&lt;Style.Triggers&gt;
      &lt;Trigger Property=&quot;IsChecked&quot; Value=&quot;True&quot;&gt;
          &lt;Setter Property=&quot;Background&quot; Value=&quot;Green&quot;/&gt;
      &lt;/Trigger&gt;
      &lt;Trigger Property=&quot;IsChecked&quot; Value=&quot;False&quot;&gt;
          &lt;Setter Property=&quot;Background&quot; Value=&quot;Pink&quot;/&gt;
      &lt;/Trigger&gt;
      &lt;Trigger Property=&quot;IsChecked&quot; Value=&quot;{x:Null}&quot;&gt;
          &lt;Setter Property=&quot;Background&quot; Value=&quot;Yellow&quot;/&gt;
      &lt;/Trigger&gt;
  &lt;/Style.Triggers&gt;
  </code></pre>
  <p>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.</p>