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