原文:小米视频加载进度条效果实现
好吧，其实这些都是我闲暇时自己做着玩的，以前总是拿来主义，现在分享一下让我也为大家做一点贡献好了。废话不说了，看效果。
好吧 其实没什么技术含量 直接上代码好了 和我上一篇利用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>
XMAL前端
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 }
转换器
时间： 2024-09-11 00:01:45