wpf 圆形进度条

效果图

一共有三种方法

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)