カスタムボタンの細い境界線を削除するにはどうすればよいですか？

Question

BorderThickness = 2のカスタムチェックボックスボタンを作った。 境界線の色を青に変更したいときにチェックします。

問題は国境と私を不愉快にさせるアイコンの間に非常に細い黒い線があります。これを取り除く方法はありますか？

以下は、マイボタンスタイル辞書の部分コードです。

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

Answer 1

WPFがエイリアス防止エッジで境界線をレンダリングしていると思われるレンダリングアーティファクトのようです。

私は、（ほとんど）私のテストコードでそれを取り除くことができました。画面にピクセルをスナップするようにWPFに指示しました。スタイルに<Setter Property="SnapsToDevicePixels" Value="True" />を追加しました。とにかくWindow、私はそれがWPFの外観をきれいにすると思う）。これは見た目が良くなりましたが、角が丸くなっている可能性が高いため、各コーナーに色の小さなピクセルが残りました。

次に、私はこのように、入れ子の国境を試してみました：

<ControlTemplate TargetType="{x:Type CheckBox}"> 
    <Border 
     x:Name="Grid" 
     Background="{TemplateBinding Background}" 
     BorderBrush="{TemplateBinding BorderBrush}" 
     BorderThickness="2" 
     CornerRadius="2"> 
     <Border Background="{TemplateBinding Background}"> 
      <ContentPresenter 
       x:Name="Content" 
       HorizontalAlignment="Center" 
       VerticalAlignment="Center" 
       Content="{TemplateBinding Content}" /> 
     </Border> 
    </Border> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsChecked" Value="True"> 
      <Setter TargetName="Grid" Property="BorderBrush" Value="{StaticResource BrushBlue1}" /> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

を完全に私のためにそれを固定していると思われます。

---

私は、これは内側の角の半径をカバーしていることに気づきました。私はこのような効果を好みますが、プロジェクトにとって問題がある場合は、Gridを使用して境界をオーバーレイすることができます。その結果、丸みを帯びたものが上に描画されます。 Borderには、透明のBackgroundがあることを確認してください。 Borderの背景にMarginを設定してBorderThicknessと同じ値に設定する必要があります。そうしないと、この背景は丸みのあるコーナーのBorderの外側の角を通ってブリードします。

<ControlTemplate TargetType="{x:Type CheckBox}"> 
    <Grid> 
     <Border Margin="2" Background="{TemplateBinding Background}"> 
      <ContentPresenter 
       x:Name="Content" 
       HorizontalAlignment="Center" 
       VerticalAlignment="Center" 
       Content="{TemplateBinding Content}" /> 
     </Border> 
     <Border 
      x:Name="Grid" 
      Background="Transparent" 
      BorderBrush="{TemplateBinding BorderBrush}" 
      BorderThickness="2" 
      CornerRadius="2" /> 
    </Grid> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsChecked" Value="True"> 
      <Setter TargetName="Grid" 
        Property="BorderBrush" 
        Value="{StaticResource BrushBlue1}" /> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate>