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.

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>

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>