My ToggleButton become "green" when "PauseUpdate" is false but otherwise it stay blue (like when the focus is on) althought I put the focus elsewhere. It never becomes red.
Also, my text is always "Pause", never "Paused". Why?
<StackPanel HorizontalAlignment="Right">
<ToggleButton HorizontalAlignment="Right" VerticalAlignment="Top" Margin="7" Padding="7" IsChecked="{Binding PauseUpdate}">
<TextBox Text="Pause" IsReadOnly="True" Background="Transparent" BorderThickness="0">
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<DataTrigger Binding="{Binding PauseUpdate}" Value="true">
<Setter Property="Text" Value="Paused" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
<ToggleButton.Background>
<SolidColorBrush Color="Green" Opacity=".2"></SolidColorBrush>
</ToggleButton.Background>
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Style.Triggers>
<DataTrigger Binding="{Binding PauseUpdate}" Value="true">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="Red" Opacity=".2"></SolidColorBrush>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding PauseUpdate}" Value="false">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="Green" Opacity=".2"></SolidColorBrush>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
<TextBox Width="60"></TextBox>
</StackPanel>
CodePudding user response:
There are multiple points to be fixed:
TextBox
consumes mouse events and thus preventsToggleButton
from responding to them. Moreover, it is just used to show a text. SoTextBlock
is appropriate.A local value prevails over the value set in Style and thus prevents Style.Triggers from changing actual value. So remove the local value and set the value in Style.
The
Background
whenIsChecked
is true is given by default ControlTemplate ofToggleButton
. To override it, set a plain ControlTemplate inTemplate
of Style.
Then, the modified ToggleButton
would be as follows:
<ToggleButton HorizontalAlignment="Right" VerticalAlignment="Top" Margin="7" Padding="7"
IsChecked="{Binding PauseUpdate}">
<TextBlock>
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Text" Value="Pause"/>
<Style.Triggers>
<DataTrigger Binding="{Binding PauseUpdate}" Value="true">
<Setter Property="Text" Value="Paused" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border x:Name="border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<ContentPresenter x:Name="contentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Focusable="False" RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding PauseUpdate}" Value="true">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="Red" Opacity=".2"/>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding PauseUpdate}" Value="false">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="Green" Opacity=".2"/>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>