Question

我更改了一个按钮的ControrTemplate，给它一个带有CornerRadius和BevelBitmpaEffect的边框。看起来不错，只需要很少的努力。把它放在彩色背景上然后问题变得很有意义。

光影来自的角落是一个带有直角的白色片段。可能来自光效，但是有一个cornerRadius非常明显。我不认为我可以做任何事情（除了明显不喜欢使用cornerRadius）？

编辑：

此代码应该为您生成相同的问题

<Style x:Key="TabButtons" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="8"
                        SnapsToDevicePixels="True"
                        Name="BtnBorder"
                        Width="80"
                        Height="35"
                        BorderThickness="1"
                        BorderBrush="DarkBlue">
                    <Border.Background>

                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="LightBlue" Offset="0" />
                            <GradientStop Color="DarkBlue" Offset="1" />
                        </LinearGradientBrush>

                    </Border.Background>
                    <Border.BitmapEffect>
                        <BevelBitmapEffect BevelWidth="5"
                                           EdgeProfile="CurvedOut"
                                           LightAngle="135"
                                           Relief="0.1"
                                           Smoothness="1" />
                    </Border.BitmapEffect>
                    <ContentPresenter Name="BtnContent" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Content" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

在LightBlue背景上使用此按钮，例如

<Border Background="LightBlue" >
    <Button Style={StaticResource TabButtons} >Test</Button>
</Border>

Answer 1

我无法想象问题究竟是什么样子，但这里有一个建议 - 尝试将受影响的按钮或整个窗口的SnapsToDevicePixels设置为true。问题可能源于WPF默认情况下要进行设备无关渲染的事实。由于宽度/高度和DPI /像素未准确对齐，导致控制边缘略微“渗出”到相邻像素。将SnapsToDevicePixels设置为true，将强制WPF精确渲染设备像素，并且“流血”效果将消失...

编辑：我尝试了你提供的代码，我猜“白色片段”是角落周围的白色（ish）像素？那么这里的问题源于抗锯齿，它也减轻了角落内的像素。因为你使用深色调，那些较亮的像素突出，按钮看起来不那么好。

我不确定这是否可以被视为错误。您会认为反对角化会对构成角落和角落外部的像素产生魔力，但角落内的每个像素都应使用背景颜色进行着色。然后这可能是设计，抗锯齿必须弄乱角落内的像素，否则你没有得到所需的效果......

无论如何，有两种解决方法：

1）为边框指定以下属性：RenderOptions.EdgeMode =“Aliased”。这将关闭抗锯齿（0％白色（ish）像素），但控件看起来会非常锯齿状。

2）使用两个边框。外边框的定义就像您定义了当前边框一样，只将Background属性设置为DarkBlue。然后为此外边框创建另一个边框作为子元素。对于此内边框设置CornerRadius = 7，RenderOptions.EdgeMode =“Aliased”并使用LinearGradientBrush定义背景。内边框将包含ContentPresenter。代码如下所示：

<Border CornerRadius=8 Background=DarkBlue>
    <Border CornerRadius=7 RenderOptions.EdgeMode="Aliased">
       <Border.Background>
          ...
       </Border.Background>

       <ContentPresenter />
    </Border>
</Border>

它不会消除100％的白色像素，但这是我认为最好的折衷方案。用肉眼我看不到任何白色像素，但当我用放大镜工具放大时，我每个角只计算2个像素而且只在底角处。之前它是每角8像素。至少外边框仍然是抗锯齿的，控件看起来并不松散。

BevelBitmapEffect对控件的外观没有任何影响，所以我只是忽略了它。

WPF：带有cornerRadius和Bevel的按钮模板看起来不对

1 个答案: