wpf 如何写一个圆形的进度条
先看一下效果吧https://img2024.cnblogs.com/blog/2064545/202408/2064545-20240813104932845-643340218.png
调用代码如下
然后下面就来实现一下这个效果
第一步：先创建一个空的wpf项目
第二步：添加一个自定义控件，取名为CycleProgressBar
https://img2024.cnblogs.com/blog/2064545/202408/2064545-20240813105251294-1898042242.png
添加完以后，vs会主动生成一个类和一个Themes文件夹，下面有一个名为Generic的资源文件
https://img2024.cnblogs.com/blog/2064545/202408/2064545-20240813105636477-1193988435.png
Generic内里就是这个自定义控件的默认样式，内里只有一个border,我们就是通过改造这个默认的样式来实现圆形的进度条
https://img2024.cnblogs.com/blog/2064545/202408/2064545-20240813105652929-1656221246.png
到目前位置，都是vs主动生成的代码，不需要我们做任何操作
第三步：将父类设置成RangeBase，由于原生的progressbar就是继续的这个类，所以我们也继续这个类
https://img2024.cnblogs.com/blog/2064545/202408/2064545-20240813105904764-571965807.png
第四步：添加依靠属性IsIndeterminate，这个属性用来控制进度条是不是一直转圈圈
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
public bool IsIndeterminate
<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"/>
get { return (bool)GetValue(IsIndeterminateProperty); }
<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"/>
set { SetValue(IsIndeterminateProperty, value); }
<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"/>
// 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"/>
<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"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
DependencyProperty.Register("IsIndeterminate", typeof(bool), typeof(CycleProgressBar), new PropertyMetadata(false));
第五步：绘制控件的模板样式
在绘制之前，先添加一个nuget上面的引用,搜索expression.drawing，然后添加下面的引用
https://img2024.cnblogs.com/blog/2064545/202408/2064545-20240813110139912-2012558703.png
再在generic文件内里引入命名空间
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
再写样式之前的预备工作就预备完了，背面就是开始写模板样式了,下面是样式的代码和注释
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
内里有一个名为ProgressBarValueToPercentage的转换,直接添加一个类，然后代码就在下面
public class ProgressBarValueToPercentage : IMultiValueConverter{ <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) <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"/>
var maximum = System.Convert.ToDouble(values); <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
var value = System.Convert.ToDouble(values); <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
var minimum = System.Convert.ToDouble(values); <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
if (maximum == 0) <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"/>
return "0" + "%"; <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"/>
double progressValue = (value - minimum) / (maximum - minimum) * 100; <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
return (Math.Round(progressValue)).ToString() + "%"; <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
} <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) <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"/>
throw new NotImplementedException(); <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
}}到现在，样式部分就写完了，然后还要去后台代码内里实现具体的功能
第六步：实现后台代码功能
public class CycleProgressBar : RangeBase{ <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
public bool IsIndeterminate <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"/>
get { return (bool)GetValue(IsIndeterminateProperty); } <local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<local:ProgressBarValueToPercentage x:Key="ProgressBarValueToPercentage"/>
<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
页:
[1]