Example of Android style toggle button implementation in WPF

Question

<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>

It is defined and used as a style code. When Ischecked, the background color changes. However, there is a slight gap between the outborder and backgrd. How can we fill in the blanks?

Answer 1

You didn't provide StaticResources for the brushes, so I picked ones, but as I understand your question is, how to avoid white gaps between outborder and backgrd Borders

You can fix it by slightly modifying backgrd Border so it'll cover the white gaps but still won't extend over outborder Border.

<Border x:Name="backgrd"
        Margin="0,-1,0,-1"
        Background="Transparent"
        CornerRadius="8">

On the example, I intentionally changed outborder BorderBrush to Red to show the difference.