环形进度条
一、新建一个用户控件:
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
关注
打赏
最近更新
- 深拷贝和浅拷贝的区别(重点)
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- 【脚手架VueCLI】从零开始,创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解(含代码)
- 【React】DOM的Diffing算法是什么?以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面?