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

tk.hfes

我使用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>
布拉德利·乌夫纳

这似乎是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>

这似乎已经为我完全解决了。

在此处输入图片说明


我只是注意到这掩盖了内角半径。我有点喜欢这种效果,但是,如果这对您的项目来说是个问题,则可以使用aGrid覆盖边框,以便将四舍五入的边框放在顶部。确保四舍五入Border具有透明效果Background您还需要Margin将背景上的设置Border为与相同的值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>

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章