How can I remove a thin border line on my custom button?

Viewed 662

I made a custom checkbox button with BorderThickness=2. I want to change the color of border to blue when it is checked.

example button

Problem is there is very thin black line between border and the icon that annoys me. Is there any way that I can remove this?

Below is the partial code of my button style dictionary.

<Style x:Key="ExampleButton" TargetType="{x:Type CheckBox}">
    <Setter Property="Width" Value="40" />
    <Setter Property="Height" Value="40" />
    <Setter Property="Background" Value="{StaticResource BrushDarkGray11}" />
    <Setter Property="BorderBrush" Value="{StaticResource BrushDarkGray11}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <Border x:Name="Grid" Background="{TemplateBinding Background}"
                        CornerRadius="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="2">
                    <ContentPresenter x:Name="Content" Content="{TemplateBinding Content}"
                                      HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="Grid" Property="BorderBrush" Value="{StaticResource BrushBlue1}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
1 Answers
Related