欢迎光临
我的个人博客网站

[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}" /> 

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

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

<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> 

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

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

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

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

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

<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> 

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

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

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

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

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

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

赞(0) 打赏
未经允许不得转载:张拓的天空 » [WPF] 实现一个很久以前流行的按钮样式
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