.NET 4.0+

WPF Shapes - Path - Arc Segments

by Richard Carr, published at http://www.blackwasp.co.uk/WPFArcSegment.aspx

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.

Previous: Page 1

Arc Size

In most cases, the size of the ellipse and the co-ordinates of the two points to join mean that there are two possible arcs. WPF selects the smaller of the two automatically, giving a sweep of 180 degrees or less. You can specify that you want to draw the larger option by setting the Boolean, IsLargeArc property to true.

Change the arc segment, as shown below, to use the large arc version of the previous example:

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

The arc now sweeps through more than 180 degrees.

WPF ArcSegment using Large Arc

Rotation Angle

The last property that we'll look at is RotationAngle. This rotates the underlying ellipse by a number of degrees clockwise before determining the path of the arc. The following example shows the effect by drawing two arcs. The black arc uses the default zero rotation angle. The red arc connects the same points using a rotated ellipse. The example also draws two lighter coloured arcs to show the full ellipse in each case.

<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="70,100" IsClosed="False">
                            <ArcSegment Point="170,100" Size="70 50" />
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
        <Path Stroke="#E0E0E0" StrokeThickness="3">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="70,100" IsClosed="False">
                            <ArcSegment Point="170,100" Size="70 50"
                                        SweepDirection="Clockwise" IsLargeArc="True"/>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
        <Path Stroke="Red" StrokeThickness="3">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="70,100" IsClosed="False">
                            <ArcSegment Point="170,100" Size="70 50" RotationAngle="65"/>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
        <Path Stroke="#FFE0E0" StrokeThickness="3">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="70,100" IsClosed="False">
                            <ArcSegment Point="170,100" Size="70 50" RotationAngle="65"
                                        SweepDirection="Clockwise" IsLargeArc="True"/>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>
</Window>

You can see from the results below that the traced ellipse is rotated but otherwise unchanged.

WPF ArcSegment using Rotation

Combining Segments

Arc segments can be combined with line segments, and with the other segment types that we'll see in future articles, within a single Path. This is shown in the final example. Here four arcs and a line form a path. As the path's IsClosed property is true, the start point of the path and the end point of the final arc are joined with a straight line.

<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" Fill="Moccasin">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="70,60" IsClosed="true">
                            <ArcSegment Point="40,80" Size="20 20" IsLargeArc="True" />
                            <ArcSegment Point="70,100" Size="20 20" IsLargeArc="True" />
                            <LineSegment Point="160,100" />
                            <ArcSegment Point="190,80" Size="20 20" IsLargeArc="True" />
                            <ArcSegment Point="160,60" Size="20 20" IsLargeArc="True" />
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>
</Window>

The geometry plots a bone shape.

WPF Path with Arcs and Lines

Next: WPF Shapes - Path - Bézier Segments

18 January 2015