如何在不自定义按钮的情况下调整WPF ToggleButton背景以填满圆形开关

• 仅靠增大背景尺寸无法实现目标效果。默认WPF ToggleButton的背景受控件自身布局边界约束，而且模板里的圆形开关滑块是独立的视觉元素，背景不会自动贴合滑块的圆形区域——单纯调背景大小只会让背景超出按钮边界，没法和滑块的圆形范围匹配。

• 不用完全自定义按钮，通过修改默认模板就能实现需求：

  1. 提取ToggleButton的默认模板，找到背景对应的Border元素，将其CornerRadius设为按钮高度的一半（让背景变成圆形），同时调整它的位置和尺寸，使其和滑块对齐。
  2. 通过触发器控制选中/未选中状态下的背景颜色和滑块位置，达到目标样式。

以下是简化的示例代码：

<ToggleButton x:Name="btn_Rly_1" Content="0" Height="24.4" Width="56.107" 
              Margin="54.78,31.355,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"
              Unchecked="un" Checked="btn_test_Checked">
    <ToggleButton.Style>
        <Style TargetType="ToggleButton" BasedOn="{StaticResource {x:Type ToggleButton}}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <!-- 圆形背景，匹配滑块尺寸 -->
                            <Border x:Name="BgBorder" 
                                    CornerRadius="12.2" <!-- 高度的一半，形成圆形 -->
                                    Background="{TemplateBinding Background}"
                                    Width="24.4" Height="24.4"
                                    HorizontalAlignment="Left"/>
                            <!-- 白色滑块 -->
                            <Ellipse x:Name="SliderEllipse" 
                                     Fill="White" Width="20" Height="20"
                                     Margin="2.2,2.2,31.907,2.2"/>
                            <!-- 右侧显示状态文本 -->
                            <ContentPresenter HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,8,0"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="BgBorder" Property="Background" Value="#56d78d"/>
                                <Setter TargetName="BgBorder" Property="HorizontalAlignment" Value="Right"/>
                                <Setter TargetName="SliderEllipse" Property="Margin" Value="31.907,2.2,2.2,2.2"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="#d7568d"/>
        </Style>
    </ToggleButton.Style>
</ToggleButton>

这段代码修改了默认模板的布局：未选中时圆形背景在左侧，滑块在背景内；选中时背景切换到右侧，滑块也随之移动，同时背景色改为绿色（可根据需求调整），视觉上就实现了背景填满圆形开关的效果。

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