How can I draw a circle sector by a given percentage in WPF?

Question

I am trying to draw a circle by given percentage. For example if the value 50 is given I would draw a half circle. I tried it with the first solution from this question .

<Path Fill="Yellow"
            Data="M0,0 L0,-100 A100,100 0 0 1 70.7,-70.7 z" />

This didn't work for me and displayed this in the designer:

How could I modify the first solution or are there any better solutions to draw a sector of a circle for my case?

Answer 1

This will work, but you'll have to calculate the 70.7 values, and pass them to your XAML with a binding.

To convert an angle to x and y coordinates you need the Math.Sin and Math.Cos functions, which take an angle in radians. You can convert a percentage to an angle in radians by multiplying by 2*PI and dividing by 100%, which can be combined like this:

var x = Math.Cos(myAngle * Math.Pi / 50)
var y = Math.Sin(myAngle * Math.Pi / 50)