效果图:

还在羡慕metro的ProgressRing吗？

wpf 也可以拥有

首先说下思路，

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

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

首先是xaml 部分

我们需要实现旋转动画：

所以要用到这个：

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

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

代码如下：

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

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

  1. <DoubleAnimationUsingKeyFrames
  2. Storyboard.TargetProperty="Opacity">
  3. <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
  4. <EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.2">
  5. <EasingDoubleKeyFrame.EasingFunction>
  6. <BackEase EasingMode="EaseInOut"/>
  7. </EasingDoubleKeyFrame.EasingFunction>
  8. </EasingDoubleKeyFrame>
  9. <EasingDoubleKeyFrame Value="1" KeyTime="0:0:1.6">
  10. </EasingDoubleKeyFrame>
  11. <EasingDoubleKeyFrame Value="1" KeyTime="0:0:1.8">
  12. </EasingDoubleKeyFrame>
  13. <LinearDoubleKeyFrame Value="1" KeyTime="0:0:3.2"/>
  14. <EasingDoubleKeyFrame Value="0" KeyTime="0:0:3.5">
  15. <EasingDoubleKeyFrame.EasingFunction>
  16. <BackEase EasingMode="EaseOut"/>
  17. </EasingDoubleKeyFrame.EasingFunction>
  18. </EasingDoubleKeyFrame>
  19. <EasingDoubleKeyFrame Value="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. <Storyboard x:Key="Trans" RepeatBehavior="Forever">
  13. <DoubleAnimationUsingKeyFrames
  14. Storyboard.TargetProperty="(Ellipse.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
  15. <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
  16. <EasingDoubleKeyFrame Value="90" KeyTime="0:0:0.2">
  17. </EasingDoubleKeyFrame>
  18. <EasingDoubleKeyFrame Value="270" KeyTime="0:0:1.6">
  19. </EasingDoubleKeyFrame>
  20. <EasingDoubleKeyFrame Value="450" KeyTime="0:0:1.8">
  21. </EasingDoubleKeyFrame>
  22. <LinearDoubleKeyFrame Value="630" KeyTime="0:0:3.2"/>
  23. <EasingDoubleKeyFrame Value="720" KeyTime="0:0:3.4">
  24. </EasingDoubleKeyFrame>
  25. <EasingDoubleKeyFrame Value="720" KeyTime="0:0:5.0">
  26. </EasingDoubleKeyFrame>
  27. </DoubleAnimationUsingKeyFrames>
  28. <DoubleAnimationUsingKeyFrames
  29. Storyboard.TargetProperty="Opacity">
  30. <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
  31. <EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.2">
  32. <EasingDoubleKeyFrame.EasingFunction>
  33. <BackEase EasingMode="EaseInOut"/>
  34. </EasingDoubleKeyFrame.EasingFunction>
  35. </EasingDoubleKeyFrame>
  36. <EasingDoubleKeyFrame Value="1" KeyTime="0:0:1.6">
  37. </EasingDoubleKeyFrame>
  38. <EasingDoubleKeyFrame Value="1" KeyTime="0:0:1.8">
  39. </EasingDoubleKeyFrame>
  40. <LinearDoubleKeyFrame Value="1" KeyTime="0:0:3.2"/>
  41. <EasingDoubleKeyFrame Value="0" KeyTime="0:0:3.5">
  42. <EasingDoubleKeyFrame.EasingFunction>
  43. <BackEase EasingMode="EaseOut"/>
  44. </EasingDoubleKeyFrame.EasingFunction>
  45. </EasingDoubleKeyFrame>
  46. <EasingDoubleKeyFrame Value="0" KeyTime="0:0:5.0">
  47. </EasingDoubleKeyFrame>
  48. </DoubleAnimationUsingKeyFrames>
  49. </Storyboard>
  50. </UserControl.Resources>
  51. <Canvas>
  52. <Ellipse x:Name="el" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" >
  53. <Ellipse.RenderTransform>
  54. <TransformGroup>
  55. <ScaleTransform/>
  56. <SkewTransform/>
  57. <RotateTransform CenterX="-20" CenterY="-40"/>
  58. <TranslateTransform/>
  59. </TransformGroup>
  60. </Ellipse.RenderTransform>
  61. </Ellipse>
  62. <Ellipse x: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. <RotateTransform CenterX="-20" CenterY="-40"/>
  68. <TranslateTransform/>
  69. </TransformGroup>
  70. </Ellipse.RenderTransform>
  71. </Ellipse>
  72. <Ellipse x: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. <RotateTransform CenterX="-20" CenterY="-40"/>
  78. <TranslateTransform/>
  79. </TransformGroup>
  80. </Ellipse.RenderTransform>
  81. </Ellipse>
  82. <Ellipse x: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. <RotateTransform CenterX="-20" CenterY="-40"/>
  88. <TranslateTransform/>
  89. </TransformGroup>
  90. </Ellipse.RenderTransform>
  91. </Ellipse>
  92. <Ellipse x: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. <RotateTransform CenterX="-20" CenterY="-40"/>
  98. <TranslateTransform/>
  99. </TransformGroup>
  100. </Ellipse.RenderTransform>
  101. </Ellipse>
  102. <Ellipse x: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. <RotateTransform CenterX="-20" CenterY="-40"/>
  108. <TranslateTransform/>
  109. </TransformGroup>
  110. </Ellipse.RenderTransform>
  111. </Ellipse>
  112. </Canvas>
  113. </UserControl>
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Threading;
  6. using System.Threading.Tasks;
  7. using System.Windows;
  8. using System.Windows.Controls;
  9. using System.Windows.Data;
  10. using System.Windows.Documents;
  11. using System.Windows.Input;
  12. using System.Windows.Media;
  13. using System.Windows.Media.Animation;
  14. using System.Windows.Media.Imaging;
  15. using System.Windows.Navigation;
  16. using System.Windows.Shapes;
  17. namespace Transvalue.MetroStyleBusyIndicator
  18. {
  19. /// <summary>
  20. /// MetroRotaionIndicator.xaml 的交互逻辑
  21. /// </summary>
  22. public partial class MetroRotaionIndicator : UserControl
  23. {
  24. Storyboard trans;
  25. public MetroRotaionIndicator()
  26. {
  27. InitializeComponent();
  28. trans = Resources["Trans"] as Storyboard;
  29. this.Loaded += ((sender, e) =>
  30. {
  31. Active();
  32. });
  33. }
  34. public async void Active()
  35. {
  36. el.BeginStoryboard(trans);
  37. await Task.Delay(170);
  38. el2.BeginStoryboard(trans);
  39. await Task.Delay(170);
  40. el3.BeginStoryboard(trans);
  41. await Task.Delay(170);
  42. el4.BeginStoryboard(trans);
  43. await Task.Delay(170);
  44. el5.BeginStoryboard(trans);
  45. await Task.Delay(170);
  46. el6.BeginStoryboard(trans);
  47. }
  48. public void Stop()
  49. {
  50. trans.Stop(el);
  51. trans.Stop(el2);
  52. trans.Stop(el3);
  53. trans.Stop(el4);
  54. trans.Stop(el5);
  55. trans.Stop(el6);
  56. }
  57. }
  58. }

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

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

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

