Arcs With Round End Caps

Some users have requested how they can go about making an arc progress bar that has round edges. Like what is seen in this image:

There are a couple of ways you could go about creating this, but only two really make the most sense.

First, let's go over the simplest way to do this using built in Storyboard primitives.

With this approach all you will need is two render extensions: Arc, and Image.
The image needed will simply be a circle that is the same width as the Arc. This circle will serve as the end cap of the arc.

Simply put, this approach is to place the circle at the end of the arc as it updates.

If you bind the Arc's End property, you can use the same variable for the Image's Rotation Angle:

Most important is to manually set the Rotation Center and the X and Y position so that when the Image's Angle is updated, it follows the path of the Arc. Of course the above values are just an example specific to that project. 

That's it! That's all that is needed to get the rounded end cap effect using Arc and Image render extension.

The other approach is simply to use shaders.

This kind of shader is not complicated, but of course some people are more comfortable using shaders than others.

We've put together a project to demonstrate both approaches with some additional shader features (Gradients)

Download Link