WPF ToggleButton 不想应用样式

Question

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>

Answer 1

There are multiple points to be fixed:

1. TextBox consumes mouse events and thus prevents ToggleButton from responding to them. Moreover, it is just used to show a text. So TextBlock is appropriate.

2. 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.

3. The Background when IsChecked is true is given by default ControlTemplate of ToggleButton . To override it, set a plain ControlTemplate in Template 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>