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 wo

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>