WPF中的圆角平面按钮

时间:2015-05-27 10:25:28

标签: wpf

我正在设计一个带有圆形平面按钮的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中的按钮不再溢出边框,但它仍然是矩形,因此按钮的颜色(In hoover mode)在此矩形和其他边框空格中有所不同。所以不幸的是它还没用。

现在我的问题是:有没有办法建立一个角落圆形的平面按钮(就像我提到的那样),标记空间移动到按钮上的确是角落的圆角空间?

1 个答案:

答案 0 :(得分:9)

当鼠标悬停在按钮上时,按钮的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}" ... />