Change the background color of a toggle button when the toggle button is checked

Question

I want to change the background color of a toggle button when the toggle button is checked and vice versa.

How can I achieve that?

Answer 1

  if ((sender as ToggleButton).IsChecked ?? false)
          {                 
              btnArchive.Background = (SolidColorBrush)(new
                  BrushConverter().ConvertFrom("#b8860b")); 
        }

Answer 2

<ToggleButton Content="toggle">
    <ToggleButton.Style>
        <Style TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" 
                                Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center"                  
                                              VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter> 
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Background" Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Style>
</ToggleButton>

Nearly the same as Klaus ones, but using "TemplateBinding" instead of "TargetName". With the TemplateBinding, the ControlTemplate use the BorderBrush and Background from the ToggleButtons DefaultStyle. So the Trigger can set the ToggleButtons Background and with the Border this one will also be shown.

Answer 3

Do you have Expression Blend? It can be done easily by right-clicking on the ToggleButton and Select "Edit Template" then "Edit a copy...". From the template go to the "States" Tab and select the "Checked" state. Reset the background color, differing from the base state and your done.

See sample:

<Window.Resources>
    <Style x:Key="ButtonFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#F3F3F3" Offset="0"/>
        <GradientStop Color="#EBEBEB" Offset="0.5"/>
        <GradientStop Color="#DDDDDD" Offset="0.5"/>
        <GradientStop Color="#CDCDCD" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
    <Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding Button.IsDefaulted}" SnapsToDevicePixels="true" Background="White">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates" ei:ExtendedVisualStateManager.UseFluidLayout="True">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.5"/>
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Chrome">
                                            <EasingColorKeyFrame KeyTime="0" Value="Red"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked"/>
                                <VisualState x:Name="Indeterminate"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <VisualStateManager.CustomVisualStateManager>
                            <ei:ExtendedVisualStateManager/>
                        </VisualStateManager.CustomVisualStateManager>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Microsoft_Windows_Themes:ButtonChrome>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <ToggleButton Content="ToggleButton" HorizontalAlignment="Left" Height="36" Margin="116,131,0,0" VerticalAlignment="Top" Width="122" Background="White" Style="{DynamicResource ToggleButtonStyle}"/>
</Grid>

Answer 4

An alternative approach is to handle the the Checked and Unchecked events in XAML like this:

<ToggleButton Checked="HandleChecked" Unchecked="HandleUnchecked" ... />

and in the code-behind:

    private void HandleChecked(object sender, RoutedEventArgs e)
    {
        ToggleButton toggle = sender as ToggleButton;
        toggle.Background = new SolidColorBrush(Colors.Orange);
    }

    private void HandleUnchecked(object sender, RoutedEventArgs e)
    {
        ToggleButton toggle = sender as ToggleButton;
        toggle.Background = new SolidColorBrush(Colors.Transparent);
    }

Answer 5

The best simple way to acheive this (and without any Blend and overriding 50 lines of XAML ;) is this way, i.e. using triggers :

<Window x:Class="StackOverflow.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
    <ToggleButton x:Name="tg" Height="20" Width="80">
        <ToggleButton.Style>
            <Style TargetType="{x:Type ToggleButton}">
                <Setter Property="Background" Value="Green"/>
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="true">
                        <Setter Property="Background" Value="Red"/>
                    </Trigger>
                </Style.Triggers>

            </Style>
        </ToggleButton.Style>
    </ToggleButton>
</Grid>

Try this in the first place before going any further and see if it suit your needs

Answer 6

Check this solution:

<Grid>
<Grid.Resources>
  <Style x:Key="ToggleButtonStyle1" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ToggleButton}">
          <Border HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="border" Padding="5,5,5,5" CornerRadius="5,5,5,5" Background="#FFBFACAC" BorderBrush="#FF000000" BorderThickness="1,1,1,1" SnapsToDevicePixels="True">
            <ContentPresenter x:Name="contentPresenter"/>
          </Border>
          <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="true">
              <Setter Property="Background" TargetName="border" Value="#FFC31010"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</Grid.Resources>

<ToggleButton Content="ToggleButton" Margin="25" Width="90" Height="45" Style="{StaticResource ToggleButtonStyle1}"/>

</Grid>