[WPF] 实现一个很久以前流行的按钮样式

偶尔看到这个按钮样式,用 WPF 模仿一下。这个按钮样式好像好几年前看到过,已经不记得怎么称呼了。

实现起来还挺简单的,首先用 OpacityMask 和 RadialGradientBrush 实现一个高光的边框:

<Border x:Name="HighlightBorder"
        BorderBrush="White"
        BorderThickness="1"
        CornerRadius="4">
    <Border.OpacityMask>
        <RadialGradientBrush x:Name="Brush" Center=".3,.0" GradientOrigin=".3,.0" RadiusX=".2" RadiusY=".2">
            <GradientStop Color="#8000" />
            <GradientStop Offset=".7" Color="#3000" />
            <GradientStop Offset="1" Color="#1000" />
        </RadialGradientBrush>
    </Border.OpacityMask>
</Border>
<ContentPresenter x:Name="contentPresenter"
                  Margin="{TemplateBinding Padding}"
                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                  Focusable="False"
                  RecognizesAccessKey="True"
                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />

然后在上面放一个半透明的遮罩层:

<Rectangle x:Name="rectangle"
           RadiusX="4"
           RadiusY="4">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop x:Name="Stop1" Offset=".5" Color="#10FFFFFF" />
            <GradientStop x:Name="Stop2" Offset=".5" Color="#0000" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

下一步,在外面套一个 Border,Border 的边框为一个像素,并且应用上背景色:

<Border x:Name="border"
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        CornerRadius="4"
        SnapsToDevicePixels="true">

最后,在底层放一个半透明的层,添加一点立体感:

<Border Margin="0,0,0,-1"
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        CornerRadius="5"
        Opacity=".3"
        SnapsToDevicePixels="true">
    <Rectangle Margin="0,4,0,0"
               Fill="White"
               Opacity=".5"
               RadiusX="5"
               RadiusY="5" />
</Border>

应用上各种颜色,成果如下:

最后再 MouseOver 和 Pressed 状态对遮罩层做手脚,实现了简单的状态变化:

源码: https://github.com/DinoChan/wpf_design_and_animation_lab

posted @ 2021-12-23 15:36  dino.c  阅读(1824)  评论(4编辑  收藏  举报