wpf 如何写一个圆形的进度条

先看一下效果吧

调用代码如下

1. [/code]然后下面就来实现一下这个效果
2. [b]第一步：先创建一个空的wpf项目[/b]
3. [b]第二步：添加一个自定义控件，取名为CycleProgressBar[/b]
4. [align=center][img=420,291]https://img2024.cnblogs.com/blog/2064545/202408/2064545-20240813105251294-1898042242.png[/img][/align]
5. 添加完以后，vs会主动生成一个类和一个Themes文件夹，下面有一个名为Generic的资源文件
6. [align=center][img=291,177]https://img2024.cnblogs.com/blog/2064545/202408/2064545-20240813105636477-1193988435.png[/img][/align]
7. Generic内里就是这个自定义控件的默认样式，内里只有一个border,我们就是通过改造这个默认的样式来实现圆形的进度条
8. [align=center][img=348,175]https://img2024.cnblogs.com/blog/2064545/202408/2064545-20240813105652929-1656221246.png[/img][/align]
9. 到目前位置，都是vs主动生成的代码，不需要我们做任何操作
10.  
11. [b]第三步：将父类设置成RangeBase，由于原生的progressbar就是继续的这个类，所以我们也继续这个类[/b]
12. [align=center][img=538,83]https://img2024.cnblogs.com/blog/2064545/202408/2064545-20240813105904764-571965807.png[/img][/align]
13.  
14. [b]第四步：添加依靠属性IsIndeterminate，这个属性用来控制进度条是不是一直转圈圈[/b]
15. [code] <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
17.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
19.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
21.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
23. public bool IsIndeterminate
24. <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
26.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
28.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
30.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
32. {
33. <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
35.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
37.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
39.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
41.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
43.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
45. get { return (bool)GetValue(IsIndeterminateProperty); }
46. <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
48.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
50.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
52.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
54.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
56.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
58. set { SetValue(IsIndeterminateProperty, value); }
59. <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
61.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
63.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
65.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
67. }
69. <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
71.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
73.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
75.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
77. // Using a DependencyProperty as the backing store for IsIndeterminate. <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
79. This enables animation, styling, binding, etc...
80. <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
82.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
84.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
86.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
88. public static readonly DependencyProperty IsIndeterminateProperty =
89. <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
91.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
93.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
95.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
97.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
99.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
101. DependencyProperty.Register("IsIndeterminate", typeof(bool), typeof(CycleProgressBar), new PropertyMetadata(false));

复制代码

 
第五步：绘制控件的模板样式
在绘制之前，先添加一个nuget上面的引用,搜索expression.drawing，然后添加下面的引用

再在generic文件内里引入命名空间
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
再写样式之前的预备工作就预备完了，背面就是开始写模板样式了,下面是样式的代码和注释

1. <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

复制代码

内里有一个名为ProgressBarValueToPercentage的转换,直接添加一个类，然后代码就在下面

1. public class ProgressBarValueToPercentage : IMultiValueConverter{ <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
3.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
5. public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
7.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
9. { <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
11.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
13.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
15.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
17. var maximum = System.Convert.ToDouble(values[0]); <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
19.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
21.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
23.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
25. var value = System.Convert.ToDouble(values[1]); <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
27.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
29.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
31.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
33. var minimum = System.Convert.ToDouble(values[2]); <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
35.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
37.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
39.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
41. if (maximum == 0) <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
43.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
45.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
47.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
49. { <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
51.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
53.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
55.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
57.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
59.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
61. return "0" + "%"; <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
63.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
65.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
67.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
69. } <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
71.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
73.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
75.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
77. double progressValue = (value - minimum) / (maximum - minimum) * 100; <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
79.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
81.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
83.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
85. return (Math.Round(progressValue)).ToString() + "%"; <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
87.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
89. } <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
91.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
93. public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
95.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
97. { <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
99.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
101.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
103.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
105. throw new NotImplementedException(); <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
107.   <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
109. }}

复制代码

到现在，样式部分就写完了，然后还要去后台代码内里实现具体的功能
第六步：实现后台代码功能
[code]public class CycleProgressBar : RangeBase{ <localrogressBarValueToPercentage x:Key="rogressBarValueToPercentage"/>

  <localrogressBarValueToPercentage x:Key="rogressBarValueToPercentage"/>

public bool IsIndeterminate <localrogressBarValueToPercentage x:Key="rogressBarValueToPercentage"/>

  <localrogressBarValueToPercentage x:Key="rogressBarValueToPercentage"/>

{ <localrogressBarValueToPercentage x:Key="rogressBarValueToPercentage"/>

  <localrogressBarValueToPercentage x:Key="rogressBarValueToPercentage"/>

  <localrogressBarValueToPercentage x:Key="rogressBarValueToPercentage"/>

  <localrogressBarValueToPercentage x:Key="rogressBarValueToPercentage"/>

get { return (bool)GetValue(IsIndeterminateProperty); } <localrogressBarValueToPercentage x:Key="rogressBarValueToPercentage"/>

  <localrogressBarValueToPercentage x:Key="rogressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

set { SetValue(IsIndeterminateProperty, value); } <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

} <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

// Using a DependencyProperty as the backing store for IsIndeterminate. <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

This enables animation, styling, binding, etc... <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

public static readonly DependencyProperty IsIndeterminateProperty = <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

DependencyProperty.Register("IsIndeterminate", typeof(bool), typeof(CycleProgressBar), new PropertyMetadata(false)); <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

private FrameworkElement _track; <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

static CycleProgressBar() <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

{ <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

//这段代码是创建控件的时间自带的，不消管，代码的意思就是去找generic内里名为CycleProgressBar的样式， <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

//如果把这段代码删了，或者generic没有CycleProgressBar的样式，步伐就会报错 <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

DefaultStyleKeyProperty.OverrideMetadata(typeof(CycleProgressBar), new FrameworkPropertyMetadata(typeof(CycleProgressBar))); <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

} <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

/// <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  /// 计算进度条的值 <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

/// <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  private void SetPartTrackValue() <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

{ <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

double minimum = this.Minimum; <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

double maximum = this.Maximum; <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

double value = this.Value; <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

  <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>

double num = (maximum