如何为WPF RadioButton及其内容添加整体外边框？

默认的RadioButton控件模板中，BorderBrush和BorderThickness属性仅作用于单选按钮的圆形选择框部分，无法覆盖包含文字内容的整个区域。要实现给单选按钮及其内容整体加边框的效果，需要重写RadioButton的ControlTemplate，将整个控件（包括内容）包裹在一个Border容器中。

示例实现代码 #

<Style x:Key="RadioButtonWithBorderStyle" TargetType="RadioButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <!-- 外层Border实现整体边框 -->
                <Border 
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}"
                    Padding="4">
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                        <!-- 原始的单选按钮圆形控件 -->
                        <BulletDecorator Margin="0 0 4 0">
                            <BulletDecorator.Bullet>
                                <Ellipse 
                                    Width="10" Height="10"
                                    Stroke="{TemplateBinding BorderBrush}"
                                    StrokeThickness="1">
                                    <Ellipse.Fill>
                                        <SolidColorBrush Color="Transparent" />
                                    </Ellipse.Fill>
                                    <Ellipse.OpacityMask>
                                        <VisualBrush>
                                            <VisualBrush.Visual>
                                                <Ellipse 
                                                    Width="8" Height="8"
                                                    Fill="Black" />
                                            </VisualBrush.Visual>
                                        </VisualBrush>
                                    </Ellipse.OpacityMask>
                                </Ellipse>
                            </BulletDecorator.Bullet>
                            <!-- 选中状态的填充 -->
                            <Grid x:Name="CheckedVisual" Visibility="Collapsed">
                                <Ellipse Width="6" Height="6" Fill="{TemplateBinding BorderBrush}" />
                            </Grid>
                        </BulletDecorator>
                        <!-- 单选按钮的内容区域 -->
                        <ContentPresenter 
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            Content="{TemplateBinding Content}" />
                    </StackPanel>
                </Border>
                <!-- 触发器控制选中状态显示 -->
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="CheckedVisual" Property="Visibility" Value="Visible" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" Value="0.5" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

使用方式 #

<RadioButton 
    Content="Radio1"
    Style="{StaticResource RadioButtonWithBorderStyle}"
    BorderBrush="AliceBlue"
    BorderThickness="1"
    Margin="5"/>

说明 #

• 外层的Border控件负责渲染整个单选按钮区域的边框，通过TemplateBinding绑定RadioButton的BorderBrush和BorderThickness属性，方便统一设置样式。
• 内部保留了原始单选按钮的圆形选择框逻辑，并通过触发器控制选中状态的显示。
• StackPanel用于横向排列圆形选择框和内容文本，保证布局一致性。

内容的提问来源于stack exchange，提问作者Daniel Müller