How to draw the circle which looks like fan dynamically in windows phone canvas?

Question

I already had asked question, saying How to draw this type of circle, but by question was kept as Hold, I think I didn't describe much about that circle,

Basically That is the circle which has four color combination, and the group of Circle that looks like that Fan shaped, Hope I could get answer, I am trying myself also, I would Self answer It, If It got solved, So that It could help other also.

Answer 1

You can greatly simplify your code. Each of the four colored parts of your figure are identical, the outline is defined by three archs. All that would be different for drawing each part are the defining points and color:

private void Draw(Color color, Point point1, Point point2, Point point3, int radius)
{
    var pathFigure = new PathFigure();
    pathFigure.StartPoint = point1;

    ArcSegment arcSeg1 = new ArcSegment();
    arcSeg1.Point = point2;
    arcSeg1.Size = new Size(radius / 2, radius / 2);
    arcSeg1.SweepDirection = SweepDirection.Counterclockwise;

    ArcSegment arcSeg2 = new ArcSegment();
    arcSeg2.Point = point3;
    arcSeg2.Size = new Size(radius, radius);
    arcSeg2.SweepDirection = SweepDirection.Counterclockwise;

    ArcSegment arcSeg3 = new ArcSegment();
    arcSeg3.Point = point1;
    arcSeg3.Size = new Size(radius/2, radius/2);
    arcSeg3.SweepDirection = SweepDirection.Clockwise;

    pathFigure.Segments.Add(arcSeg1);
    pathFigure.Segments.Add(arcSeg2);
    pathFigure.Segments.Add(arcSeg3);

    var pathGeometry = new PathGeometry();
    pathGeometry.Figures.Add(pathFigure);
    var path = new Path();
    path.Fill = new SolidColorBrush(color);
    path.Data = pathGeometry;

    this.LayoutRoot.Children.Add(arcPath1);
}

Usage:

Draw(Colors.Red, new Point(100, 100), new Point(100, 0), new Point(0, 100), 100);
Draw(Colors.Green, new Point(100, 100), new Point(0, 100), new Point(100, 200), 100);
Draw(Colors.Blue, new Point(100, 100), new Point(100, 200), new Point(200, 100), 100);
Draw(Colors.Yellow, new Point(100, 100), new Point(200, 100), new Point(100, 0), 100);

Result:

Answer 2

Although My code looks too long, It may not be right Solution but Gives the Exact Figure I want to draw,

First I Draw the Quardent, This Code Draws the First Quardent,

        PathFigure pthFigure1 = new PathFigure();
        pthFigure1.StartPoint = new Point(0, 100);// starting cordinates of path figure
        ArcSegment arcSeg1 = new ArcSegment();
        arcSeg1.Point = new Point(100, 0);   // ending cordinates of arc segment point
        arcSeg1.Size = new Size(100, 100); // width and height of the arc
        arcSeg1.IsLargeArc = false;
        arcSeg1.SweepDirection = SweepDirection.Clockwise;
        LineSegment lineSeg = new LineSegment();
        lineSeg.Point = new Point(100, 100); //
        PathSegmentCollection myPathSegmentCollection1 = new PathSegmentCollection();
        myPathSegmentCollection1.Add(arcSeg1);
        myPathSegmentCollection1.Add(lineSeg);
        pthFigure1.Segments = myPathSegmentCollection1;
        PathFigureCollection pthFigureCollection1 = new PathFigureCollection();
        pthFigureCollection1.Add(pthFigure1);
        PathGeometry pthGeometry1 = new PathGeometry();
        pthGeometry1.Figures = pthFigureCollection1;
        System.Windows.Shapes.Path arcPath1 = new System.Windows.Shapes.Path();
        arcPath1.Data = pthGeometry1;
        arcPath1.Fill = new SolidColorBrush(Colors.Orange);
        this.LayoutRoot.Children.Add(arcPath1);

