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

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

效果图如下:话说这个图会不会太大了点 0_0

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

  1. <Style x:Key="MetroButtonStyle" TargetType="{x:Type Button}">
  2. <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
  3. <!--<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
  4. <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>-->
  5. <Setter Property="BorderThickness" Value="1"/>
  6. <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
  7. <Setter Property="HorizontalContentAlignment" Value="Center"/>
  8. <Setter Property="VerticalContentAlignment" Value="Center"/>
  9. <Setter Property="Padding" Value="1"/>
  10. <Setter Property="Template">
  11. <Setter.Value>
  12. <ControlTemplate TargetType="{x:Type Button}">
  13. <ControlTemplate.Resources>
  14. <Storyboard x:Key="Storyboard1">
  15. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="contentPresenter">
  16. <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
  17. <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="20">
  18. <EasingDoubleKeyFrame.EasingFunction>
  19. <BackEase EasingMode="EaseInOut"/>
  20. </EasingDoubleKeyFrame.EasingFunction>
  21. </EasingDoubleKeyFrame>
  22. </DoubleAnimationUsingKeyFrames>
  23. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="textBlock">
  24. <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
  25. <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.4">
  26. <EasingDoubleKeyFrame.EasingFunction>
  27. <BackEase EasingMode="EaseOut"/>
  28. </EasingDoubleKeyFrame.EasingFunction>
  29. </EasingDoubleKeyFrame>
  30. </DoubleAnimationUsingKeyFrames>
  31. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="textBlock">
  32. <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
  33. <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.4">
  34. <EasingDoubleKeyFrame.EasingFunction>
  35. <BackEase EasingMode="EaseOut"/>
  36. </EasingDoubleKeyFrame.EasingFunction>
  37. </EasingDoubleKeyFrame>
  38. </DoubleAnimationUsingKeyFrames>
  39. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="border">
  40. <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
  41. <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.25"/>
  42. <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-1.25"/>
  43. </DoubleAnimationUsingKeyFrames>
  44. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="border">
  45. <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
  46. <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.25"/>
  47. </DoubleAnimationUsingKeyFrames>
  48. </Storyboard>
  49. <Storyboard x:Key="Storyboard_Copy1">
  50. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="contentPresenter">
  51. <SplineDoubleKeyFrame KeyTime="0" Value="20"/>
  52. <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
  53. <EasingDoubleKeyFrame.EasingFunction>
  54. <BackEase EasingMode="EaseOut"/>
  55. </EasingDoubleKeyFrame.EasingFunction>
  56. </EasingDoubleKeyFrame>
  57. </DoubleAnimationUsingKeyFrames>
  58. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="textBlock">
  59. <SplineDoubleKeyFrame KeyTime="0" Value="1.4"/>
  60. <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
  61. <EasingDoubleKeyFrame.EasingFunction>
  62. <BackEase EasingMode="EaseInOut"/>
  63. </EasingDoubleKeyFrame.EasingFunction>
  64. </EasingDoubleKeyFrame>
  65. </DoubleAnimationUsingKeyFrames>
  66. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="textBlock">
  67. <SplineDoubleKeyFrame KeyTime="0" Value="1.4"/>
  68. <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
  69. <EasingDoubleKeyFrame.EasingFunction>
  70. <BackEase EasingMode="EaseInOut"/>
  71. </EasingDoubleKeyFrame.EasingFunction>
  72. </EasingDoubleKeyFrame>
  73. </DoubleAnimationUsingKeyFrames>
  74. </Storyboard>
  75. <Storyboard x:Key="Storyboard2">
  76. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Chrome">
  77. <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
  78. <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.92">
  79. <EasingDoubleKeyFrame.EasingFunction>
  80. <BackEase EasingMode="EaseInOut"/>
  81. </EasingDoubleKeyFrame.EasingFunction>
  82. </EasingDoubleKeyFrame>
  83. </DoubleAnimationUsingKeyFrames>
  84. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Chrome">
  85. <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
  86. <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.92">
  87. <EasingDoubleKeyFrame.EasingFunction>
  88. <BackEase EasingMode="EaseInOut"/>
  89. </EasingDoubleKeyFrame.EasingFunction>
  90. </EasingDoubleKeyFrame>
  91. </DoubleAnimationUsingKeyFrames>
  92. </Storyboard>
  93. <Storyboard x:Key="Storyboard_Copy2">
  94. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Chrome">
  95. <SplineDoubleKeyFrame KeyTime="0" Value="0.92"/>
  96. <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
  97. </DoubleAnimationUsingKeyFrames>
  98. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Chrome">
  99. <SplineDoubleKeyFrame KeyTime="0" Value="0.92"/>
  100. <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
  101. </DoubleAnimationUsingKeyFrames>
  102. </Storyboard>
  103. <Storyboard x:Key="Storyboard_Copy3">
  104. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="contentPresenter">
  105. <SplineDoubleKeyFrame KeyTime="0" Value="20"/>
  106. <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
  107. </DoubleAnimationUsingKeyFrames>
  108. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="textBlock">
  109. <SplineDoubleKeyFrame KeyTime="0" Value="1.4"/>
  110. <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
  111. </DoubleAnimationUsingKeyFrames>
  112. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="textBlock">
  113. <SplineDoubleKeyFrame KeyTime="0" Value="1.4"/>
  114. <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
  115. </DoubleAnimationUsingKeyFrames>
  116. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="border">
  117. <SplineDoubleKeyFrame KeyTime="0" Value="-1.25"/>
  118. <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1.25"/>
  119. <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
  120. </DoubleAnimationUsingKeyFrames>
  121. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="border">
  122. <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1.25"/>
  123. <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
  124. </DoubleAnimationUsingKeyFrames>
  125. </Storyboard>
  126. </ControlTemplate.Resources>
  127. <Grid x:Name="Chrome"
  128. Margin="5"
  129. SnapsToDevicePixels="true" RenderTransformOrigin="0.5,0.5">
  130. <Grid.RenderTransform>
  131. <TransformGroup>
  132. <ScaleTransform/>
  133. <SkewTransform/>
  134. <RotateTransform/>
  135. <TranslateTransform/>
  136. </TransformGroup>
  137. </Grid.RenderTransform>
  138. <Grid Background="{TemplateBinding Background}" Opacity="0.65"/>
  139. <Grid>
  140. <Grid Height="55" Width="55">
  141. <Border x:Name="border" Background="White" CornerRadius="250" RenderTransformOrigin="0.5,0.5">
  142. <Border.RenderTransform>
  143. <TransformGroup>
  144. <ScaleTransform/>
  145. <SkewTransform/>
  146. <RotateTransform/>
  147. <TranslateTransform/>
  148. </TransformGroup>
  149. </Border.RenderTransform>
  150. <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
  151. <StackPanel Orientation="Horizontal">
  152. <Rectangle x:Name="rectangle" Height="8" Width="8" Fill="#FF51A4DE" Opacity="0.65" RenderTransformOrigin="0.5,0.5">
  153. <Rectangle.RenderTransform>
  154. <TransformGroup>
  155. <ScaleTransform/>
  156. <SkewTransform/>
  157. <RotateTransform/>
  158. <TranslateTransform/>
  159. </TransformGroup>
  160. </Rectangle.RenderTransform>
  161. </Rectangle>
  162. <StackPanel Margin="3 0 0 0" Orientation="Vertical">
  163. <Rectangle x:Name="rectangle1" Height="2" Fill="#FF51A4DE" Width="19" Opacity="0.65" RenderTransformOrigin="0.5,0.5">
  164. <Rectangle.RenderTransform>
  165. <TransformGroup>
  166. <ScaleTransform/>
  167. <SkewTransform/>
  168. <RotateTransform/>
  169. <TranslateTransform/>
  170. </TransformGroup>
  171. </Rectangle.RenderTransform>
  172. </Rectangle>
  173. <Rectangle x:Name="rectangle2" Margin="0 3 0 0" Height="2" Fill="#FF51A4DE" Width="19" Opacity="0.65" RenderTransformOrigin="0.5,0.5">
  174. <Rectangle.RenderTransform>
  175. <TransformGroup>
  176. <ScaleTransform/>
  177. <SkewTransform/>
  178. <RotateTransform/>
  179. <TranslateTransform/>
  180. </TransformGroup>
  181. </Rectangle.RenderTransform>
  182. </Rectangle>
  183. </StackPanel>
  184. </StackPanel>
  185. <StackPanel Margin="0 2 0 0" Orientation="Vertical">
  186. <Rectangle x:Name="rectangle3" Height="2" Fill="#FF51A4DE" Width="30" Opacity="0.65" RenderTransformOrigin="0.5,0.5">
  187. <Rectangle.RenderTransform>
  188. <TransformGroup>
  189. <ScaleTransform/>
  190. <SkewTransform/>
  191. <RotateTransform/>
  192. <TranslateTransform/>
  193. </TransformGroup>
  194. </Rectangle.RenderTransform>
  195. </Rectangle>
  196. <Rectangle x:Name="rectangle4" Margin="0 2 0 0" Height="2" Fill="#FF51A4DE" Width="30" Opacity="0.65" RenderTransformOrigin="0.5,0.5">
  197. <Rectangle.RenderTransform>
  198. <TransformGroup>
  199. <ScaleTransform/>
  200. <SkewTransform/>
  201. <RotateTransform/>
  202. <TranslateTransform/>
  203. </TransformGroup>
  204. </Rectangle.RenderTransform>
  205. </Rectangle>
  206. </StackPanel>
  207. </StackPanel>
  208. </Border>
  209. </Grid>
  210. </Grid>
  211. <ContentPresenter x:Name="contentPresenter" RecognizesAccessKey="True"
  212. SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="center" RenderTransformOrigin="0.5,0.5">
  213. <ContentPresenter.RenderTransform>
  214. <TransformGroup>
  215. <ScaleTransform/>
  216. <SkewTransform/>
  217. <RotateTransform/>
  218. <TranslateTransform/>
  219. </TransformGroup>
  220. </ContentPresenter.RenderTransform>
  221. </ContentPresenter>
  222. <TextBlock x:Name="textBlock" TextElement.FontSize="20" Margin="10" TextElement.Foreground="White" Text="{TemplateBinding Tag}" VerticalAlignment="Bottom" HorizontalAlignment="left" RenderTransformOrigin="0,1">
  223. <TextBlock.RenderTransform>
  224. <TransformGroup>
  225. <ScaleTransform/>
  226. <SkewTransform/>
  227. <RotateTransform/>
  228. <TranslateTransform/>
  229. </TransformGroup>
  230. </TextBlock.RenderTransform></TextBlock>
  231.  
  232. </Grid>
  233. <ControlTemplate.Triggers>
  234. <Trigger Property="IsPressed" Value="True">
  235. <Trigger.ExitActions>
  236. <BeginStoryboard x:Name="Storyboard_Copy2_BeginStoryboard" Storyboard="{StaticResource Storyboard_Copy2}"/>
  237. </Trigger.ExitActions>
  238. <Trigger.EnterActions>
  239. <BeginStoryboard x:Name="Storyboard2_BeginStoryboard" Storyboard="{StaticResource Storyboard2}"/>
  240. </Trigger.EnterActions>
  241. </Trigger>
  242. <EventTrigger RoutedEvent="FrameworkElement.Loaded"/>
  243. <Trigger Property="IsMouseOver" Value="True">
  244. <Trigger.ExitActions>
  245. <BeginStoryboard x:Name="Storyboard_Copy1_BeginStoryboard" Storyboard="{StaticResource Storyboard_Copy3}"/>
  246. </Trigger.ExitActions>
  247. <Trigger.EnterActions>
  248. <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
  249. </Trigger.EnterActions>
  250. </Trigger>
  251. <Trigger Property="IsKeyboardFocused" Value="true"/>
  252. <Trigger Property="ToggleButton.IsChecked" Value="true"/>
  253. <Trigger Property="IsEnabled" Value="false"/>
  254.  
  255. </ControlTemplate.Triggers>
  256. </ControlTemplate>
  257. </Setter.Value>
  258. </Setter>
  259. </Style>

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

使用方法:

  1. <Button Tag="待办事项" Height="200" Width="200" Style="{DynamicResource MetroButtonStyle}">
  2. <Button.Background>
  3. <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  4. <GradientStop Color="#d04f8f" Offset="1"/>
  5. <GradientStop Color="#c84f89"/>
  6. </LinearGradientBrush>
  7. </Button.Background>
  8. </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. Eclipse+Tomcat搭建https环境

    一.首先在本地建立一个keystore文件 用命令:keytool -v -genkey -alias tomcat -keyalg RSA -keystore c:/tomcat.keystore ...

  2. php 添加钩子实例

    <?php/*定义钩子函数*/function add($hook,$actionFunc){    global $emHooks;    if(isset($emHooks[$hook])) ...

  3. maven clean deploy -Pproduction

    今天我修改了公司的组件,要发布.然后腾飞告诉我用这个命令:clean deploy -Pproduction发布. 然后报了个401错误.(当时还是不知道401是什么错)正好经理在旁边问了一下,没想到 ...

  4. 使用cocos2d-x3.4结合cocos2.1.5制作小游戏《亲亲小熊》

    在最新的cocos集成环境中,CocosStudio已经集成到cocos中了,至于界面的制作和编辑器的基本使用在cocos官网有详细教程, 这里就不细说,资源下载和详情请参看官网教程:http://c ...

  5. Android proguard 详解

    本文转载于:http://blog.csdn.net/banketree/article/details/41928175 简介 Java代码是非常容易反编译的.为了很好的保护Java源代码,我们往往 ...

  6. How To: Samba4 AD PDC + Windows XP, Vista and 7

    dnsmasq If you've been struggling with Samba3 domain controllers and NT4 style domains working with ...

  7. python logging bydate

    #!/usr/bin/env python #_*_coding:utf-8_*_ # vim : set expandtab ts=4 sw=4 sts=4 tw=100 : import logg ...

  8. JAVA 嵌套类和内部类

    一.什么是嵌套类及内部类?  可以在一个类的内部定义另一个类,这种类称为嵌套类(nested classes),它有两种类型:  静态嵌套类和非静态嵌套类.静态嵌套类使用很少,最重要的是非静态嵌套类, ...

  9. asp.net mvc js 获取model值。

    cshtml页面部分代码: div class="col-sub">          @using (Html.BeginForm("SaveTTMallConf ...

  10. 红外遥控NEC协议使用总结

    最近做了一个调试红外遥控三色灯的实习,花了一个多月的时间研究基于NEC协议的红外遥控,下面是这次实习技术方面的总结. 一.NEC协议特征: 8位地址和8位命令长度 每次传输两遍地址(用户码)和命令(按 ...