自定义RadioButton仿ToggleButton样式，触发器颜色不生效问题

自定义RadioButton样式使其外观与ToggleButton一致，功能正常，但样式中的IsChecked、IsMouseOver触发器对应的背景色变化未生效。

原代码如下：

<Style TargetType="RadioButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <ToggleButton Content="{TemplateBinding Content}"
                              IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}}">
                    <ToggleButton.Style>
                        <Style TargetType="ToggleButton">
                            <Setter Property="Background" Value="#FF161717"/>
                            <Setter Property="Foreground" Value="LightGreen"/>
                            <Setter Property="BorderBrush" Value="#FF161717"/>
                            <Style.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter Property="Background" Value="Yellow"/>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="Cyan"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </ToggleButton.Style>
                </ToggleButton>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

问题原因 #

ToggleButton的默认模板自带了针对IsChecked、IsMouseOver等状态的视觉触发器，这些模板内的触发器优先级高于外部Style中的触发器，导致自定义的样式触发器无法覆盖默认效果。

解决方案 #

方案一：直接在RadioButton的ControlTemplate中实现样式逻辑 #

无需嵌套ToggleButton，直接将外观和触发器定义在RadioButton的模板内：

<Style TargetType="RadioButton">
    <Setter Property="Background" Value="#FF161717"/>
    <Setter Property="Foreground" Value="LightGreen"/>
    <Setter Property="BorderBrush" Value="#FF161717"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Background" Value="Yellow"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Cyan"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

方案二：重写ToggleButton的ControlTemplate（保留嵌套结构） #

如果需要保留嵌套ToggleButton的结构，需为ToggleButton定义完整的ControlTemplate，将触发器写在模板内部：

<Style TargetType="RadioButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <ToggleButton Content="{TemplateBinding Content}"
                              IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}}">
                    <ToggleButton.Template>
                        <ControlTemplate TargetType="ToggleButton">
                            <Border x:Name="border"
                                    Background="#FF161717"
                                    BorderBrush="#FF161717"
                                    BorderThickness="{TemplateBinding BorderThickness}">
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                  Foreground="LightGreen"/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter TargetName="border" Property="Background" Value="Yellow"/>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="border" Property="Background" Value="Cyan"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </ToggleButton.Template>
                </ToggleButton>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

内容的提问来源于stack exchange，提问作者Peti