How can I draw a circle sector with the ellipse class?

laszlokiss88 picture laszlokiss88 · Jul 19, 2011 · Viewed 21.7k times · Source

I would like to make a sector of a circle on WP7. I tried to do this with the ellipse class and I found a lot of solution, which make a gauge or pie chart or something, but I need just the essence. Could anyone help?

the aim is to show just one part of a circle (or ellipse). Like the yellow area in the picture:

enter image description here

Thanks, Laci

Answer

devuxer picture devuxer · Jan 5, 2012

Here's a fairly simple solution to the problem, though it does not use an Ellipse and it requires a little trigonometry:

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

The Data property uses Path Markup Syntax.

  • The "M" at the beginning tells the pen to Move to the location 0,0.
  • The "L" tells the pen to draw a Line from the current location (0, 0) to 0,-100.
  • The "A" tells the pen to draw an elliptical Arc from the current location to 70.7,-70.7 (the "100,100" portion determines the horizontal and vertical radius of the ellipse and the "0 0 1" portion is for RotationAngle, IsLargeArc, and SweepDirection (1 for clockwise, 0 for counter-clockwise)).
  • The "z" tells the pen to close or complete the shape (which will cause a line to be drawn from 70.7,-70.7 back to 0,0).

Where did the 70.7 come from? Well, this particular arc sweeps out an angle of 45 degrees from a circle with radius 100, so the coordinates 70.7,-70.7 are determined by 100 * sin(45) and 100 * cos(45).