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和斜角看起來不對

回答

相關問題