WPF 环形进度条的使用

环形进度条

一、新建一个用户控件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace BeatfanControls.ProcessBars
{
///
/// CycleProcessBar1.xaml 的交互逻辑
///
public partial class CycleProcessBar1 : UserControl
{
public CycleProcessBar1()
{
InitializeComponent();
}

    public double CurrentValue1
    {
        set { SetValue(value); }
    }

    /// 

    /// 设置百分百，输入小数，自动乘100
    /// 
    /// 
    private void SetValue(double percentValue)
    {
        /*****************************************
          方形矩阵边长为34，半长为17
          环形半径为14，所以距离边框3个像素
          环形描边3个像素
        ******************************************/
        double angel = percentValue * 360; //角度

        

        double radius = 14; //环形半径

        //起始点
        double leftStart = 17;
        double topStart = 3;

        //结束点
        double endLeft = 0;
        double endTop = 0;

        

        //数字显示
        lbValue.Content = (percentValue*100).ToString("0") + "%";

        /***********************************************
        * 整个环形进度条使用Path来绘制，采用三角函数来计算
        * 环形根据角度来分别绘制，以90度划分，方便计算比例
        ***********************************************/

        bool isLagreCircle = false; //是否优势弧，即大于180度的弧形

        //小于90度
        if (angel <= 90)
        {
            /*****************
                      *
                      *   *
                      * * ra
               * * * * * * * * *
                      *
                      *
                      *
            ******************/
            double ra = (90 - angel) * Math.PI / 180; //弧度
            endLeft = leftStart + Math.Cos(ra) * radius; //余弦横坐标
            endTop = topStart + radius - Math.Sin(ra) * radius; //正弦纵坐标
            
        }

        else if (angel <= 180)
        {
            /*****************
                      *
                      *  
                      * 
               * * * * * * * * *
                      * * ra
                      *  *
                      *   *
            ******************/
            
            double ra = (angel - 90) * Math.PI / 180; //弧度
            endLeft = leftStart + Math.Cos(ra) * radius; //余弦横坐标
            endTop = topStart + radius + Math.Sin(ra) * radius;//正弦纵坐标
        }

        else if (angel <= 270)
        {
            /*****************
                      *
                      *  
                      * 
               * * * * * * * * *
                    * *
                   *ra*
                  *   *
            ******************/
            isLagreCircle = true; //优势弧
            double ra = (angel - 180) * Math.PI / 180;
            endLeft = leftStart - Math.Sin(ra) * radius;
            endTop = topStart + radius + Math.Cos(ra) * radius;
        }

        else if (angel < 360)
        {
            /*****************
                  *   *
                   *  *  
                 ra * * 
               * * * * * * * * *
                      *
                      *
                      *
            ******************/
            isLagreCircle = true; //优势弧
            double ra = (angel - 270) * Math.PI / 180;
            endLeft = leftStart - Math.Cos(ra) * radius;
            endTop = topStart + radius - Math.Sin(ra) * radius;
        }
        else
        {
            isLagreCircle = true; //优势弧
            endLeft = leftStart-0.001; //不与起点在同一点，避免重叠绘制出非环形
            endTop = topStart;
        }

        Point arcEndPt = new Point(endLeft, endTop); //结束点
        Size arcSize = new Size(radius, radius);
        SweepDirection direction = SweepDirection.Clockwise; //顺时针弧形
        //弧形
        ArcSegment arcsegment = new ArcSegment(arcEndPt, arcSize, 0, isLagreCircle, direction, true);

        //形状集合
        PathSegmentCollection pathsegmentCollection = new PathSegmentCollection();
        pathsegmentCollection.Add(arcsegment);

        //路径描述
        PathFigure pathFigure = new PathFigure();
        pathFigure.StartPoint = new Point(leftStart, topStart); //起始地址
        pathFigure.Segments = pathsegmentCollection;

        //路径描述集合
        PathFigureCollection pathFigureCollection = new PathFigureCollection();
        pathFigureCollection.Add(pathFigure);

        //复杂形状
        PathGeometry pathGeometry = new PathGeometry();
        pathGeometry.Figures = pathFigureCollection;

        //Data赋值
        //myCycleProcessBar.Data = pathGeometry;
        myCycleProcessBar1.Data = pathGeometry;
        //达到100%则闭合整个
        if (angel == 360)
            myCycleProcessBar1.Data = Geometry.Parse(myCycleProcessBar1.Data.ToString() + " z");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
二、引用：