0

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?

Eliahu Aaron
  • 4,103
  • 5
  • 27
  • 37
Nightscape
  • 464
  • 6
  • 19

1 Answers1

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)
Eliahu Aaron
  • 4,103
  • 5
  • 27
  • 37
Robin Bennett
  • 3,192
  • 1
  • 8
  • 18
  • If i understand it correct the positive 70.7 is x and the negative 70.7 is y? – Nightscape Oct 03 '18 at 14:18
  • Why is the sector displayed out of the Designer (image inside question) and how can I fix this? – Nightscape Oct 03 '18 at 14:20
  • 1
    In a `Path` M indicates the Startpoint, so move the Startpoint towards the Center (eg. `M200,200`) – LittleBit Oct 03 '18 at 14:30
  • 'L0, -100' is an instruction to draw a line 0 pixels horizonally and -100 pixels down (i.e. 100 pixels upwards from the top of the window). Co-ordinates start from the top left corner, so negative y values are above the top of the window (or above the start point, for relative values) – Robin Bennett Oct 03 '18 at 15:57