Switch background color change during validation

Question

I am trying to distinguish the state of a toggle button when pressed. I have a 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 if the IsChecked parameter is set to "True" in the style. When set to false, it works.

I wonder why. Any answers!

Answer 1

When you run your sample code, it seems that the style is contrary to the "chrome" ToggleButton (i.e. the original button style).

In this situation, it would be better to override the ToggleButton template to behave the way you want. 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>