Drawing ARC Using arcsegment in XAML

We can use the ARC XAML element to draw arcs in XAML. Besides drawing arcs using the ARC element, we can also use the arcsegment element. The arcsegment is useful if an arc becomes a part of a graphics path or a larger geometric object.

In this article, we'll see if the arcsegment to draw arcs in XAML and WPF.

The ArcSegment object represents an elliptical arc between the points. The ArcSegment class has the five properties point, Size, SweepDirection, IsLargeArc and RotationAngle.

• The Point property is represents the endpoints of an arc.
• The Size property represents the X and Y radiuses of an arc.
• The SweepDirection property specifies whether a arc sweep direction is clock wise or counter clock wise.
• The IsLargeArc property returns True if a arc is greater than degrees.
• The RotationAngle property represents the angle by which a ellipse is rotated about the x-axis.

The following figure provided by the MSDN documentation shows these property values and their results.

<arcsegment size= "300,50" rotationangle= "30"
Islargearc= "True" sweepdirection= "counterclockwise" point= "200,100"/>

A Path object is used to draw an arc by setting a pathgeomerty as Path.data. The following code snippet creates a Path and sets a arcsegment as a part of pathfigure.segments.

<path stroke= "Black" strokethickness= "1" >
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<pathfigure startpoint= "0,100" >
<PathFigure.Segments>
<PathSegmentCollection>
<arcsegment size= "300,50" rotationangle= "30"
Islargearc= "True"
sweepdirection= "Counterclockwise"
point= "200,100"/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>

The output looks like Figure 1.

Figure 1

We can paint an arc by simply painting the path using the Fill method. The following code snippet have changes in it from the previous code, that fills a path.

<path stroke= "Black" strokethickness= "1" fill= "Yellow" >

The new output looks like Figure 2.

Figure 2

The following code snippet creates an arc segment shown in Figure 2 dynamically.

private void Createarcsegment ()
{
PathFigure pthfigure = new PathFigure ();
Pthfigure.startpoint = new Point (0, 100);

ArcSegment arcseg = new ArcSegment ();
Arcseg.point = new Point (200, 100);
Arcseg.size = new Size (300,50);
Arcseg.islargearc = true;
Arcseg.sweepdirection = sweepdirection.counterclockwise;
Arcseg.rotationangle = 30;

PathSegmentCollection mypathsegmentcollection = new PathSegmentCollection ();
Mypathsegmentcollection.add (ARCSEG);

Pthfigure.segments = mypathsegmentcollection;

PathFigureCollection pthfigurecollection = new PathFigureCollection ();
Pthfigurecollection.add (pthfigure);

PathGeometry pthgeometry = new PathGeometry ();
Pthgeometry.figures = pthfigurecollection;

Path Arcpath = new Path ();
Arcpath.stroke = new SolidColorBrush (colors.black);
arcpath.strokethickness = 1;
Arcpath.data = Pthgeometry;
Arcpath.fill = new SolidColorBrush (colors.yellow);

LAYOUTROOT.CHILDREN.ADD (Arcpath);
}

Drawing ARC Using arcsegment in XAML