Respectively I draw Rest of Quardent, Then I Draw Half Circle, Inside that Quardent of the different Color, like this,

        PathFigure pthFigure5 = new PathFigure();
        pthFigure5.StartPoint = new Point(0, 100);// starting cordinates of arcs
        ArcSegment arcSeg5 = new ArcSegment();
        arcSeg5.Point = new Point(100, 100);   // ending cordinates of arcs
        arcSeg5.Size = new Size(50, 50);
        arcSeg5.IsLargeArc = true;
        arcSeg5.SweepDirection = SweepDirection.Clockwise;
        arcSeg5.RotationAngle = 30;
        PathSegmentCollection myPathSegmentCollection5 = new PathSegmentCollection();
        myPathSegmentCollection5.Add(arcSeg5);
        pthFigure5.Segments = myPathSegmentCollection5;
        PathFigureCollection pthFigureCollection5 = new PathFigureCollection();
        pthFigureCollection5.Add(pthFigure5);
        PathGeometry pthGeometry5 = new PathGeometry();
        pthGeometry5.Figures = pthFigureCollection5;
        System.Windows.Shapes.Path arcPath5 = new System.Windows.Shapes.Path();
        arcPath5.Data = pthGeometry5;
        arcPath5.Fill = new SolidColorBrush(Colors.Blue);
        this.LayoutRoot.Children.Add(arcPath5);

