WPF实现Twitter按钮效果

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

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

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

首先声明:这个效果属于Twitter,本文仅仅是WPF技术交流,看看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>

原标题：WPF实现Twitter按钮效果

关键词：wpf