What's the recommended way to create a custom circle progress bar like the one in the attached image?

You may need something similar to what is explained in this post: viewtopic.php?f=3&t=604&p=3470&hilit=circular#p3205

First of all you have to design your own ProgressBar template which should contain a Path named PART_Indicator that will be the circular shape that indicates the progress. Then you will convert the percentage to an angle value as explained in the above post and generate the appropriate StreamGeometry that will be set in the Clip property of that path.

Thanks !