changing background color of togglebutton when checked

Question

I am trying the distinguish the state of the toggle button when clicked. I have the snippet below

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="OnOffToggleImageStyle" TargetType="ToggleButton">
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Background" Value="DimGray"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <ToggleButton Height="60" Content="Text" Style="{StaticResource OnOffToggleImageStyle}">
        </ToggleButton>
    </Grid>
</Window>

However this does not work when IsChecked value is set to "True" in the style. When set to false it works.

I wonder why. Any answers!

score 5 · Accepted Answer · edited Oct 06 '12 at 11:49

When running your code sample, it appears the style is conflicting with the 'chrome' of the ToggleButton (i.e. the original style of the button).

It would probably be better in this situation to override the template of the ToggleButton to behave in the manner you desire. An ugly example can be found below:

<Style x:Key="myToggleButton" TargetType="{x:Type ToggleButton}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <Border x:Name="outer"
        BorderBrush="White"
        BorderThickness="2"
        Opacity=".9"
        Background="Transparent">
          <Border x:Name="inner"
          Margin="8"
          BorderThickness="0"
          Background="{
            Binding Background, 
            RelativeSource={RelativeSource TemplatedParent}}">
            <Grid x:Name="container">
              <Grid.RowDefinitions>
                <RowDefinition Height="2*"/>
                <RowDefinition/>
              </Grid.RowDefinitions>
              <TextBlock x:Name="display"
              Grid.Row="1"
              Text="{Binding Content, RelativeSource={
                RelativeSource TemplatedParent}}"
              Foreground="White"
              FontSize="11"
              FontFamily="Segoe UI"
              FontStyle="Normal"
              FontWeight="Normal"
              Margin="8,0,0,4"
              HorizontalAlignment="Left"
              VerticalAlignment="Bottom"/>
            </Grid>
          </Border>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="ToggleButton.IsChecked" Value="True">
            <Setter TargetName="outer" Property="Background" Value="LightBlue"/>
            <Setter TargetName="outer" Property="BorderBrush" Value="Transparent"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

lbbster,can you advise where to find the code of original togglebutton's style? Thanks in advance — Nerielle, Nov 26 '12 at 12:36
@nerielle Late answer but if somebody search that : https://msdn.microsoft.com/fr-fr/library/cc296245%28v=vs.95%29.aspx — eka808, Mar 21 '15 at 07:41
Thanks this really helped. Now my question is, are there docs somewhere that show how the "chrome" looks like for each of these basic elements (ToggleButton, Button, etc.)? — EdwardM, Oct 14 '15 at 21:28

changing background color of togglebutton when checked

1 Answers1

Linked