WPF实现Android风格ToggleButton：消除边框与背景间隙方案问询

问题场景 #

以下是实现Android风格ToggleButton的WPF样式代码，当控件IsChecked属性为True时，背景色会切换，但外层outborder和内层backgrd之间存在细微间隙，需要消除该间隙：

<Style x:Key="AndroidToggleBtnStyle" TargetType="ToggleButton">
    <Setter Property="Height" Value="30" />
    <Setter Property="Width" Value="120" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border x:Name="outborder"
                        Padding="0"
                        BorderBrush="{StaticResource BorderColorBrush}"
                        BorderThickness="2"
                        CornerRadius="10">
                    <Border x:Name="backgrd"
                            Padding="0"
                            Background="Transparent"
                            CornerRadius="10">
                        <Border x:Name="inercircle"
                                Width="20"
                                Height="20"
                                Margin="5,0,5,0"
                                HorizontalAlignment="Left"
                                Background="{StaticResource BorderColorBrush}"
                                CornerRadius="100">
                            <ContentPresenter />
                        </Border>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="outborder" Property="BorderBrush" Value="{StaticResource BackColorBlueBrush}" />
                        <Setter TargetName="backgrd" Property="Background" Value="{StaticResource BackColorBlueBrush}" />
                        <Setter TargetName="inercircle" Property="HorizontalAlignment" Value="Right" />
                        <Setter TargetName="inercircle" Property="Background" Value="{StaticResource BackColorWhiteBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

间隙原因 #

外层outborder设置了BorderThickness="2"，边框会占据控件的空间，而内层backgrd默认没有偏移，导致它和外层边框之间出现细微空隙。

解决方法 #

给内层backgrd添加Margin="-2"，让它的边缘贴合外层边框的内侧，填满边框区域，从而消除间隙。修改后的代码如下（重点标注修改部分）：

<Style x:Key="AndroidToggleBtnStyle" TargetType="ToggleButton">
    <Setter Property="Height" Value="30" />
    <Setter Property="Width" Value="120" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border x:Name="outborder"
                        Padding="0"
                        BorderBrush="{StaticResource BorderColorBrush}"
                        BorderThickness="2"
                        CornerRadius="10">
                    <!-- 添加Margin="-2"消除间隙 -->
                    <Border x:Name="backgrd"
                            Margin="-2"
                            Padding="0"
                            Background="Transparent"
                            CornerRadius="10">
                        <Border x:Name="inercircle"
                                Width="20"
                                Height="20"
                                Margin="5,0,5,0"
                                HorizontalAlignment="Left"
                                Background="{StaticResource BorderColorBrush}"
                                CornerRadius="100">
                            <ContentPresenter />
                        </Border>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="outborder" Property="BorderBrush" Value="{StaticResource BackColorBlueBrush}" />
                        <Setter TargetName="backgrd" Property="Background" Value="{StaticResource BackColorBlueBrush}" />
                        <Setter TargetName="inercircle" Property="HorizontalAlignment" Value="Right" />
                        <Setter TargetName="inercircle" Property="Background" Value="{StaticResource BackColorWhiteBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

你也可以根据外层BorderThickness的数值调整Margin的大小，确保内层Border完全覆盖外层Border的内部区域，彻底消除间隙。

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