BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Shapes - Path - Arc Segments

The one hundred and twenty-eighth part of the Windows Presentation Foundation Fundamentals tutorial continues to look at path geometry and the available segment types. This article explains how to include elliptical arcs in a Path.

ArcSegment

In the previous article we created shapes using a Path containing a PathGeometry. We built figures inside the geometry using line segments, joining a series of co-ordinates with straight lines to form a continuous path. In this article we'll expand upon the available segment types by describing arc segments.

An arc segment plots an elliptical arc. This is a section of an ellipse of a size specified within the arc segment object. As with lines, the arc starts either at the start point of the path or the end point of the previous segment. You specify the co-ordinates of the end of the arc within the segment. The framework determines the path of the arc as the shortest route around an ellipse of the specified size that passes through both the start and end locations.

To demonstrate, let's create a new WPF application project in Visual Studio. Name the solution, "ArcSegmentDemo". Once ready, replace the XAML in the main window with the code below.

<Window x:Class="ArcSegmentDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Path Demo"
        Height="200" Width="250">
    <Canvas>
        <Path Stroke="Black" StrokeThickness="3">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="40,100" IsClosed="False">
                            <ArcSegment Point="200,100" Size="80 50"/>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>
</Window>

Let's take a look at the arc defined by the geometry. It starts at the co-ordinates (40,100) and ends at (200, 100). The size is specified as a pair of numbers representing the X and Y radiuses of the ellipse. In this case, the points are level on the Y axis and the X radius of the ellipse is exactly half of the distance between the two points. The result is half an ellipse.

The output of the program is shown in the image below. Note that the segment is drawn from the start point to the end point in an anticlockwise, or counter clockwise, sweep. This is the default direction.

WPF ArcSegment Demo Window

Let's try a different arc, where the positioning of the end points does not give such an exact fit. Modify the ArcSegment's XAML, as follows:

<ArcSegment Point="170,50" Size="80 50"/>

The result is shown below:

WPF Anticlockwise ArcSegment

When you compare the above arc to the previous example, you can see that it is tracing the edge of an ellipse of exactly the same size. Only the part of the ellipse that is drawn is different. In both cases, the section of arc rendered is selected as the shortest possible arc that matches the ellipse shape and connects the start and end points with an anticlockwise sweep.

Sweep Direction

You can change the sweep direction used when plotting the arc from anticlockwise to clockwise by setting the SweepDirection property. The other rules for the path segment do not change. WPF still creates the shortest path between the two paths that plots part of the ellipse. Only the direction of the sweep is changed.

To demonstrate, switch the arc from anticlockwise to clockwise, as follows:

<ArcSegment Point="170,50" Size="80 50" SweepDirection="Clockwise"/>

The resultant arc is shown below:

WPF Clockwise ArcSegment

18 January 2015