选中时更改切换按钮的背景颜色

Question

我正在尝试区分单击时切换按钮的状态。我有下面的sn-p

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

但是，当样式中的 IsChecked 值设置为“True”时，这不起作用。当设置为 false 时，它​​可以工作。

我想知道为什么。任何答案！

Answer 1

运行您的代码示例时，样式似乎与ToggleButton 的“chrome”（即按钮的原始样式）冲突。

在这种情况下，覆盖ToggleButton 的模板以按照您希望的方式运行可能会更好。一个丑陋的例子可以在下面找到：

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