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

效果图:

还在羡慕metro的ProgressRing吗？

wpf 也可以拥有

首先说下思路，

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

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

首先是xaml 部分

我们需要实现旋转动画：

所以要用到这个：

[html] view plaincopyprint?
 
  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的运动轨迹，当然你需要在属性中设置他的中心点值

代码如下：

[html] view plaincopyprint?
 
  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圈就消失 结束后也消失，所以需要控制透明度，

[html] view plaincopyprint?
 
  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

[html] view plaincopyprint?
 
  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>  


 

[csharp] view plaincopyprint?
 
  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.   
  18. namespace Transvalue.MetroStyleBusyIndicator  
  19. {  
  20.     /// <summary>  
  21.     /// MetroRotaionIndicator.xaml 的交互逻辑  
  22.     /// </summary>  
  23.     public partial class MetroRotaionIndicator : UserControl  
  24.     {  
  25.         Storyboard trans;  
  26.         public MetroRotaionIndicator()  
  27.         {  
  28.             InitializeComponent();  
  29.             trans = Resources["Trans"] as Storyboard;  
  30.             this.Loaded += ((sender, e) =>  
  31.             {  
  32.                 Active();  
  33.             });  
  34.         }  
  35.   
  36.         public async void Active()  
  37.         {  
  38.             el.BeginStoryboard(trans);  
  39.             await Task.Delay(170);  
  40.             el2.BeginStoryboard(trans);  
  41.             await Task.Delay(170);  
  42.             el3.BeginStoryboard(trans);  
  43.             await Task.Delay(170);  
  44.             el4.BeginStoryboard(trans);  
  45.             await Task.Delay(170);  
  46.             el5.BeginStoryboard(trans);  
  47.             await Task.Delay(170);  
  48.             el6.BeginStoryboard(trans);  
  49.         }  
  50.   
  51.         public void Stop()  
  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.         }  
  60.   
  61.         
  62.     }  
  63. }  


 

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

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

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/CharlesGrant/p/3639232.html