WPF实现Twitter按钮效果
最近上网看到这个CSS3实现的Twitter按钮,感觉很漂亮,于是想用WPF来实现下.
实现这个效果,参考了CSS3 原文地址:http://www.html5tricks.com/css3-twitter-3d-button.html
我并不知道这是不是原文的出处,我仅仅是在这里看到的.如果原文作者看到,这并不是原文出处,请留言给我.
效果版权属于Twitter,本文仅仅是WPF技术交流
效果如图:
实现这个并没有用到3D,仅仅是一系列动画的组合,使它看起来像3D.
控件模版一共分4大部分:
- 盒子内部的Content
- 盒子盖外表皮
- 盒子盖拉下来后下面的阴影
- 盒子盖内表皮
里面的"Follow @bennettfeely"是个带下划线的TextBlock,放到了Content里面.外面的"t"放到了Tag里.通过动画控制放缩ScaleTransform来实现.
<Style TargetType="{x:Type Button}">
<Setter Property="Width" Value="174"></Setter>
<Setter Property="Foreground" Value="#777"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
<Setter Property="VerticalContentAlignment" Value="Center"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="42"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<!--内部内容-->
<Grid>
<Border CornerRadius="4" Background="#EBEFF2" BorderThickness="1,2,1,0" BorderBrush="#ccc">
<ContentPresenter x:Name="content" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"></ContentPresenter>
</Border>
<Border Background="#31000000">
<Border.OpacityMask>
<RadialGradientBrush GradientOrigin="0.5,1.5" RadiusY="1">
<GradientStop Color="#00000000" Offset="0"/>
<GradientStop x:Name="contentBackgroundStop" Color="#FF000000" Offset="1"/>
</RadialGradientBrush>
</Border.OpacityMask>
</Border>
</Grid>
<!--盒子盖外部-->
<Grid RenderTransformOrigin="0.5,1">
<Grid.RenderTransform>
<ScaleTransform x:Name="coveroutiestf" ScaleX="1" ScaleY="1"></ScaleTransform>
</Grid.RenderTransform>
<Border Name="cover_outie" CornerRadius="4" Background="#2EC8FA">
<Label Content="{TemplateBinding Tag}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="16">
<Label.Effect>
<DropShadowEffect ShadowDepth="2" Direction="270" BlurRadius="4" Color="#31000000"></DropShadowEffect>
</Label.Effect>
</Label>
</Border>
<Border Name="cover_outie_spine" CornerRadius="4" Background="#FFD6EFF5" Height="4.2" VerticalAlignment="Top" RenderTransformOrigin="0.5,0">
<Border.RenderTransform>
<ScaleTransform x:Name="coveroutiespinestf" ScaleX="1" ScaleY="0"></ScaleTransform>
</Border.RenderTransform>
</Border>
<Border CornerRadius="4" Background="#FF000000">
<Border.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#00000000" Offset="0"/>
<GradientStop Color="#15000000" Offset="1"/>
</LinearGradientBrush>
</Border.OpacityMask>
</Border>
</Grid>
<!--底部阴影-->
<Path Grid.Row="1" Name="shadow" RenderTransformOrigin="0.5,0">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="2,0">
<LineSegment Point="172,0"></LineSegment>
<ArcSegment Point="174,2" Size="2,2" SweepDirection="Clockwise"></ArcSegment>
<LineSegment Point="170,40"></LineSegment>
<ArcSegment Point="168,42" Size="2,2" SweepDirection="Clockwise"></ArcSegment>
<LineSegment Point="6,42"></LineSegment>
<ArcSegment Point="4,40" Size="2,2" SweepDirection="Clockwise"></ArcSegment>
<LineSegment Point="0,2"></LineSegment>
<ArcSegment Point="2,0" Size="2,2" SweepDirection="Clockwise"></ArcSegment>
</PathFigure>
</PathGeometry>
</Path.Data>
<Path.RenderTransform>
<ScaleTransform x:Name="shadowstf" ScaleX="1" ScaleY="0"></ScaleTransform>
</Path.RenderTransform>
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#95000000" Offset="0"/>
<GradientStop Color="#00000000" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<!--盒子盖内部-->
<Grid Grid.Row="1" Height="42" VerticalAlignment="Top" RenderTransformOrigin="0.5,0">
<Grid.RenderTransform>
<ScaleTransform x:Name="coverinniestf" ScaleY="0" ScaleX="1"/>
</Grid.RenderTransform>
<Border Name="cover_innie" CornerRadius="4" Background="#FF67E2FE">
<Label Content="{TemplateBinding Tag}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="16" RenderTransformOrigin="0.5,0.5">
<Label.RenderTransform>
<ScaleTransform ScaleY="-1" ScaleX="1"/>
</Label.RenderTransform>
<Label.Effect>
<DropShadowEffect ShadowDepth="2" Direction="270" BlurRadius="4" Color="#31000000"></DropShadowEffect>
</Label.Effect>
</Label>
</Border>
<Border Name="cover_innie_spine" CornerRadius="4" Background="#52B1E0" Height="4.2" VerticalAlignment="Bottom"></Border>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Foreground" Value="red"></Setter>
</Trigger>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<!--内部内容背景-->
<ColorAnimation Storyboard.TargetName="contentBackgroundStop" Storyboard.TargetProperty="Color" To="#31000000" Duration="00:00:0.3"></ColorAnimation>
<!--盒子外部动画0.3秒 内部0.15秒 其中有0.05秒的重叠 一共是0.4秒-->
<!--盒子盖的外部-->
<DoubleAnimation Storyboard.TargetName="coveroutiestf" Storyboard.TargetProperty="ScaleY" To="0" Duration="00:00:0.3"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="coveroutiespinestf" Storyboard.TargetProperty="ScaleY" To="1" Duration="00:00:0.05"></DoubleAnimation>
<!--盒子盖的内部-->
<DoubleAnimation Storyboard.TargetName="coverinniestf" Storyboard.TargetProperty="ScaleY" To="0.5" BeginTime="00:00:0.25" Duration="00:00:0.15"></DoubleAnimation>
<!--底部阴影-->
<DoubleAnimation Storyboard.TargetName="shadowstf" Storyboard.TargetProperty="ScaleY" To="1" Duration="00:00:0.4"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="contentBackgroundStop" Storyboard.TargetProperty="Color" To="#FF000000" BeginTime="00:00:0.1" Duration="00:00:0.3"></ColorAnimation>
<DoubleAnimation Storyboard.TargetName="coveroutiestf" Storyboard.TargetProperty="ScaleY" To="1" BeginTime="00:00:0.1" Duration="00:00:0.3"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="coveroutiespinestf" Storyboard.TargetProperty="ScaleY" To="0" BeginTime="00:00:0.35" Duration="00:00:0.05"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="coverinniestf" Storyboard.TargetProperty="ScaleY" To="0" Duration="00:00:0.15"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="shadowstf" Storyboard.TargetProperty="ScaleY" To="0" Duration="00:00:0.4"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Style
<Button Tag="t">
<Button.Content>
<TextBlock Text="Follow @bennettfeely" TextDecorations="Underline"></TextBlock>
</Button.Content>
</Button>
Button
源码下载:Wpf仿Twitter按钮.zip
WPF实现Twitter按钮效果的更多相关文章
- WPF实现Twitter按钮效果（转）
最近上网看到这个CSS3实现的Twitter按钮,感觉很漂亮,于是想用WPF来实现下. 实现这个效果,参考了CSS3 原文地址:http://www.html5tricks.com/css3-twit ...
- WPF中制作立体效果的文字或LOGO图形
原文:WPF中制作立体效果的文字或LOGO图形 较久之前,我曾写过一篇:"WPF绘制党徽(立体效果,Cool) "的博文.有感兴趣的朋友来EMAIL问是怎么制作的?本文解决此类问题 ...
- [原译]一步步教你制作WPF圆形玻璃按钮
原文:[原译]一步步教你制作WPF圆形玻璃按钮 图1 1.介绍 从我开始使用vista的时候,我就非常喜欢它的圆形玻璃按钮.WPF最好的一个方面就是允许自定义任何控件的样式.用了一段时间的Micros ...
- 仿淘宝分页按钮效果简单美观易使用的JS分页控件
分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 ...
- 使用 CSS3 制作一组超时尚的动画按钮效果
通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...
- 美妙的 CSS3 动画！一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
- 10个实用的 CSS3 按钮效果制作教程
人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...
- 学习制作精美 CSS3 按钮效果的10个优秀教程
由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...
- iOS （UIButton封装）仿糯米首页缩放“按钮”效果
前言 过年期间,少不了各种聚会,当下聚会大多数情况下自然是团购,然后就是用各种APP...使用度娘糯米时(不是广告,不是广告,不是广告!),偶然注意到了它的首页中一个有意思的效果,就是那些“按钮”点击 ...
随机推荐
- 如何使用github搭建个人博客
1.去github官网注册个人帐号:没有的:猛戳这里去注册,比如我的账户名:wjf444128852,我的已经汉化(可在github里搜索github如何汉化有插件) 2.点击仓库-新建,仓库名字必须 ...
- 熟悉vs2012IDE
使用vs2012已经几个月了,深感对开发环境的学习有助于提高开发的效率.现将我的经验总结如下: 一.搜索 vs2012相比vs2010添加了正则搜索,极大的提高了代码的查询效率. 二.重构 同vs20 ...
- [deviceone开发]-do_ImageView实现正圆的示例
一.简介 我们经常需要用一个正圆形状的图片来设置头像,在do平台这个比较容易,就是通过设置圆角来实现,但是有几个小技巧需要解释一下 主要组件:do_ImageView 二.效果图 三.相关下载 htt ...
- C# 多線程&BackgroundWorker概念入門教程
感謝以下各位作者的貢獻~ 百度經驗舉了個例子,很好理解BackgroundWorker的用途(主要是用來啟動後台線程,而不阻塞調用程式的運行),收藏一下 http://jingyan.baidu.c ...
- iOS之POST与GET的优缺点
//请求数据时传参数要将汉字转码 //GET获取数据,所有的参数信息都会暴露 GET方法和POST方法对比: 优点: GET: 1.请求方便,直接用一个完整的路径去请求获取数据 2.发送求请求过程中不 ...
- 利用UICollectionViewFlowLayout的隐式动画实现UICollectionView的layout的动画调整（外加放大指定cell效果）
前几天在gitHub看到个不错的效果,就是DaiExpandCollectionView,效果如图: 所以赶紧下下来源码看看他怎么实现的,打开源码看了半天,发现他没写什么关于动画的代码啊... 经 ...
- Android Gson的使用总结
1.概念 Gson是谷歌发布的一个json解析框架 2.如何获取 github:https://github.com/google/gson android studio使用 compile 'com ...
- Android Touch事件分发机制学习
Android 事件分发机制 ViewGroup dispatchTouchEvent 返回true dispatchTouchEvent: Activity ACTION_DOWN Myrelat ...
- Linux(Centos)系统上搭建SVN以及常见错误解答
本文主要介绍怎样在Centos上搭建SVN,文章内容比较基础,适合小白用户学习. 1.Linux版本Centos 6.5 查看linux版本命令: cat /etc/issue 2.查看本机上是否已经 ...
- 分布式搜索引擎ElasticSearch+Kibana (Marvel插件安装详解)
在安装插件的过程中,尤其是安装Marvel插件遇到了很多问题,要下载license.Marvel-agent,又要下载安装Kibana 版本需求 Java 7 or later Elasticsear ...