原地址->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. solr+mongo-connector+mongdb+tomcat集成

    话题:solr安装 一.下载solr 本例采用4.10.3版本. Solr所有版本下载地址:http://archive.apache.org/dist/lucene/solr/ 下载完成后,解压的目 ...

  2. ASP.NET Core (Database First)

    CREATE DATABASE [EFCore_dbfirst] GO USE [EFCore_dbfirst] GO CREATE TABLE [Blog] ( [BlogId] int NOT N ...

  3. Linux下搭建FTP服务器

    实习的公司有一台老服务器转作为FTP服务器,老大把这个任务交给了我.这两天边学边卖的捣腾起来,总算搞成.现在记录下来,加深映像,也以便以后查看复习. 服务器安装的是:Red Hat Enterpris ...

  4. Android 多线程处理之多线程用法大集合

    handler.post(r)其实这样并不会新起线程,只是执行的runnable里的run()方法,却没有执行start()方法,所以runnable走的还是UI线程. 1.如果像这样,是可以操作ui ...

  5. linux按键驱动之poll

    上一节应用程序的死循环里的读函数是一直在读的:在实际的应用场所里,有没有那么一种情况,偶尔有数据.偶尔没有数据,答案当然是有的.-->poll机制:Poll机制实现的是一定时间如果没有按键的话就 ...

  6. 关于css3

    1.选择器: 属性选择器:[]; 查找条件:属性:我们可以通过属性来查找[^=][$=][*=][=][attr] 伪类选择器:  ::: ::before:::after: 必须指定一个conten ...

  7. Search for a Range

    Given a sorted array of integers, find the starting and ending position of a given target value. You ...

  8. 开发adobe ane分享

    最近的项目使用adobe air开发,不可能避免的要使用到ane,项目初期的时候,使用了网上搜索到的了一些开源ane,最后发现,很多都不完善,要么版本太久,要么BUG很多,无人维护,所以下决心自己开发 ...

  9. /px/em/rem/的区别

    PX特点: 1 .IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3.Firefox能够调整px和em,rem,但是96%以上 ...

  10. 用word制作电子书最简捷模式 支持epub和mobi目录

    因为制作一本OCR的电子书,转到word编辑排版后,用calibre转成mobi发现没有目录,在网上查了资料研究了一下,终于解决了目录问题,根本不用将word文档转换为什么htm或txt,尤其是转换t ...