Metro Win8風格的按鈕（Filp翻轉） 原文: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> View Code

里面凌亂的名字，請忽略吧，都是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>

顏色和大小請隨意。中間圖形可以用其他內容代替！

posted on 2019-04-18 11:29 NET未來之路 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/lonelyxmas/p/10728583.html

總結

以上是生活随笔為你收集整理的Metro Win8风格的按钮（Filp翻转）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。