Using the Arc control to create a pie chart

I was just recently working on a project that required a simple pie chart but the third party controls that were being used causing the display to load slowly. The Arc control worked well to create the chart, especially since there was only one value being displayed - however I wanted to try to make a pie chart that showed different percentages using the Arc control.

Note: the percentages have to equal 100% and not go over, this may seem like a 'no-brainer' but if you're not careful and watch the values they could go over. So - to try it out I made a very simple list with names, percentages and color values

.
Nothing fancy - just to test out if it could work. Next - I created an empty ListBox, Grid and a style for the ListBoxItems to display the values. The ListBox acts as a very simple legend. 

To create the pie chart, I just used a foreach statement and added a control as a child to the Grid. One of the key properties - to make sure the Arcs line up correctly - is to make sure the Stretch property is set to "None". I am sure most of the styling could be moved out of the codebehind and into a style - but this was me seeing if I could do it and use this idea later on. Maybe even style it a bit differently.. definitely much easier to set the colors than in some of the charting controls I've used.

If you notice, I have it end with making the StartAngle equal what the previous EndAngle was, and the next EndAngle is the product of the calculated angle and the value of the Arc's StartAngle. This is what rotates the values around the 'Pie Chart" - and because the Stretch is set to None they line up. (was soooo frustrating to get it almost there only to look like a beach ball Salvador Dali would have painted).

Below is the final output.

Definitely nothing fancy - but a start and at least I don't have to wonder if I can do it anymore :).