原地址->http://www.cnblogs.com/yk250/p/5661093.html

介绍：简约而不简单....颜色可随意调制，最好用Blend工具。

效果图如下：话说这个图会不会太大了点 ０＿０

外观简单，制作也十分简单：Microsoft.Expression.Interactions.dll和System.Windows.Interactivity.dll是必不可少的！

 <Style x:Key="MetroButtonStyle" TargetType="{x:Type Button}">

             <Setter Property="FocusVisualStyle" Value="{x:Null}"/>

             <!--<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>

             <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>-->

             <Setter Property="BorderThickness" Value="1"/>

             <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>

             <Setter Property="HorizontalContentAlignment" Value="Center"/>

             <Setter Property="VerticalContentAlignment" Value="Center"/>

             <Setter Property="Padding" Value="1"/>

             <Setter Property="Template">

                 <Setter.Value>

                     <ControlTemplate TargetType="{x:Type Button}">

                         <ControlTemplate.Resources>

                             <Storyboard x:Key="Storyboard1">

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="contentPresenter">

                                     <EasingDoubleKeyFrame KeyTime="0" Value="0"/>

                                     <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="20">

                                         <EasingDoubleKeyFrame.EasingFunction>

                                             <BackEase EasingMode="EaseInOut"/>

                                         </EasingDoubleKeyFrame.EasingFunction>

                                     </EasingDoubleKeyFrame>

                                 </DoubleAnimationUsingKeyFrames>

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="textBlock">

                                     <EasingDoubleKeyFrame KeyTime="0" Value="1"/>

                                     <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.4">

                                         <EasingDoubleKeyFrame.EasingFunction>

                                             <BackEase EasingMode="EaseOut"/>

                                         </EasingDoubleKeyFrame.EasingFunction>

                                     </EasingDoubleKeyFrame>

                                 </DoubleAnimationUsingKeyFrames>

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="textBlock">

                                     <EasingDoubleKeyFrame KeyTime="0" Value="1"/>

                                     <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.4">

                                         <EasingDoubleKeyFrame.EasingFunction>

                                             <BackEase EasingMode="EaseOut"/>

                                         </EasingDoubleKeyFrame.EasingFunction>

                                     </EasingDoubleKeyFrame>

                                 </DoubleAnimationUsingKeyFrames>

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="border">

                                     <EasingDoubleKeyFrame KeyTime="0" Value="1"/>

                                     <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.25"/>

                                     <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-1.25"/>

                                 </DoubleAnimationUsingKeyFrames>

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="border">

                                     <EasingDoubleKeyFrame KeyTime="0" Value="1"/>

                                     <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.25"/>

                                 </DoubleAnimationUsingKeyFrames>

                             </Storyboard>

                             <Storyboard x:Key="Storyboard_Copy1">

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="contentPresenter">

                                     <SplineDoubleKeyFrame KeyTime="0" Value="20"/>

                                     <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">

                                         <EasingDoubleKeyFrame.EasingFunction>

                                             <BackEase EasingMode="EaseOut"/>

                                         </EasingDoubleKeyFrame.EasingFunction>

                                     </EasingDoubleKeyFrame>

                                 </DoubleAnimationUsingKeyFrames>

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="textBlock">

                                     <SplineDoubleKeyFrame KeyTime="0" Value="1.4"/>

                                     <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">

                                         <EasingDoubleKeyFrame.EasingFunction>

                                             <BackEase EasingMode="EaseInOut"/>

                                         </EasingDoubleKeyFrame.EasingFunction>

                                     </EasingDoubleKeyFrame>

                                 </DoubleAnimationUsingKeyFrames>

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="textBlock">

                                     <SplineDoubleKeyFrame KeyTime="0" Value="1.4"/>

                                     <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">

                                         <EasingDoubleKeyFrame.EasingFunction>

                                             <BackEase EasingMode="EaseInOut"/>

                                         </EasingDoubleKeyFrame.EasingFunction>

                                     </EasingDoubleKeyFrame>

                                 </DoubleAnimationUsingKeyFrames>

                             </Storyboard>

                             <Storyboard x:Key="Storyboard2">

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Chrome">

                                     <EasingDoubleKeyFrame KeyTime="0" Value="1"/>

                                     <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.92">

                                         <EasingDoubleKeyFrame.EasingFunction>

                                             <BackEase EasingMode="EaseInOut"/>

                                         </EasingDoubleKeyFrame.EasingFunction>

                                     </EasingDoubleKeyFrame>

                                 </DoubleAnimationUsingKeyFrames>

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Chrome">

                                     <EasingDoubleKeyFrame KeyTime="0" Value="1"/>

                                     <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.92">

                                         <EasingDoubleKeyFrame.EasingFunction>

                                             <BackEase EasingMode="EaseInOut"/>

                                         </EasingDoubleKeyFrame.EasingFunction>

                                     </EasingDoubleKeyFrame>

                                 </DoubleAnimationUsingKeyFrames>

                             </Storyboard>

                             <Storyboard x:Key="Storyboard_Copy2">

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Chrome">

                                     <SplineDoubleKeyFrame KeyTime="0" Value="0.92"/>

                                     <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>

                                 </DoubleAnimationUsingKeyFrames>

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Chrome">

                                     <SplineDoubleKeyFrame KeyTime="0" Value="0.92"/>

                                     <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>

                                 </DoubleAnimationUsingKeyFrames>

                             </Storyboard>

                             <Storyboard x:Key="Storyboard_Copy3">

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="contentPresenter">

                                     <SplineDoubleKeyFrame KeyTime="0" Value="20"/>

                                     <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>

                                 </DoubleAnimationUsingKeyFrames>

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="textBlock">

                                     <SplineDoubleKeyFrame KeyTime="0" Value="1.4"/>

                                     <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>

                                 </DoubleAnimationUsingKeyFrames>

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="textBlock">

                                     <SplineDoubleKeyFrame KeyTime="0" Value="1.4"/>

                                     <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>

                                 </DoubleAnimationUsingKeyFrames>

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="border">

                                     <SplineDoubleKeyFrame KeyTime="0" Value="-1.25"/>

                                     <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1.25"/>

                                     <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>

                                 </DoubleAnimationUsingKeyFrames>

                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="border">

                                     <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1.25"/>

                                     <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>

                                 </DoubleAnimationUsingKeyFrames>

                             </Storyboard>

                         </ControlTemplate.Resources>

                         <Grid x:Name="Chrome"

                                 Margin="5"

                                 SnapsToDevicePixels="true" RenderTransformOrigin="0.5,0.5">

                             <Grid.RenderTransform>

                                 <TransformGroup>

                                     <ScaleTransform/>

                                     <SkewTransform/>

                                     <RotateTransform/>

                                     <TranslateTransform/>

                                 </TransformGroup>

                             </Grid.RenderTransform>

                             <Grid  Background="{TemplateBinding Background}" Opacity="0.65"/>

                             <Grid>

                                 <Grid Height="55" Width="55">

                                     <Border x:Name="border" Background="White" CornerRadius="250" RenderTransformOrigin="0.5,0.5">

                                         <Border.RenderTransform>

                                             <TransformGroup>

                                                 <ScaleTransform/>

                                                 <SkewTransform/>

                                                 <RotateTransform/>

                                                 <TranslateTransform/>

                                             </TransformGroup>

                                         </Border.RenderTransform>

                                         <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">

                                             <StackPanel Orientation="Horizontal">

                                                 <Rectangle x:Name="rectangle" Height="8" Width="8" Fill="#FF51A4DE" Opacity="0.65" RenderTransformOrigin="0.5,0.5">

                                                     <Rectangle.RenderTransform>

                                                         <TransformGroup>

                                                             <ScaleTransform/>

                                                             <SkewTransform/>

                                                             <RotateTransform/>

                                                             <TranslateTransform/>

                                                         </TransformGroup>

                                                     </Rectangle.RenderTransform>

                                                 </Rectangle>

                                                 <StackPanel Margin="3 0 0 0" Orientation="Vertical">

                                                     <Rectangle x:Name="rectangle1" Height="2" Fill="#FF51A4DE" Width="19" Opacity="0.65" RenderTransformOrigin="0.5,0.5">

                                                         <Rectangle.RenderTransform>

                                                             <TransformGroup>

                                                                 <ScaleTransform/>

                                                                 <SkewTransform/>

                                                                 <RotateTransform/>

                                                                 <TranslateTransform/>

                                                             </TransformGroup>

                                                         </Rectangle.RenderTransform>

                                                     </Rectangle>

                                                     <Rectangle x:Name="rectangle2" Margin="0 3 0 0" Height="2" Fill="#FF51A4DE" Width="19" Opacity="0.65" RenderTransformOrigin="0.5,0.5">

                                                         <Rectangle.RenderTransform>

                                                             <TransformGroup>

                                                                 <ScaleTransform/>

                                                                 <SkewTransform/>

                                                                 <RotateTransform/>

                                                                 <TranslateTransform/>

                                                             </TransformGroup>

                                                         </Rectangle.RenderTransform>

                                                     </Rectangle>

                                                 </StackPanel>

                                             </StackPanel>

                                             <StackPanel Margin="0 2 0 0" Orientation="Vertical">

                                                 <Rectangle x:Name="rectangle3" Height="2" Fill="#FF51A4DE" Width="30" Opacity="0.65" RenderTransformOrigin="0.5,0.5">

                                                     <Rectangle.RenderTransform>

                                                         <TransformGroup>

                                                             <ScaleTransform/>

                                                             <SkewTransform/>

                                                             <RotateTransform/>

                                                             <TranslateTransform/>

                                                         </TransformGroup>

                                                     </Rectangle.RenderTransform>

                                                 </Rectangle>

                                                 <Rectangle x:Name="rectangle4" Margin="0 2 0 0" Height="2" Fill="#FF51A4DE" Width="30" Opacity="0.65" RenderTransformOrigin="0.5,0.5">

                                                     <Rectangle.RenderTransform>

                                                         <TransformGroup>

                                                             <ScaleTransform/>

                                                             <SkewTransform/>

                                                             <RotateTransform/>

                                                             <TranslateTransform/>

                                                         </TransformGroup>

                                                     </Rectangle.RenderTransform>

                                                 </Rectangle>

                                             </StackPanel>

                                         </StackPanel>

                                     </Border>

                                 </Grid>

                             </Grid>

                             <ContentPresenter x:Name="contentPresenter"  RecognizesAccessKey="True"

                                     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="center" RenderTransformOrigin="0.5,0.5">

                                 <ContentPresenter.RenderTransform>

                                     <TransformGroup>

                                         <ScaleTransform/>

                                         <SkewTransform/>

                                         <RotateTransform/>

                                         <TranslateTransform/>

                                     </TransformGroup>

                                 </ContentPresenter.RenderTransform>

                             </ContentPresenter>

                             <TextBlock x:Name="textBlock" TextElement.FontSize="20" Margin="10" TextElement.Foreground="White" Text="{TemplateBinding Tag}" VerticalAlignment="Bottom" HorizontalAlignment="left" RenderTransformOrigin="0,1">

                                 <TextBlock.RenderTransform>

                                     <TransformGroup>

                                         <ScaleTransform/>

                                         <SkewTransform/>

                                         <RotateTransform/>

                                         <TranslateTransform/>

                                     </TransformGroup>

                                 </TextBlock.RenderTransform></TextBlock>

                         </Grid>

                         <ControlTemplate.Triggers>

                             <Trigger Property="IsPressed" Value="True">

                                 <Trigger.ExitActions>

                                     <BeginStoryboard x:Name="Storyboard_Copy2_BeginStoryboard" Storyboard="{StaticResource Storyboard_Copy2}"/>

                                 </Trigger.ExitActions>

                                 <Trigger.EnterActions>

                                     <BeginStoryboard x:Name="Storyboard2_BeginStoryboard" Storyboard="{StaticResource Storyboard2}"/>

                                 </Trigger.EnterActions>

                             </Trigger>

                             <EventTrigger RoutedEvent="FrameworkElement.Loaded"/>

                             <Trigger Property="IsMouseOver" Value="True">

                                 <Trigger.ExitActions>

                                     <BeginStoryboard x:Name="Storyboard_Copy1_BeginStoryboard" Storyboard="{StaticResource Storyboard_Copy3}"/>

                                 </Trigger.ExitActions>

                                 <Trigger.EnterActions>

                                     <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>

                                 </Trigger.EnterActions>

                             </Trigger>

                             <Trigger Property="IsKeyboardFocused" Value="true"/>

                             <Trigger Property="ToggleButton.IsChecked" Value="true"/>

                             <Trigger Property="IsEnabled" Value="false"/>

                         </ControlTemplate.Triggers>

                     </ControlTemplate>

                 </Setter.Value>

             </Setter>

         </Style>

