AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

WPF实现Twitter按钮效果

2018-05-24 1244
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:WPF实现Twitter按钮效果最近上网看到这个CSS3实现的Twitter按钮,感觉很漂亮,于是想用WPF来实现下. 实现这个效果,参考了CSS3 原文地址:http://www.html5tricks.
原文: WPF实现Twitter按钮效果

最近上网看到这个CSS3实现的Twitter按钮,感觉很漂亮,于是想用WPF来实现下.

实现这个效果,参考了CSS3 原文地址:http://www.html5tricks.com/css3-twitter-3d-button.html

我并不知道这是不是原文的出处,我仅仅是在这里看到的.如果原文作者看到,这并不是原文出处,请留言给我.

效果版权属于Twitter,本文仅仅是WPF技术交流

效果如图:

实现这个并没有用到3D,仅仅是一系列动画的组合,使它看起来像3D.

控件模版一共分4大部分:

  1. 盒子内部的Content
  2. 盒子盖外表皮
  3. 盒子盖拉下来后下面的阴影
  4. 盒子盖内表皮

里面的"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 
1 <Button Tag="t">
2             <Button.Content>
3                 <TextBlock Text="Follow @bennettfeely" TextDecorations="Underline"></TextBlock>
4             </Button.Content>
5         </Button>
Button

源码下载:Wpf仿Twitter按钮.zip

文章标签：
C#
关键词：
wpf实现
wpf按钮
杰克.陈
目录
相关文章
杰克.陈
|
C#
WPF 界面实现多语言支持 中英文切换 动态加载资源字典
原文:WPF 界面实现多语言支持 中英文切换 动态加载资源字典 1、使用资源字典，首先新建两个字典文件en-us.xaml、zh-cn.xaml。定义中英文的字符串在这里面【注意：添加xmlns:s="clr-namespace:System;assembly=mscorlib】 zh-cn.
杰克.陈
3194 0
JackWang1987
|
IDE C# 开发工具
WPF钟表效果实现
中WPF中的RotateTransform实现UI元素的旋转，并模拟钟表的秒针、分针和时针。
JackWang1987
1197 0
WPF钟表效果实现
JackWang1987
|
IDE 编译器 C#
WPF实现强大的动态公式计算
数据库可以定义表不同列之间的计算公式，进行自动公式计算，但如何实现行上的动态公式计算呢？行由于可以动态扩展，在某些应用场景下将能很好的解决实际问题。本文就探讨一下如何在WPF中实现一种基于行字段的动态公式计算。
JackWang1987
1067 0
WPF实现强大的动态公式计算
niunan
|
C# 前端开发
wpf中的datagrid绑定操作按钮是否显示或者隐藏
如图，需要在wpf中的datagrid的操作那列有个确认按钮，然后在某些条件下确认按钮可见，某些情况下不可见的，放在mvc里直接在cshtml页面中if..else就行了。 但是在wpf里不行。。网上搜索了好久才找到解决方法，原来只是binding那个visiable属性就行了，
niunan
6896 0
优惠券活动
|
网络协议 C# 移动开发
C# WPF上位机实现和下位机TCP通讯
C# WPF上位机实现和下位机TCP通讯下位机使用北京大华程控电源DH1766-1，上位机使用WPF。实现了电压电流实时采集，曲线显示。上午在公司调试成功，手头没有程控电源，使用TCP服务端模拟。昨天写的TCP服务端正好排上用场。
优惠券活动
2404 0
杰克.陈
|
C#
WPF特效-实现3D足球效果
原文:WPF特效-实现3D足球效果 WPF 实现 3D足球效果，效果图如下：  每个面加载不同贴图。                                                          ...
杰克.陈
916 0
杰克.陈
|
算法 C# 容器
WPF特效-实现弧形旋转轮播图
原文:WPF特效-实现弧形旋转轮播图        项目遇到，琢磨并实现了循环算法，主要处理循环替换显示问题       （如：12张图组成一个圆弧，但总共有120张图需要呈现，如何在滑动中进行显示块的替换，并毫无卡顿）        处理的自己感觉比较满意，记录一下。
杰克.陈
2150 0
杰克.陈
|
C#
WPF自定义控件第二 - 转盘按钮控件
原文:WPF自定义控件第二 - 转盘按钮控件 继之前那个控件，又做了一个原理差不多的控件。这个控件主要模仿百度贴吧WP版帖子浏览界面左下角那个弹出的按钮盘。希望对大家有帮助。 这个控件和之前的也差不多，为了不让大家白看，文章最后发干货。
杰克.陈
1097 0
杰克.陈
|
文字识别 C# Windows
通通WPF随笔（4）——通通手写输入法（基于Tablet pc实现）
原文:通通WPF随笔（4）——通通手写输入法（基于Tablet pc实现）          从我在博客园写第一篇博客到现在已经有1年半了，我的第一篇博客写的就是手写识别，当时，客户需求在应用中加入手写输入功能，由于第三方的手写输入法都无法定制界面，所以领导决定自主开发，所以我就很简单地基于Tablet pc写了一个WPF控件，由于几个瓶颈问题，导致这个输入功能只能在我们的UI框架里使用，而无法做到像输入法那样可以输入到任意窗口。
杰克.陈
2211 0
杰克.陈
|
C# 存储
WPF中在XAML中实现数据类型转换的两种方法
原文:WPF中在XAML中实现数据类型转换的两种方法 熟悉数据绑定的朋友都知道，当我们在Model中获取一个对象的数据，常常需要对其进行数据转换后显示在UI界面上，比如你用bool类型存储了一个人的性别，但是在界面上却需要经过转化后显示为男或女； 今天又把数据绑定部分又看了一下，在这里就算是做个总...
杰克.陈
1055 0