效果图
一共有三种方法
1.用弧度来画进度条
2.用饼图和圆取交集来画进度条
3.用DashArray来画进度条
方法一 用弧度来画进度条
style
<Style x:Key="CircleProgressBar1" TargetType="{x:Type ProgressBar}">
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="100" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="TemplateRoot">
<Rectangle Fill="#ef426f" RadiusX="5" RadiusY="5"/>
<Ellipse Stroke="#fc8b93"
StrokeThickness="6"
Width="86"
Height="86"/>
<Path Stroke="#fbbdaf"
StrokeThickness="6"
StrokeStartLineCap="Round"
StrokeEndLineCap="Round">
<Path.Data>
<MultiBinding Converter="{StaticResource Style1ArcConverter}">
<Binding ElementName="TemplateRoot" Path="ActualWidth" />
<Binding ElementName="TemplateRoot" Path="ActualHeight" />
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Value" />
</MultiBinding>
</Path.Data>
</Path>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="#FFF7ee"
Text="{Binding StringFormat={}{0}%, RelativeSource={RelativeSource TemplatedParent}, Path=Value}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
converter
public class Style1ArcConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
double PIch2 = 2 * Math.PI;
double centerX = (double)values[0] / 2;
double centerY = (double)values[1] / 2;
double angle = (double)values[2] / 100 * PIch2;
double radius = 40;
var 起始弧度的X偏移 = Math.Sin(0);
var 起始弧度的Y偏移 = Math.Cos(0);
var 终止弧度的X偏移 = Math.Sin(angle);
var 终止弧度的Y偏移 = Math.Cos(angle);
Point 起点 = new Point(centerX + radius * 起始弧度的X偏移, centerY - radius * 起始弧度的Y偏移);
Point 终点 = new Point(centerX + radius * 终止弧度的X偏移, centerY - radius * 终止弧度的Y偏移);
var converter = TypeDescriptor.GetConverter(typeof(Geometry));
string data;
if (angle == 0)