WPF中的圓角平面按鈕

Question

我正在設計一個帶有圓角平面按鈕的WPF UI。我爲這種按鈕編寫了以下代碼：

<Border BorderThickness="1" 
     BorderBrush="Transparent" 
     Background="DarkCyan" 
     CornerRadius="4" 
     Height="35" 
     Width="75"> 
      <Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" 
        Content="Enter" 
        VerticalAlignment="Stretch" 
        HorizontalAlignment="Stretch" 
        Background="DarkCyan" 
        Foreground="White"/> 
</Border> 

此按鈕的樣式正是我所需要的。但是在運行時，當鼠標移動到按鈕時，它不會被舍入。它是一個大小相同的矩形。實際上，按鈕會溢出邊界。因此，我增加padding邊境這樣的：

<Border BorderThickness="1" 
     BorderBrush="Transparent" 
     Background="DarkCyan" 
     CornerRadius="4" 
     Height="35" 
     Width="75" 
     Padding="2"> 
      <Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" 
        Content="Enter" 
        VerticalAlignment="Stretch" 
        HorizontalAlignment="Stretch" 
        Background="DarkCyan" 
        Foreground="White"/> 
</Border> 

在這種情況下，在hoover mode按鈕不溢出邊界了，但它仍然是矩形等按鈕’的顏色（在hoover mode）在這個矩形的區別和其他邊界的空間。所以不幸的是它還沒有用。

現在我的問題是：有沒有辦法建立一個角落，圓潤扁平按鈕（就像我提到的），在移動到按鈕便可完全圓潤的邊角空間打上空間？

Answer 1

這可能是下降到VisualStateManager的按鈕，當鼠標懸停在按鈕上方時，該按鈕正在改變樣式。我會建議使用Style來代替。

<Style TargetType="Button" x:Key="FlatButtonStyle> 
    <Setter Property="Background" Value="DarkCyan"/> 
    <Setter Property="Foreground" Value="White"/> 
    <Setter Property="Width" Value="75"/> 
    <Setter Property="Height" Value="35"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Border BorderThickness="0" 
         Background="{TemplateBinding Background}" 
         CornerRadius="4"> 
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

用法：

<Button Style="{StaticResource FlatButtonStyle}" ... />