里面凌乱的名字，请忽略吧，都是Blend自动生成的，也难得改了，将就将就吧。基本上没有什么技术难点，就是翻转一下角度，然后鼠标移上，按下，移开各自关联一个简单的动画。

使用方法：

  <Button Tag="待办事项" Height="200" Width="200" Style="{DynamicResource MetroButtonStyle}">

             <Button.Background>

                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                     <GradientStop Color="#d04f8f" Offset="1"/>

                     <GradientStop Color="#c84f89"/>

                 </LinearGradientBrush>

             </Button.Background>

         </Button>

颜色和大小请随意。中间图形可以用其他内容代替！

Metro Win8风格的按钮（Filp翻转）的更多相关文章

  1. 收集Windows 8 Metro UI 风格网站资源，觉得不错的顶啊！！

    这些资源包含:模板,框架,jQuery插件,图标集等.帮助你快速开发Windows 8 Metro UI风格的网站.本文转自虾米站长网 Frameworks & Templates For M ...

  2. 【今日推荐】10大流行的 Metro UI 风格的 Bootstrap 主题和模板

    1. BootMetro 基于 Twitter Bootstrap 的简单灵活的 HTML.CSS 和 Javascript 框架,Win8 风格,大爱啊! 立即下载     效果演示 2. Boot ...

  3. WIN8 Metro UI 风格下的微软报表开发与设计 Metro UI SSRS - BIWORK

    开篇介绍 作为 BI 系统前端展现的报表,其重要性不言而喻,我们对于一个好的报表的要求也无非主要包含以下几点: 1. 数据完整和正确,数据质量没有问题 2. 友好的清晰的界面,整洁美观,有得体的格式 ...

  4. Win8风格的WPF按钮

    Win8将Windows的风格又进行了一次变革,我还挺喜欢的,有简洁大气的感觉,华丽绚丽的东西看多了之后总会返璞归真寻找简洁大气的感觉才能心情舒畅. 下面就给个WPF下Button的自定义写法.   ...

  5. 让你的WPF程序在Win7下呈现Win8风格主题

    今天在Win8下使用了一个我之前写的一个WPF程序的时候,发现现在也支持Win8效果了(记得以前的.net 4.0的版本是不支持的).由于WPF的控件是自绘的,并不受系统主题所控制,也就是说.net ...

  6. ApeForms | WinForm窗体UI美化库（Metro扁平风格）演示与安装

    ApeForms系列① 快速上手 @ 目录 ApeForms系列① 快速上手 前言 演示视频 快速上手 安装及使用 Demo下载 联系开发者 加入我们 建议与咨询 前言 ApeForms是一套基于Wi ...

  7. HTML5高防win8风格

    使用HTML5做了一个高防Win8的页面,大家看看怎么样 Java..NET.PHP.Android.iOS.HTML5,CSS3. web前端.视频资料下载网站  http://51pansou.c ...

  8. 仿360新闻的热搜图片，win8风格随机九宫格布局

    360新闻地址:http://sh.qihoo.com/i/ 感觉这效果挺好的,随机九宫格,在不少地方可以用到,就研究了下他的源码,基本原理就是预先定义好几种布局模块,然后根据需要进行拼接,具体代码可 ...

  9. DevExpress开发win8风格界面

    由于近期在对项目软件界面进行优化,找到了一款效果挺炫的插件,DevExpress15.2,可以制作win8可以滑动图标那个界面的效果,不多说,先贴图: (你没看错,这是用C#winform实现的) 可 ...

随机推荐

  1. help man info 三个的区别

    “--help”选项 “--help”是一个工具选项,大部分的GNU工具都具备这个选项,“--help”选项可以用来显示一些工具的信息 “man”工具 Man工具可以显示系统手册页中的内容,这些内容大 ...

  2. Maven安装使用

    环境:Ubuntu 12.04LTS,jdk1.6 1.下载maven3.05: 2.解压并获取M2/bin/mvn地址: 3.创建~/.mavenrc文件,并加入JAVA_HOME并export(需 ...

  3. 使用bat脚本添加JAVA_HOME和修改PATH

    add_jre.bat ::添加环境变量JAVA_HOME @echo off echo 添加java环境变量 set regpath=HKEY_LOCAL_MACHINE\SYSTEM\Curren ...

  4. android Handler.btionMessage()与Message.obtain()的区别

    类概述 定义一个包含任意类型的描述数据对象,此对象可以发送给Handler.对象包含两个额外的int字段和一个额外的对象字段,这样可以使得在很多情况下不用做分配工作. 尽管Message的构造器是公开 ...

  5. STM32学习笔记——OLED屏

    STM32学习笔记--OLED屏 OLED屏的特点: 1.  模块有单色和双色可选,单色为纯蓝色,双色为黄蓝双色(本人选用双色): 2.  显示尺寸为0.96寸 3.  分辨率为128*64 4.   ...

  6. css3 animation实现风车转动

    项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...

  7. [UI]抽屉菜单DrawerLayout分析（一）

    本文转载于:http://www.cnblogs.com/avenwu/archive/2014/04/16/3669367.html 侧拉菜单作为常见的导航交互控件,最开始在没有没有android官 ...

  8. 崽崽帮www.zaizaibang.com精选1

    南京郊外免费旅游景点推荐!不花钱又好玩~ 南艺帅哥手绘的南京,想说不爱你都难! [快乐 你懂的]—太原市育华幼儿园小一班 昆明周边游:那些近在咫尺的梨园 弘雅小学开展一年级新生入学准备期活动 大班的主 ...

  9. _IntfClear报错问题

    delphi对象在释放时会清除对象相关接口.如果开发人员在这之前已经将接口对应的对象释放掉,那么当清除到该接口时经常会报访问内存错误,如下图

  10. [经验交流] 为 mesos framework 分配资源

    前段时间我在办公网搭建了一套mesos平台,用于docker 集群相关的调研和测试,mesos + marathon + docker 架构运行正常.但是在启用了chronos后,marathon无法 ...