Drawing and filling ellipse arc in Silverlight

Draw a ellipse arc in Silverlight

Our first XAML example shows how to draw an ellipse arc. The color and width of the arc line are defined by the Stroke and StrokeThickness attributes of the Path element. The PathFigure element specifies the StartPoint attribute that defines where the arc starts. The ArcSegment defines the following properties of the arc:

Size : the X and Y radius of the ellipse
Point : where the arc ends
IsLargeArc : is the arc greater than 180 degrees
SweepDirection : the direction in which the arc is drawn.

<Path Stroke="Red" StrokeThickness="1">
  <Path.Data>
    <PathGeometry>
      <PathFigure
        StartPoint="201.08848540793832,
                    53.183541121547776">
        <ArcSegment
            SweepDirection="CounterClockwise"
            Size="100,80"
            Point="38.91151459206168,
                   53.183541121547776"
            IsLargeArc="false" />
      </PathFigure>
    </PathGeometry>
  </Path.Data>
</Path>

Fill a ellipse arc in Silverlight

The second XAML example shows how to fill an ellipse arc. The colour and width of the arc line are defined by the Stroke and StrokeThickness attributes of the Path element, the Fill attribute defines the colour used to fill the arc. The PathFigure element specifies the StartPoint attribute that defines the centre point of the ellipse. The first LineSegment element specifies the Point attribute that defines where the arc starts, the ArcSegment defines the arc attributes (e.g. Size, Point, IsLargeArc and SweepDirection), and the last LineSegment element close the geometry by specifies the Point attribute using the centre point of the ellipse again.

<Path Stroke="Red"
  StrokeThickness="1" Fill="Blue">
  <Path.Data>
    <PathGeometry>
      <PathFigure StartPoint="120,100">
        <LineSegment
          Point="201.08848540793832,
                 53.183541121547776" />
        <ArcSegment
          SweepDirection="CounterClockwise"
          Size="100,80"
          Point="38.91151459206168,
                 53.183541121547776"
          IsLargeArc="false" />
        <LineSegment Point="120,100" />
      </PathFigure>
    </PathGeometry>
  </Path.Data>
</Path>

Based on above examples, methods that generate pie-charts can be easily developed.