[WPF] 抄一个 CSS3 实现的按钮


1. 来源

继上一篇文章模仿了一下这个按钮,这篇文章索性抄一下,连动画都模仿过来,顺便熟习下 CSS3。原版:

纯CSS3实现质感细腻丝滑按钮

2. 实现

第一步

<ContentPresenter.Effect>
    <DropShadowEffect BlurRadius="2"
                      Direction="270"
                      Opacity=".9"
                      ShadowDepth="1"
                      Color="#F000" />
</ContentPresenter.Effect>

第一步先做最外层的 Border,并在中间的文字加上一个阴影。这时候文字会有些模糊,在样式上加上 <Setter Property="UseLayoutRounding" Value="True" /> 会有些改善。

第二步

<Border x:Name="HighlightBorder"
        BorderBrush="White"
        BorderThickness="0,1,0,0"
        CornerRadius="4">
    <Border.OpacityMask>
        <RadialGradientBrush x:Name="Brush" Center=".3,.0" GradientOrigin=".3,.0" RadiusX=".2" RadiusY=".2">
            <GradientStop Color="#F000" />
            <GradientStop Offset=".7" Color="#8000" />
            <GradientStop Offset="1" Color="#5000" />
        </RadialGradientBrush>
    </Border.OpacityMask>
</Border>

然后放一层只有上边框的 Border。注意这里不能高度为 1 像素的 Line,因为要配合圆角的弯曲。

第三步

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

放个遮罩层增加一点立体感。

第四步

<Border Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        CornerRadius="4"
        SnapsToDevicePixels="true">
    <Border.Effect>
        <DropShadowEffect x:Name="OuterShadow"
                          BlurRadius="0"
                          Direction="270"
                          Opacity=".25"
                          ShadowDepth="1"
                          Color="#FFF" />
    </Border.Effect>
</Border>

复制一个外边框并应用 DropShadowEffect,用于展示下边缘的立体感,以及用于 MouseOver 状态的动画。

第五步

<Grid x:Name="InnerShadow" Opacity="0">
    <Border Margin="-5"
            BorderBrush="Black"
            BorderThickness="5">
        <Border.Effect>
            <DropShadowEffect BlurRadius="7" ShadowDepth="0" />
        </Border.Effect>
    </Border>
    <Grid.OpacityMask>
        <VisualBrush Stretch="None" Visual="{Binding ElementName=border}" />
    </Grid.OpacityMask>
</Grid>

最后需要一个内阴影,用于 Pressed 状态的动画,可以参考这篇文章:

实现 WPF 的 Inner Shadow

3. 成果

再增加一些动画,成果如下:

4. 源码

https://github.com/DinoChan/wpf_design_and_animation_lab

文章来源:https://www.cnblogs.com/dino623/p/a-wpf-button-from-css3.html

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
管理员
上一篇:使用.NET 6开发TodoList应用(7)——使用AutoMapper实现GET请求
下一篇:[WPF] 实现 WPF 的 Inner Shadow
评论列表

发表评论

评论内容
昵称:
关联文章

[WPF] 一个 CSS3 实现按钮
[WPF] 实现一个很久以前流行按钮样式
[WPF] 实现 WPF Inner Shadow
用 WinUI 3 开发了一个摸鱼应用
[WPF] 用 Effect 实现线条光影效果
[WPF] 使用 Shazzam Shader Editor 编写一个 Lighten Effect
WPF开发随笔收录-带递增递减按钮TextBox
dotnetCampus.UITest.WPF 一个支持中文用例界面单元测试框架
[WPF] 实现两个任天堂 Switch 加载动画
CSS鼠标hover 背景动画煽动效果
WPF_15_格式化绑定数据
[WPF] 用 OpacityMask 模仿 UWP Text Shimmer 动画
C# 编写一个小而快 Windows 动态桌面
DevExpress表格GridControl添加操作列单元格添加图片按钮并且实现点击链接URL跳转浏览器
使用 WPF 做个 PowerPoint 系列 基于 OpenXML 解析实现 PPT 文本描边效果
Blazor Webassembly多标签页实现非iframe实现
走进WPF之MVVM完整案例
C# 值得永久收藏WPF项目实战(经典)
YARP+AgileConfig 5分钟实现一个支持配置热更新代理网关
CSS RGB函数 LESS问题

联系我们
联系电话:15090125178(微信同号)
电子邮箱:garson_zhang@163.com
站长微信二维码
微信二维码