WPF ToggleButton IsChecked Trigger

Question

This is driving me batty. I have a simple WPF toggle button, with two triggers for IsChecked. One for the value being true, and the other for the value being false. It works fine when the button is not checked, my style for false is applied; however, the system never applies the style for when IsChecked is true. It always just uses the default blue chrome windows style. Any ideas?

<ToggleButton Content="Control 1" Width="200" Margin="0,0,0,10" Focusable="False">
    <ToggleButton.Resources>
        <Style TargetType="{x:Type ToggleButton}">
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FFF3F3F3" Offset="1"/>
                                <GradientStop Color="LawnGreen" Offset="0.307"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsChecked" Value="False">
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FFF3F3F3" Offset="1"/>
                                <GradientStop Color="Red" Offset="0.307"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Resources>
</ToggleButton>

Any help would be greatly appreciated. I'm sure it's something obvious that I'm just overlooking.

Scarlettscarp

I tried adding your code to an empty Grid and it works fine. Do you have global Style resources that may be affecting your control? or to which container are you adding this button? – Welloff

I sure don't. It was a brand new .dll to house my User Controls, and I had not yet created any resources. That's what was so strange about it. The recommendation below did work, but I would sure like to know why my version didn't. – Scarlettscarp

Answer 1

The layout when the ToggleButton.IsChecked toggles seems to be part of the template. If you override the template, you should be able to set the values correctly. See Override ToggleButton Style

Example:

<ToggleButton Content="Control 1" Focusable="False">
   <ToggleButton.Template>
      <ControlTemplate TargetType="{x:Type ToggleButton}">
         <Border CornerRadius="3" Background="{TemplateBinding Background}">
            <ContentPresenter Margin="3" 
               HorizontalAlignment="Center" 
               VerticalAlignment="Center"/>
         </Border>
         <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="True">
               <Setter Property="Background">
                  <Setter.Value>
                     <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Color="#FFF3F3F3" Offset="1"/>
                        <GradientStop Color="LawnGreen" Offset="0.307"/>
                     </LinearGradientBrush>
                  </Setter.Value>
               </Setter>
            </Trigger>
            <Trigger Property="IsChecked" Value="False">
               <Setter Property="Background">
                  <Setter.Value>
                     <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Color="#FFF3F3F3" Offset="1"/>
                        <GradientStop Color="Red" Offset="0.307"/>
                     </LinearGradientBrush>
                  </Setter.Value>
               </Setter>
            </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </ToggleButton.Template>
   </ToggleButton>

Bushcraft

Answer 2

I know, my answer bring nothing new, but template suggested by newb seems very simplified to me. So I expose my own version of ControlTemplate. It might be usefull for someone.

<ToggleButton Width="100" Height="100">
    <ToggleButton.Template>
        <ControlTemplate TargetType="{x:Type ToggleButton}">
            <Border BorderBrush="Orange" 
                    BorderThickness="3" 
                    CornerRadius="3" 
                    Margin="1" 
                    Name="Border" 
                    Background="{TemplateBinding Background}">
                <Grid>
                    <Rectangle Name="FocusCue" 
                            Visibility="Hidden" 
                            Stroke="Black"
                            StrokeThickness="1" 
                            StrokeDashArray="1 2"
                            SnapsToDevicePixels="True" ></Rectangle>
                    <ContentPresenter  Margin="3" 
                                    HorizontalAlignment="Center" 
                                    VerticalAlignment="Center"/>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="Border" Property="Background" Value="IndianRed" />
                    <Setter TargetName="Border" Property="BorderBrush" Value="DarkKhaki" />
                </Trigger>
                <Trigger Property="IsChecked" Value="False">
                    <Setter TargetName="Border" Property="Background" Value="Red" />
                    <Setter TargetName="Border" Property="BorderBrush" Value="Orange" />
                </Trigger>
                <Trigger Property="IsKeyboardFocused" Value="True">
                    <Setter TargetName="FocusCue" Property="Visibility" Value="Visible" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Border" Property="Background" Value="DarkRed" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>

Trope