Final result

Features

The goal of this article is to create a circular progress bar (see the examples in the screenshot above) as simple as possible, that is working in Silverlight and WPF and only uses the path arc segment. Because of that, it’s fully customizable.

• Draws an arc segment based on the angle / percentage
• Specifies radius of the circle
• Only uses path ArcSegment
• Specifies Stroke Thickness
• Fully customizable
• Runs in Silverlight AND WPF
• Implementation as simple as possible

Creating the circular progress bar

First of all we are creating a user control with the following content (in a real project you will create a custom control instead):

<Path x:Name="pathRoot" Stroke="{Binding SegmentColor, ElementName=userControl}" 
    StrokeThickness="{Binding StrokeThickness, ElementName=userControl}" 
    HorizontalAlignment="Left" VerticalAlignment="Top">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure x:Name="pathFigure">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <ArcSegment x:Name="arcSegment" SweepDirection="Clockwise" />
                            </PathSegmentCollection>
                       </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

The properties “Stroke” and “StrokeThickness” of the path element are bound to dependency properties of the user control.
We’ll get to the code behind class in a minute, but let’s get the XAML code right. The path’s data property is set to a path geometry figure, which consists of a path segment collection.
The first and only segment is an arc segment, which is used to draw the circular progress bar. Notice, that the path figure and the arc segment got a name attached.
These references are used in the code behind to update the arc segment (in a custom control template you will provide these references as a template part). That’s all we have to do in the XAML part of the user control.
Now let’s get to the interesting part.

Code behind

The code behind class is the heart of the circular progress bar, but it’s not that complicated. Let’s start with the most difficult part of the control: the calculation of the arc segment.
To understand the meaning of the arc segment, it is necessary to dig into the world of higher mathematics.
Or you just read along and get the solution to the problem of drawing a perfect circle with the arc segment.

public void RenderArc()
{
       Point startPoint =  new Point(Radius, 0);
       Point endPoint = ComputeCartesianCoordinate(Angle, Radius);
       endPoint.X += Radius;
       endPoint.Y += Radius;

       pathRoot.Width = Radius * 2 + StrokeThickness;
       pathRoot.Height = Radius * 2 + StrokeThickness;
       pathRoot.Margin = new Thickness(StrokeThickness, StrokeThickness, 0, 0);

       bool largeArc = Angle > 180.0;

       Size outerArcSize = new Size(Radius, Radius);

       pathFigure.StartPoint = startPoint;

       if (startPoint.X == Math.Round(endPoint.X) && startPoint.Y == Math.Round(endPoint.Y))
           endPoint.X -= 0.01;

       arcSegment.Point = endPoint;
       arcSegment.Size = outerArcSize;
       arcSegment.IsLargeArc = largeArc;
}

The arc segment doesn’t have a starting point property. It starts from the last drawn point of the path figure.
In this example the start point of the path figure is set to the top center of the control (Radius, 0).
The end point of the arc segment is calculated depending on the radius and the angle. Now we’ll take a look at the calculation:

private Point ComputeCartesianCoordinate(double angle, double radius)
{
       double angleRad = (Math.PI / 180.0) * (angle - 90);

       double x = radius * Math.Cos(angleRad);
       double y = radius * Math.Sin(angleRad);

       return new Point(x, y);
}

It translates the angle to a cartesian coordinate using the radius of the circle. It’s necessary to get the end point as an absolute coordinate, because the arc segment needs to get this information.
Last but not least, here is the calculation of the angle, depending on the percentage (0% to 100%):

Angle = (Percentage * 360) / 100;

To try this sample, feel free to download the source code or ask any questions in the comments.

Source Code:
CircularProgressBar.zip