手把手教你 用 wpf 制作metro ProgressRing (Windows8 等待动画）的更多相关文章

  1. [Swift通天遁地]一、超级工具-(11)使用EZLoadingActivity制作Loading加载等待动画

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  3. 手把手教你制作AppPreview视频并上传到appStore进行审核

    手把手教你制作AppPreview视频并上传到appStore进行审核 注意,你需要使用iMovie才能够制作AppPreview视频文件,用QuickTime录制的无效! 最终效果 1. 新建一个事 ...

  4. PWA入门：手把手教你制作一个PWA应用

    摘要: PWA图文教程 原文:PWA入门:手把手教你制作一个PWA应用 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 简介 Web前端的同学是否想过学习app开发,以弥补自 ...

  5. 手把手教你去ECSHOP版权 powered by ecshop

      各位朋友大家好,欢迎来到ecshop开发中心系列视频教程:ecshop去版权.去版权是一种很常见的问题,有很多客户提到ECSHOP如何去版权?怎样去得干净.去得彻底?今天,ECSHOP开发中心手把 ...

  6. 手把手教你ranorex_android自动化测试第一个示例

    要说android的自动化,那真是折腾死我了,从早期的monkeyrunner,到后来的robotium,再到最新的uiautomator,各有各的问题,总之性价比都不够高,不太适合我的使用场景.于是 ...

  7. C#:手把手教你用C#打包应用程序(安装程序卸载程序)

    摘要:本文介绍在C#中手把手教你用C#打包应用程序(安装程序卸载程序) 1:新建安装部署项目 打开VS,点击新建项目,选择:其他项目类型->安装与部署->安装向导(安装项目也一样),然后点 ...

  8. 手把手教你玩转CSS3 3D技术

    手把手教你玩转 CSS3 3D 技术   要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上 ...

  9. 手把手教你DIY尼康ML-L3红外遥控器

    项目介绍 ML-L3是用于尼康部分型号相机的无线红外遥控器,可以通过红外方式来控制快门的释放,支持B门拍摄.官方售价100RMB左右,山寨版售价10RMB左右.虽然也能实现基本的遥控功能,但是功能还是 ...

随机推荐

  1. C语言课程1——Hello World

    相信大家看了第一篇文章后,都信心满满,后边咱来点实际吧,上代码,经典之作:Hello World. 首先,不知道大家用的什么工具,VC6.0(太老了,强烈建议不用),VS,或是其他~ Hello Wo ...

  2. setVolumeControlStream(int streamType)

    Android中有如下几种音频流: AudioManager.STREAM_MUSIC  /** The audio stream for music playback */ AudioManager ...

  3. (转)女生应该找一个玩ACM的男生

    1.强烈的事业心 将来,他也一定会有自己热爱的事业.而且,男人最性感的时刻之一,就是他专心致志做事的时候.所以,找一个机会在他全神贯注玩ACM的时候,从侧面好好观察他,你就会发现我说的话没错. 2.永 ...

  4. ubuntu 桌面版性能调优

    http://www.howtogeek.com/115797/6-ways-to-speed-up-ubuntu/

  5. 如何选择Html.RenderPartial和Html.RenderAction

    Html.RenderPartial与Html.RenderAction这两个方法都是用来在界面上嵌入用户控件的. Html.RenderPartial是直接将用户控件嵌入到界面上: <%Htm ...

  6. Repeated DNA Sequences

    All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: "ACG ...

  7. codeforces 459C Pashmak and Buses 解题报告

    题目链接:http://codeforces.com/problemset/problem/459/C 题目意思:有 n 个 students,k 辆 buses.问是否能对 n 个students安 ...

  8. Ubuntu安装steam游戏平台的解决方案

    steam是一个游戏平台,上面提供了很多收费和免费的游戏,在安装的过程中遇到了一些问题,所以把自己遇到的问题及解决方案分享出来供大家参考. 第一步:安装steam平台 sudo apt-get ins ...

  9. 关于struts 2中的日期问题

    struts 2中引入了大量的jquery的内容 其中日期问题总结一下: 步骤: 1.当然不用说,先建一个web项目 2.导入struts2所需要的jar包,以及此插件的包(当然你也可以用:strut ...

  10. Fresco 源码分析(一) DraweeView-DraweeHierarchy-DraweeController(MVC) DraweeHierachy+DraweeController的分析

    4.1.5.2 模型层DraweeHierachy继承体系以及各个类的作用 DraweeHierachy (I) --| SettableDraweeHierarchy (I) ------| Gen ...