WPF中的圆角矩形扁平按钮

Question

WPF中的圆角矩形扁平按钮

6

我正在使用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中）的颜色在这个矩形和边框的其他空间中是不同的。所以不幸的是，它还没有用处。

现在我的问题是：是否有任何方法可以构建一个带有圆角的扁平按钮（就像我提到的那个），移动到按钮上面的空间会恰好是圆角空间？

- parseh

可能是WPF按钮样式触发器的重复问题。 - Clint

不是严格的1:1复制，但您需要覆盖按钮的悬停样式。 - Clint

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mike Eason · Accepted Answer

这可能是由于按钮的 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}" ... />