好吧，其实这些都是我闲暇时自己做着玩的，以前总是拿来主义，现在分享一下让我也为大家做一点贡献好了。废话不说了，看效果。
好吧 其实没什么技术含量 直接上代码好了 和我上一篇利用WPF动画实现圆形进度条是一个道理，表现形式不同而已。
1 <UserControl x:Class="MyUserControlLibrary.CircleProgressbarcontrol" 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:ed="http://schemas.microsoft.com/expression/2010/drawing" 7 xmlns:local ="clr-namespace:MyUserControlLibrary" 8 mc:Ignorable="d" 9 d:DesignHeight="60" d:DesignWidth="60" MinWidth="60" MinHeight="60" Loaded="UserControl_Loaded"> 10 <UserControl.Resources> 11 <local:ConverterCircleToPercent x:Key="converter"/> 12 <Storyboard x:Key="MainStoryboard"> 13 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ed:Arc.EndAngle)" Storyboard.TargetName="ProgressArea"> 14 <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 15 <EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="360"/> 16 </DoubleAnimationUsingKeyFrames> 17 </Storyboard> 18 </UserControl.Resources> 19 <Grid> 20 <Border Name="MainBorder" Margin="0,0,0,0" CornerRadius="500" BorderThickness="2" BorderBrush="White" Opacity="0.6" Background="Black"/> 21 <ed:Arc Name="ProgressArea" Margin="5,5,5,5" ArcThickness="1" StartAngle="0" EndAngle="0" ArcThicknessUnit="Percent" Stretch="None" Fill="White" Opacity="0.4"/> 22 <Ellipse Name="CenterCircle" Width="5" Height="5" Fill="White" Opacity="0.7"/> 23 <Label Name="AreaShow" Margin="10,10,10,10" Content="{Binding ElementName=ProgressArea, Path=EndAngle,Converter={StaticResource converter}}" Foreground="White" FontFamily="宋体" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="20" Opacity="0.8"/> 24 </Grid> 25 </UserControl>
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Windows; 6 using System.Windows.Controls; 7 using System.Windows.Data; 8 using System.Windows.Documents; 9 using System.Windows.Input; 10 using System.Windows.Media; 11 using System.Windows.Media.Animation; 12 using System.Windows.Media.Imaging; 13 using System.Windows.Navigation; 14 using System.Windows.Shapes; 15 16 namespace MyUserControlLibrary 17 { 18 /// <summary> 19 /// CircleProgressbarcontrol.xaml 的交互逻辑 20 /// </summary> 21 public partial class CircleProgressbarcontrol : UserControl 22 { 23 #region 属性 24 25 private bool isShowPercent = true; 26 /// <summary> 27 /// 是否显示百分比 28 /// </summary> 29 [System.ComponentModel.Browsable(true),System.ComponentModel.Category("Appearance"),System.ComponentModel.Description("获取或设置是否显示百分比")] 30 public bool IsShowPercent { 31 get { 32 return isShowPercent; 33 } 34 set { 35 isShowPercent = value; 36 if (isShowPercent) 37 { 38 AreaShow.Visibility = System.Windows.Visibility.Visible; 39 } 40 else { 41 AreaShow.Visibility = System.Windows.Visibility.Hidden; 42 } 43 } 44 } 45 46 private TimeSpan percentTimeSpan = new TimeSpan(0, 0, 1); 47 /// <summary> 48 /// 每次更新百分比时的经过时间 49 /// </summary> 50 [System.ComponentModel.Browsable(true),System.ComponentModel.Category("Appearance"),System.ComponentModel.Description("获取或设置每次更新百分比时的经过时间")] 51 public TimeSpan PercentTimeSpan { 52 get { 53 return percentTimeSpan; 54 } 55 set { 56 percentTimeSpan = value; 57 Storyboard sb = (Storyboard)this.Resources["MainStoryboard"]; 58 ((DoubleAnimationUsingKeyFrames)sb.Children[0]).KeyFrames[1].KeyTime = KeyTime.FromTimeSpan(value); 59 } 60 } 61 62 #endregion 63 64 public CircleProgressbarcontrol() 65 { 66 InitializeComponent(); 67 } 68 69 #region 方法 70 71 /// <summary> 72 /// 设置当前百分比 73 /// </summary> 74 /// <param name="d">百分比</param> 75 public void setPercent(double d) { 76 Storyboard sb = (Storyboard)this.Resources["MainStoryboard"]; 77 ((DoubleAnimationUsingKeyFrames)sb.Children[0]).KeyFrames[0].Value = ProgressArea.EndAngle; 78 ((DoubleAnimationUsingKeyFrames)sb.Children[0]).KeyFrames[1].Value = d*3.6; 79 sb.Begin(); 80 } 81 82 #endregion 83 84 #region 事件 85 86 //界面调整 87 private void UserControl_Loaded(object sender, RoutedEventArgs e) 88 { 89 if (Double.IsNaN(Width)) 90 { 91 if (ActualWidth >= ActualHeight) 92 { 93 double t = (ActualWidth - ActualHeight) / 2; 94 MainBorder.Margin = new Thickness(t, 0, t, 0); 95 ProgressArea.Margin = new Thickness(t + 5, 5, t + 5, 5); 96 AreaShow.Margin = new Thickness(t + 10, 10, t + 10, 10); 97 } 98 else 99 { 100 double t = (ActualHeight - ActualWidth) / 2; 101 MainBorder.Margin = new Thickness(0, t + 0, 0, t + 0); 102 ProgressArea.Margin = new Thickness(5, t + 5, 5, t + 5); 103 AreaShow.Margin = new Thickness(10, t + 10, 10, t + 10); 104 } 105 AreaShow.FontSize = AreaShow.ActualWidth / 2; 106 } 107 else 108 { 109 if (Width >= Height) 110 { 111 double t = (Width - Height) / 2; 112 MainBorder.Margin = new Thickness(t, 0, t, 0); 113 ProgressArea.Margin = new Thickness(t + 5, 5, t + 5, 5); 114 AreaShow.Margin = new Thickness(t + 10, 10, t + 10, 10); 115 } 116 else 117 { 118 double t = (Height - Width) / 2; 119 MainBorder.Margin = new Thickness(0, t, 0, t); 120 ProgressArea.Margin = new Thickness(5, t + 5, 5, t + 5); 121 AreaShow.Margin = new Thickness(10, t + 10, 10, t + 10); 122 } 123 AreaShow.FontSize = AreaShow.ActualWidth / 2; 124 } 125 } 126 127 #endregion 128 } 129 }
1 using System; 2 using System.Collections.Generic; 3 using System.Globalization; 4 using System.Linq; 5 using System.Text; 6 using System.Windows.Data; 7 8 namespace MyUserControlLibrary 9 { 10 /// <summary> 11 /// 将角度转化成百分比 12 /// </summary> 13 public class ConverterCircleToPercent:IValueConverter 14 { 15 public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 16 { 17 return (int)(double.Parse(value.ToString()) * 10 / 36); 18 } 19 public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 20 { 21 throw new NullReferenceException(); 22 } 23 } 24 }