WPF：按钮模板w/cornerRadius和斜角看起来不对

我改变了按钮的ControrTemplate，给它一个CornerRadius和BevelBitmpaEffect的边框。看起来足够体面，为最小的努力。把它放在彩色背景上，然后问题变得明显。WPF：按钮模板w/cornerRadius和斜角看起来不对

光角从那里出来的角落是一个白色的剪辑，有一个直角角落。可能来自灯光效果，但非常明显的一个角落Radius。我不认为我可以做任何事情（除了明显的不使用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>

来源

2010-07-29 Ingó Vals

此按钮，我不能想象什么问题同样的问题完全看起来像，但这里有一个建议 - 尝试将SnapsToDevicePixels设置为对于受影响的按钮或可能整个窗口为true。这个问题可能源于WPF默认情况下需要进行独立于设备的渲染。由于宽度/高度和DPI /像素未准确对齐，导致控制边缘略微“流血”到相邻像素。将SnapsToDevicePixels设置为true，将强制WPF准确渲染设备像素，并且“流血”效果将消失...

编辑：我试用了您提供的代码，我猜“白色剪辑”是白色（ish）像素在角落？那么这里的问题来自抗锯齿，这也会减轻角落内的像素。由于您使用的是暗调，因此这些较亮的像素非常突出，而且按钮看起来不太好看。

我不确定这是否可以被视为一个错误。你会认为antialising会对组成角落和角落外的像素产生魔力，但角落内的每个像素都应该使用背景颜色进行着色。话又说回来，这可能是由设计，即抗锯齿必须与角落内的像素混乱以及否则你没有得到所要求的效果......

反正有两种解决方法：

1）为边框提供以下属性RenderOptions.EdgeMode =“Aliased”。这将关闭抗锯齿（0％白色（ish）像素），但controll看起来非常粗糙。

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对控件的外观没有任何影响，所以我只是忽略它。

来源

2010-07-31 19:38:56 Marko

我之前在一些问题中使用了SnapsToDevicePixels，但在这里似乎并不是这样。我可能会发布按钮的Controltemplate也会向您展示它的外观。 – 2010-08-10 11:22:30

检查编辑的答案... – Marko 2010-08-10 15:38:04

WPF：按钮模板w/cornerRadius和斜角看起来不对

回答

相关问题