如何删除自定义按钮上的细边框？

Posted 2023-02-22

【中文标题】如何删除自定义按钮上的细边框？

【英文标题】：How can I remove a thin border line on my custom button?

【发布时间】：2017-09-19 01:01:52

【问题描述】：

我使用 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>

【参考方案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>

【讨论】：

还有可能其他方法，但这是我能找到的第一个解决方案。 WPF 很奇怪，但是你用得越多，你就越习惯它的特性。如果有一句话可以概括我学习它的经验，那就是“WPF，让困难的事情变得简单，让简单的事情变得困难”。