思享工具箱

手把手教你 用 wpf 制作metro ProgressRing (Windows8 等待动画）

摘要：
wpf也可以拥有首先说下思路，一共6个点围绕一直圆转，所以需要使用rotation动画并且一直转下去。那么下面的问题就好解决了。首先是xaml部分我们需要实现旋转动画：所以要用到这个：[html]viewplaincopyprint?上面这一段是单个ellipse的运动轨迹，当然你需要在属性中设置他的中心点值代码如下：[html]viewplaincopyprint?接下来的事情就好办了，我们需要他转1圈就消失结束后也消失，所以需要控制透明度，[html]viewplaincopyprint?

效果图:

手把手教你 用 wpf 制作metro ProgressRing (Windows8 等待动画）第1张

还在羡慕metro的ProgressRing吗？

wpf 也可以拥有

首先说下思路，

一共6个点围绕一直圆转，所以需要使用rotation动画 并且一直转下去。

那么下面的问题就好解决了。

首先是xaml 部分

我们需要实现旋转动画：

所以要用到这个：

  1. <DoubleAnimationUsingKeyFrames
  2. Storyboard.TargetProperty="(Ellipse.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
  3. <LinearDoubleKeyFrameValue="0"KeyTime="0:0:0"/>
  4. <EasingDoubleKeyFrameValue="90"KeyTime="0:0:0.2">
  5. </EasingDoubleKeyFrame>
  6. <EasingDoubleKeyFrameValue="270"KeyTime="0:0:1.6">
  7. </EasingDoubleKeyFrame>
  8. <EasingDoubleKeyFrameValue="450"KeyTime="0:0:1.8">
  9. </EasingDoubleKeyFrame>
  10. <LinearDoubleKeyFrameValue="630"KeyTime="0:0:3.2"/>
  11. <EasingDoubleKeyFrameValue="720"KeyTime="0:0:3.4">
  12. </EasingDoubleKeyFrame>
  13. <EasingDoubleKeyFrameValue="720"KeyTime="0:0:5.0">
  14. </EasingDoubleKeyFrame>
  15. </DoubleAnimationUsingKeyFrames>

上面这一段是单个ellipse的运动轨迹，当然你需要在属性中设置他的中心点值

代码如下：

  1. <Ellipsex:Name="el"Width="10"Height="10"Fill="White"Canvas.Left="73"Canvas.Top="57">
  2. <Ellipse.RenderTransform>
  3. <TransformGroup>
  4. <ScaleTransform/>
  5. <SkewTransform/>
  6. <RotateTransformCenterX="-20"CenterY="-40"/>
  7. <TranslateTransform/>
  8. </TransformGroup>
  9. </Ellipse.RenderTransform>
  10. </Ellipse>

接下来的事情就好办了，我们需要他转1圈就消失 结束后也消失，所以需要控制透明度，

  1. <DoubleAnimationUsingKeyFrames
  2. Storyboard.TargetProperty="Opacity">
  3. <LinearDoubleKeyFrameValue="0"KeyTime="0:0:0"/>
  4. <EasingDoubleKeyFrameValue="1"KeyTime="0:0:0.2">
  5. <EasingDoubleKeyFrame.EasingFunction>
  6. <BackEaseEasingMode="EaseInOut"/>
  7. </EasingDoubleKeyFrame.EasingFunction>
  8. </EasingDoubleKeyFrame>
  9. <EasingDoubleKeyFrameValue="1"KeyTime="0:0:1.6">
  10. </EasingDoubleKeyFrame>
  11. <EasingDoubleKeyFrameValue="1"KeyTime="0:0:1.8">
  12. </EasingDoubleKeyFrame>
  13. <LinearDoubleKeyFrameValue="1"KeyTime="0:0:3.2"/>
  14. <EasingDoubleKeyFrameValue="0"KeyTime="0:0:3.5">
  15. <EasingDoubleKeyFrame.EasingFunction>
  16. <BackEaseEasingMode="EaseOut"/>
  17. </EasingDoubleKeyFrame.EasingFunction>
  18. </EasingDoubleKeyFrame>
  19. <EasingDoubleKeyFrameValue="0"KeyTime="0:0:5.0">
  20. </EasingDoubleKeyFrame>
  21. </DoubleAnimationUsingKeyFrames>

最终把一个圆变成多个圆的工作 就交给代码了，需要一点点小技巧 以下使用.net 4.5实现 其他版本可以吧Task.Delay 替换成Thread.Sleep

  1. <UserControl
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  5. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  6. xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
  7. xmlns:local="clr-namespace:Transvalue.MetroStyleBusyIndicator"
  8. x:Class="Transvalue.MetroStyleBusyIndicator.MetroRotaionIndicator"
  9. mc:Ignorable="d"
  10. d:DesignHeight="300"d:DesignWidth="300">
  11. <UserControl.Resources>
  12. <Storyboardx:Key="Trans"RepeatBehavior="Forever">
  13. <DoubleAnimationUsingKeyFrames
  14. Storyboard.TargetProperty="(Ellipse.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
  15. <LinearDoubleKeyFrameValue="0"KeyTime="0:0:0"/>
  16. <EasingDoubleKeyFrameValue="90"KeyTime="0:0:0.2">
  17. </EasingDoubleKeyFrame>
  18. <EasingDoubleKeyFrameValue="270"KeyTime="0:0:1.6">
  19. </EasingDoubleKeyFrame>
  20. <EasingDoubleKeyFrameValue="450"KeyTime="0:0:1.8">
  21. </EasingDoubleKeyFrame>
  22. <LinearDoubleKeyFrameValue="630"KeyTime="0:0:3.2"/>
  23. <EasingDoubleKeyFrameValue="720"KeyTime="0:0:3.4">
  24. </EasingDoubleKeyFrame>
  25. <EasingDoubleKeyFrameValue="720"KeyTime="0:0:5.0">
  26. </EasingDoubleKeyFrame>
  27. </DoubleAnimationUsingKeyFrames>
  28. <DoubleAnimationUsingKeyFrames
  29. Storyboard.TargetProperty="Opacity">
  30. <LinearDoubleKeyFrameValue="0"KeyTime="0:0:0"/>
  31. <EasingDoubleKeyFrameValue="1"KeyTime="0:0:0.2">
  32. <EasingDoubleKeyFrame.EasingFunction>
  33. <BackEaseEasingMode="EaseInOut"/>
  34. </EasingDoubleKeyFrame.EasingFunction>
  35. </EasingDoubleKeyFrame>
  36. <EasingDoubleKeyFrameValue="1"KeyTime="0:0:1.6">
  37. </EasingDoubleKeyFrame>
  38. <EasingDoubleKeyFrameValue="1"KeyTime="0:0:1.8">
  39. </EasingDoubleKeyFrame>
  40. <LinearDoubleKeyFrameValue="1"KeyTime="0:0:3.2"/>
  41. <EasingDoubleKeyFrameValue="0"KeyTime="0:0:3.5">
  42. <EasingDoubleKeyFrame.EasingFunction>
  43. <BackEaseEasingMode="EaseOut"/>
  44. </EasingDoubleKeyFrame.EasingFunction>
  45. </EasingDoubleKeyFrame>
  46. <EasingDoubleKeyFrameValue="0"KeyTime="0:0:5.0">
  47. </EasingDoubleKeyFrame>
  48. </DoubleAnimationUsingKeyFrames>
  49. </Storyboard>
  50. </UserControl.Resources>
  51. <Canvas>
  52. <Ellipsex:Name="el"Width="10"Height="10"Fill="White"Canvas.Left="73"Canvas.Top="57">
  53. <Ellipse.RenderTransform>
  54. <TransformGroup>
  55. <ScaleTransform/>
  56. <SkewTransform/>
  57. <RotateTransformCenterX="-20"CenterY="-40"/>
  58. <TranslateTransform/>
  59. </TransformGroup>
  60. </Ellipse.RenderTransform>
  61. </Ellipse>
  62. <Ellipsex:Name="el2"Width="10"Height="10"Fill="White"Canvas.Left="73"Canvas.Top="57"Opacity="0">
  63. <Ellipse.RenderTransform>
  64. <TransformGroup>
  65. <ScaleTransform/>
  66. <SkewTransform/>
  67. <RotateTransformCenterX="-20"CenterY="-40"/>
  68. <TranslateTransform/>
  69. </TransformGroup>
  70. </Ellipse.RenderTransform>
  71. </Ellipse>
  72. <Ellipsex:Name="el3"Width="10"Height="10"Fill="White"Canvas.Left="73"Canvas.Top="57"Opacity="0">
  73. <Ellipse.RenderTransform>
  74. <TransformGroup>
  75. <ScaleTransform/>
  76. <SkewTransform/>
  77. <RotateTransformCenterX="-20"CenterY="-40"/>
  78. <TranslateTransform/>
  79. </TransformGroup>
  80. </Ellipse.RenderTransform>
  81. </Ellipse>
  82. <Ellipsex:Name="el4"Width="10"Height="10"Fill="White"Canvas.Left="73"Canvas.Top="57"Opacity="0">
  83. <Ellipse.RenderTransform>
  84. <TransformGroup>
  85. <ScaleTransform/>
  86. <SkewTransform/>
  87. <RotateTransformCenterX="-20"CenterY="-40"/>
  88. <TranslateTransform/>
  89. </TransformGroup>
  90. </Ellipse.RenderTransform>
  91. </Ellipse>
  92. <Ellipsex:Name="el5"Width="10"Height="10"Fill="White"Canvas.Left="73"Canvas.Top="57"Opacity="0">
  93. <Ellipse.RenderTransform>
  94. <TransformGroup>
  95. <ScaleTransform/>
  96. <SkewTransform/>
  97. <RotateTransformCenterX="-20"CenterY="-40"/>
  98. <TranslateTransform/>
  99. </TransformGroup>
  100. </Ellipse.RenderTransform>
  101. </Ellipse>
  102. <Ellipsex:Name="el6"Width="10"Height="10"Fill="White"Canvas.Left="73"Canvas.Top="57"Opacity="0">
  103. <Ellipse.RenderTransform>
  104. <TransformGroup>
  105. <ScaleTransform/>
  106. <SkewTransform/>
  107. <RotateTransformCenterX="-20"CenterY="-40"/>
  108. <TranslateTransform/>
  109. </TransformGroup>
  110. </Ellipse.RenderTransform>
  111. </Ellipse>
  112. </Canvas>
  113. </UserControl>
  1. usingSystem;
  2. usingSystem.Collections.Generic;
  3. usingSystem.Linq;
  4. usingSystem.Text;
  5. usingSystem.Threading;
  6. usingSystem.Threading.Tasks;
  7. usingSystem.Windows;
  8. usingSystem.Windows.Controls;
  9. usingSystem.Windows.Data;
  10. usingSystem.Windows.Documents;
  11. usingSystem.Windows.Input;
  12. usingSystem.Windows.Media;
  13. usingSystem.Windows.Media.Animation;
  14. usingSystem.Windows.Media.Imaging;
  15. usingSystem.Windows.Navigation;
  16. usingSystem.Windows.Shapes;
  18. namespaceTransvalue.MetroStyleBusyIndicator
  19. {
  20. ///<summary>
  21. ///MetroRotaionIndicator.xaml的交互逻辑
  22. ///</summary>
  23. publicpartialclassMetroRotaionIndicator:UserControl
  24. {
  25. Storyboardtrans;
  26. publicMetroRotaionIndicator()
  27. {
  28. InitializeComponent();
  29. trans=Resources["Trans"]asStoryboard;
  30. this.Loaded+=((sender,e)=>
  31. {
  32. Active();
  33. });
  34. }
  36. publicasyncvoidActive()
  37. {
  38. el.BeginStoryboard(trans);
  39. awaitTask.Delay(170);
  40. el2.BeginStoryboard(trans);
  41. awaitTask.Delay(170);
  42. el3.BeginStoryboard(trans);
  43. awaitTask.Delay(170);
  44. el4.BeginStoryboard(trans);
  45. awaitTask.Delay(170);
  46. el5.BeginStoryboard(trans);
  47. awaitTask.Delay(170);
  48. el6.BeginStoryboard(trans);
  49. }
  51. publicvoidStop()
  52. {
  53. trans.Stop(el);
  54. trans.Stop(el2);
  55. trans.Stop(el3);
  56. trans.Stop(el4);
  57. trans.Stop(el5);
  58. trans.Stop(el6);
  59. }
  62. }
  63. }

将以上内容编译成用户控件即可使用。

xmlns:MetroStyleBusyIndicator="clr-namespace:Transvalue.MetroStyleBusyIndicator;assembly=Transvalue.MetroStyleBusyIndicator"

<MetroStyleBusyIndicator:MetroRotaionIndicator HorizontalAlignment="Left" Margin="924,534,0,0" VerticalAlignment="Top" />

标签：#metro#top#wpf | 浏览：227 | 发布日期：

免责声明：文章转载自《手把手教你 用 wpf 制作metro ProgressRing (Windows8 等待动画）》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇IOS Exception 1(libc++abi.dylib: terminating with uncaught exception of type NSException)Java的定时调度下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

使用WPF动态生成Code 39条形码

最近在看些条形码方面相关的资料，而如果只是看的话，效果似乎并不怎么好，所以决定动手做点Demo，以增强对相关知识的记忆。 这里是一个我编写的使用WPF生成Code 39的例子，Code 39的编码很简单，故而第一次先用它做为尝试。 标准的Code 39只支持43个字符，0~9，A~Z，-，.，$， /， +， %以及空格。除此之外，*用于起始和终止符号。而...

WPF 附加属性的用法 (一)

public class MDCTest { public static DependencyProperty MouseDoubleClickCommandProperty = DependencyProperty.RegisterAttached( "MouseDoubleClick",...

WPF 自定义快捷键命令（Command）

本文来自：http://tech.ddvip.com/2010-07/1279771103157919_2.html 命令简介 WPF 中的命令是通过实现 ICommand 接口创建的。ICommand 公开两个方法（Execute 及 CanExecute）和一个事件（CanExecuteChanged）。 Execute 执行与命令关联的操作。CanE...

一个简单的WPF MVVM实例【转载】

引用地址：http://blog.csdn.net/yl2isoft/article/details/20838149 1新建WPF应用程序WPFMVVMExample 程序结构如下图所示。 2Model实现 在Model文件夹下新建业务类StudentModel（类文件StudentModel.cs），类的详细代码如下所示。 [csharp]vie...

JQuery元素滚动定位及获取元素的scrollTop，clientHeight，scrollHeight

scrollHeight为滚动DIV的实际总体高度，获取方式为：$(obj)[0].scrollHeight clientHeight为滚动DIV的可见高度，获取方式为：$(obj)[0].clientHeight scrollTop为滚动DIV被卷去的上端高度，获取方式为：$(obj).scrollTop offset为元素的偏移量，获取方式为：$(o...

在html页面中引入另一个html页面

我们在使用html编写一个网站的时候，通常情况下头部和尾部是相同的，如果一个网站的每个页面都把这些代码写一遍，不仅浪费时间，还显得重复代码很多，所以此时把重复的页面单独摘出来，在用到的时候从外部直接引进去，就能节省很多时间，减少很多代码。 在这里，有好几种引入html文件的方式，不过每种都是有利有弊，需要根据需要自行选择 如果有些浏览器本地实现不了，那么放...

最新文章

随机推荐

思享工具箱导航