Actually the Trick, Is Draw the Half circle inside the Quardent, Followed by the Color of following Quardent, The Complete Code looks likes this.

        PathFigure pthFigure1 = new PathFigure();
        pthFigure1.StartPoint = new Point(0, 100);// starting cordinates of path figure
        ArcSegment arcSeg1 = new ArcSegment();
        arcSeg1.Point = new Point(100, 0);   // ending cordinates of arc segment point
        arcSeg1.Size = new Size(100, 100); // width and height of the arc
        arcSeg1.IsLargeArc = false;
        arcSeg1.SweepDirection = SweepDirection.Clockwise;
        LineSegment lineSeg = new LineSegment();
        lineSeg.Point = new Point(100, 100); //
        PathSegmentCollection myPathSegmentCollection1 = new PathSegmentCollection();
        myPathSegmentCollection1.Add(arcSeg1);
        myPathSegmentCollection1.Add(lineSeg);
        pthFigure1.Segments = myPathSegmentCollection1;
        PathFigureCollection pthFigureCollection1 = new PathFigureCollection();
        pthFigureCollection1.Add(pthFigure1);
        PathGeometry pthGeometry1 = new PathGeometry();
        pthGeometry1.Figures = pthFigureCollection1;
        System.Windows.Shapes.Path arcPath1 = new System.Windows.Shapes.Path();
        arcPath1.Data = pthGeometry1;
        arcPath1.Fill = new SolidColorBrush(Colors.Orange);
        this.LayoutRoot.Children.Add(arcPath1);


        PathFigure pthFigure2 = new PathFigure();
        pthFigure2.StartPoint = new Point(200, 100);// starting cordinates of path figure
        ArcSegment arcSeg2 = new ArcSegment();
        arcSeg2.Point = new Point(100, 0);   // ending cordinates of arc segment point
        arcSeg2.Size = new Size(100, 100); // width and height of the arc
        arcSeg2.IsLargeArc = false;
        arcSeg2.SweepDirection = SweepDirection.Counterclockwise;
        LineSegment lineSeg2 = new LineSegment();
        lineSeg2.Point = new Point(100, 100); //
        PathSegmentCollection myPathSegmentCollection2 = new PathSegmentCollection();
        myPathSegmentCollection2.Add(arcSeg2);
        myPathSegmentCollection2.Add(lineSeg2);
        pthFigure2.Segments = myPathSegmentCollection2;
        PathFigureCollection pthFigureCollection2 = new PathFigureCollection();
        pthFigureCollection2.Add(pthFigure2);
        PathGeometry pthGeometry2 = new PathGeometry();
        pthGeometry2.Figures = pthFigureCollection2;
        System.Windows.Shapes.Path arcPath2 = new System.Windows.Shapes.Path();
        arcPath2.Data = pthGeometry2;
        arcPath2.Fill = new SolidColorBrush(Colors.Gray);
        this.LayoutRoot.Children.Add(arcPath2);

        PathFigure pthFigure3 = new PathFigure();
        pthFigure3.StartPoint = new Point(100, 200);// starting cordinates of path figure
        ArcSegment arcSeg3 = new ArcSegment();
        arcSeg3.Point = new Point(200, 100);   // ending cordinates of arc segment point
        arcSeg3.Size = new Size(100, 100); // width and height of the arc
        arcSeg3.IsLargeArc = false;
        arcSeg3.SweepDirection = SweepDirection.Counterclockwise;
        LineSegment lineSeg3 = new LineSegment();
        lineSeg3.Point = new Point(100, 100); //
        PathSegmentCollection myPathSegmentCollection3 = new PathSegmentCollection();
        myPathSegmentCollection3.Add(arcSeg3);
        myPathSegmentCollection3.Add(lineSeg3);
        pthFigure3.Segments = myPathSegmentCollection3;
        PathFigureCollection pthFigureCollection3 = new PathFigureCollection();
        pthFigureCollection3.Add(pthFigure3);
        PathGeometry pthGeometry3 = new PathGeometry();
        pthGeometry3.Figures = pthFigureCollection3;
        System.Windows.Shapes.Path arcPath3 = new System.Windows.Shapes.Path();
        arcPath3.Data = pthGeometry3;
        arcPath3.Fill = new SolidColorBrush(Colors.Purple);
        this.LayoutRoot.Children.Add(arcPath3);

        PathFigure pthFigure4 = new PathFigure();
        pthFigure4.StartPoint = new Point(0, 100);// starting cordinates of path figure
        ArcSegment arcSeg4 = new ArcSegment();
        arcSeg4.Point = new Point(100, 200);   // ending cordinates of arc segment point
        arcSeg4.Size = new Size(100, 100); // width and height of the arc
        arcSeg4.IsLargeArc = false;
        arcSeg4.SweepDirection = SweepDirection.Counterclockwise;
        LineSegment lineSeg4 = new LineSegment();
        lineSeg4.Point = new Point(100, 100); //
        PathSegmentCollection myPathSegmentCollection4 = new PathSegmentCollection();
        myPathSegmentCollection4.Add(arcSeg4);
        myPathSegmentCollection4.Add(lineSeg4);
        pthFigure4.Segments = myPathSegmentCollection4;
        PathFigureCollection pthFigureCollection4 = new PathFigureCollection();
        pthFigureCollection4.Add(pthFigure4);
        PathGeometry pthGeometry4 = new PathGeometry();
        pthGeometry4.Figures = pthFigureCollection4;
        System.Windows.Shapes.Path arcPath4 = new System.Windows.Shapes.Path();
        arcPath4.Data = pthGeometry4;
        arcPath4.Fill = new SolidColorBrush(Colors.Blue);
        this.LayoutRoot.Children.Add(arcPath4);

        PathFigure pthFigure5 = new PathFigure();
        pthFigure5.StartPoint = new Point(0, 100);// starting cordinates of arcs
        ArcSegment arcSeg5 = new ArcSegment();
        arcSeg5.Point = new Point(100, 100);   // ending cordinates of arcs
        arcSeg5.Size = new Size(50, 50);
        arcSeg5.IsLargeArc = true;
        arcSeg5.SweepDirection = SweepDirection.Clockwise;
        arcSeg5.RotationAngle = 30;
        PathSegmentCollection myPathSegmentCollection5 = new PathSegmentCollection();
        myPathSegmentCollection5.Add(arcSeg5);
        pthFigure5.Segments = myPathSegmentCollection5;
        PathFigureCollection pthFigureCollection5 = new PathFigureCollection();
        pthFigureCollection5.Add(pthFigure5);
        PathGeometry pthGeometry5 = new PathGeometry();
        pthGeometry5.Figures = pthFigureCollection5;
        System.Windows.Shapes.Path arcPath5 = new System.Windows.Shapes.Path();
        arcPath5.Data = pthGeometry5;
        arcPath5.Fill = new SolidColorBrush(Colors.Blue);
        this.LayoutRoot.Children.Add(arcPath5);

        PathFigure pthFigure6 = new PathFigure();
        pthFigure6.StartPoint = new Point(100, 100);// starting cordinates of arcs
        ArcSegment arcSeg6 = new ArcSegment();
        arcSeg6.Point = new Point(100, 0);   // ending cordinates of arcs
        arcSeg6.Size = new Size(50, 50);
        arcSeg6.IsLargeArc = true;
        arcSeg6.SweepDirection = SweepDirection.Counterclockwise;
        arcSeg6.RotationAngle = 30;
        PathSegmentCollection myPathSegmentCollection6 = new PathSegmentCollection();
        myPathSegmentCollection6.Add(arcSeg6);
        pthFigure6.Segments = myPathSegmentCollection6;
        PathFigureCollection pthFigureCollection6 = new PathFigureCollection();
        pthFigureCollection6.Add(pthFigure6);
        PathGeometry pthGeometry6 = new PathGeometry();
        pthGeometry6.Figures = pthFigureCollection6;
        System.Windows.Shapes.Path arcPath6 = new System.Windows.Shapes.Path();
        arcPath6.Data = pthGeometry6;
        arcPath6.Fill = new SolidColorBrush(Colors.Orange);
        this.LayoutRoot.Children.Add(arcPath6);



        PathFigure pthFigure7 = new PathFigure();
        pthFigure7.StartPoint = new Point(200, 100);// starting cordinates of arcs
        ArcSegment arcSeg7 = new ArcSegment();
        arcSeg7.Point = new Point(100, 100);   // ending cordinates of arcs
        arcSeg7.Size = new Size(50, 50);
        arcSeg7.IsLargeArc = true;
        arcSeg7.SweepDirection = SweepDirection.Clockwise;
        arcSeg7.RotationAngle = 30;
        PathSegmentCollection myPathSegmentCollection7 = new PathSegmentCollection();
        myPathSegmentCollection7.Add(arcSeg7);
        pthFigure7.Segments = myPathSegmentCollection7;
        PathFigureCollection pthFigureCollection7 = new PathFigureCollection();
        pthFigureCollection7.Add(pthFigure7);
        PathGeometry pthGeometry7 = new PathGeometry();
        pthGeometry7.Figures = pthFigureCollection7;
        System.Windows.Shapes.Path arcPath7 = new System.Windows.Shapes.Path();
        arcPath7.Data = pthGeometry7;
        arcPath7.Fill = new SolidColorBrush(Colors.Gray);
        this.LayoutRoot.Children.Add(arcPath7);

        PathFigure pthFigure8 = new PathFigure();
        pthFigure8.StartPoint = new Point(100, 200);// starting cordinates of arcs
        ArcSegment arcSeg8 = new ArcSegment();
        arcSeg8.Point = new Point(100, 100);   // ending cordinates of arcs
        arcSeg8.Size = new Size(50, 50);
        arcSeg8.IsLargeArc = true;
        arcSeg8.SweepDirection = SweepDirection.Clockwise;
        arcSeg8.RotationAngle = 30;
        PathSegmentCollection myPathSegmentCollection8 = new PathSegmentCollection();
        myPathSegmentCollection8.Add(arcSeg8);
        pthFigure8.Segments = myPathSegmentCollection8;
        PathFigureCollection pthFigureCollection8 = new PathFigureCollection();
        pthFigureCollection8.Add(pthFigure8);
        PathGeometry pthGeometry8 = new PathGeometry();
        pthGeometry8.Figures = pthFigureCollection8;
        System.Windows.Shapes.Path arcPath8 = new System.Windows.Shapes.Path();
        arcPath8.Data = pthGeometry8;
        arcPath8.Fill = new SolidColorBrush(Colors.Purple);
        this.LayoutRoot.Children.Add(arcPath8);