WPF中RadioButton自定义失效？如何实现指定样式、24x24大小及开关状态

为什么你的RadioButton没有变化？ #

WPF的RadioButton自带默认的ControlTemplate，直接设置Background、BorderBrush这类属性会被模板覆盖，必须通过修改ControlTemplate才能真正自定义控件外观。

实现目标样式、24x24尺寸及开关状态的方案 #

你需要为RadioButton创建自定义样式，通过ControlTemplate定义视觉结构，并用触发器处理选中/未选中状态。以下是完整实现代码：

<Window.Resources>
    <Style TargetType="RadioButton" x:Key="CustomRadioButton">
        <!-- 固定24x24尺寸 -->
        <Setter Property="Width" Value="24"/>
        <Setter Property="Height" Value="24"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RadioButton">
                    <Grid>
                        <!-- 未选中状态的外层圆形 -->
                        <Ellipse x:Name="OuterCircle" 
                                 Fill="#9183E5" 
                                 Stroke="#333335" 
                                 StrokeThickness="2"/>
                        <!-- 选中状态显示的内层小圆 -->
                        <Ellipse x:Name="InnerCircle" 
                                 Fill="#333335" 
                                 Visibility="Collapsed"
                                 Margin="6"/> <!-- 调整Margin可改变内层圆大小 -->
                    </Grid>
                    <ControlTemplate.Triggers>
                        <!-- 选中时显示内层圆 -->
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="InnerCircle" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <!-- 可选：添加鼠标悬停效果 -->
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="OuterCircle" Property="Fill" Value="#A597F0"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<!-- 使用自定义样式的RadioButton -->
<RadioButton x:Name="CS" 
             Style="{StaticResource CustomRadioButton}"
             Checked="CS_Checked" 
             Unchecked="CS_Unchecked"/>

代码说明 #

• 尺寸控制：通过Style中的Width和Height设置器固定控件为24x24，确保尺寸统一。
• 外观定制：用两个Ellipse控件构建双层圆形结构，外层作为背景边框，内层作为选中状态的标识，可通过修改Fill、Stroke属性匹配目标样式。
• 开关状态：利用IsChecked触发器控制内层圆的可见性，实现选中/未选中的视觉切换。
• 事件保留：原有的Checked和Unchecked事件处理逻辑可以直接沿用。

如果目标样式有其他细节（如不同的颜色渐变、边框样式），可调整Ellipse的对应属性进行适配。

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