Metro Win8风格的按钮（Filp翻转）

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

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

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

外观简单，制作也十分简单：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>

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

时间： 2024-10-06 21:11:45

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

HteOS - Win8 Metro UI 风格的Web桌面

HteOS是一款Win8 Metro UI风格的Web桌面应用开发框架 现代的.简约的界面,丰富的组件.功能,全新的Web桌面 全新的Web桌面应用开发框架 全新设计 全新的Web桌面设计,告别古板与生硬 Win8 Metro风格界面,动态磁贴灵动轻巧 二次开发 应用场景广泛,能够适用各种项目兼容IE8+浏览器,快速进行二次开发 应用部署 没有环境限制,可以在任何平台进行部署不需要进行额外的部署设置,即插即用 不拘泥于平庸的Web桌面设计 卡片布局 Metro风格的卡片布局,不再是审美疲劳的树状

漂亮的win8风格网页(Metro Style web)

漂亮的win8风格网页(Metro Style web)

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

http://www.cnblogs.com/lhb25/archive/2013/04/11/10-metro-bootstraps-ui-templates.html Metro UI 是一种界面展示技术,是 Windows 8 的主要界面显示风格.Metro 界面和 iOS.Android 界面最大的区别在于:后两种都是以应用为主要呈现对象,而 Metro 界面强调的是信息本身,而不是冗余的界面元素.同时在视觉效果方面,这有助于形成一种身临其境的感觉. 如果你的下一个网站项目或 Web 应

精仿win8风格简约迷你风格扁平化html5网站模版

这是缩略图 模版采用html5设计,仿win8菜单特效,扁平化处理 下载地址:精仿win8风格网站模版 精仿win8风格简约迷你风格扁平化html5网站模版,布布扣,bubuko.com

自编Win8风格Android音乐播放器应用源码（单机版）

用闲暇的两天时间,研究编写了一个类Win8风格的android音乐播放器,实现了大部分基本功能.下面看具体描述: 基本实现功能:注意事项:Android系统版本须在2.2以上,保证手机安装有SD卡(部分图标来至qq音乐和百度音乐)界面组成:欢迎界面:淡入,随机图片 由于代码不少,所以在这里贴出来也不太现实,嗯,那就上链结吧,请各位到源码天堂网站上下载吧: http://code.662p.com/view/4733.html 主界面:4个tab标签页,4宫格: --  歌曲列表界面:从sd卡中扫

ios按钮点击后翻转效果

代码是网上找到的,不过找到的时候直接复制下来不能用,稍微整理下,为和我一样水平的菜鸟观摩一下下. (1)引入“QuartzCore.framework”库,头部引用. C代码   #include<QuartzCore/CoreAnimation.h> (2)直接上代码,你懂的. C代码   -(IBAction)buttonP:(id)sender{ [self buttonAnimation:sender]; } - (CAAnimation *) animationRotate { CA

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

导语 - 作为 BI 系统前端展现的报表,其重要性不言而喻,我们对于一个好的报表的要求也无非主要包含以下几点: 1. 数据完整和正确,数据质量没有问题 2. 友好的清晰的界面,整洁美观,有得体的格式 3. 有很好的交互性和用户体验感,用户能够很容易找到需要的重要的数据 但是在微软体系下的 BI 开发人员,特别是 SSRS 报表开发人员对于报表的设计我想都有一个共同的感受:"报表设计出来了,很难看!交互性差!". 也就是说,在上面提到的 3 点中,微软 SSRS 报表的非常直观的缺陷就是

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

今天在Win8下使用了一个我之前写的一个WPF程序的时候,发现现在也支持Win8效果了(记得以前的.net 4.0的版本是不支持的).由于WPF的控件是自绘的,并不受系统主题所控制,也就是说.net 4.5中是附带了Win8主题样式文件的,按理说这个风格在Win7下也可以使用的.研究了一下发现,默认主题是存放在如下几个DLL文件中的, 程序启动的时候,默认会根据系统的版本加载相应的主题.例如Win8就加载AeroLite.dll,Win7就加载Aero.dll.用ILSpy可以看到其具体的路径

win8.1 开始按钮和charm栏无法点击及激活的解决办法

衰,刚开博怎么就成了常用问题解决汇总了,我不是这个目的呀蛋疼 -,- 估计还是自己太挑的缘故,容忍不了一点儿点儿的问题存在,不解决不舒服斯基. win8用了很久了,升级win8.1后有个问题在最近几个月时而出现很是蛋疼,就是开始菜单的按钮失效,点了弹不出开始屏幕(移上去就没动画反应,被锁定了似的),鼠标指向右上角右下角也召唤不出charm栏,只能通过键盘的win和win+c来激活,而且这问题出现频率完全无法掌握,很久都只能通过重启explorer来暂时解决但无法根治. 百度谷歌搜索了半天也死活找