• Article

PathGeometry

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Represents a complex shape that can be composed of arcs, curves, ellipses, lines, and rectangles.

<PathGeometry   ...>
  oneOrMorePathFigures
</PathGeometry>

XAML Values

Value

Description

oneOrMorePathFigures

One or more PathFigure object elements. Object elements defined here become members of the Figures collection when scripting accesses the Figures property at run time.

Managed Equivalent

PathGeometry

Remarks

Each PathGeometry object defines a collection of PathFigure objects. Each of the PathFigure objects is composed of one or more PathSegment objects, such as ArcSegment and LineSegment, which actually define the shape of the PathFigure objects.

The filled area of the PathGeometry is defined by taking all of the contained PathFigure objects and applying the FillRule property to determine the enclosed area.

For more information on basic concepts, see Geometries. Note that the Geometries topic is written primarily for users of the managed API, and may not have code examples or specific information that address the JavaScript API scenarios.

Example

The following example creates a simple PathGeometry object made up of a single PathFigure with a LineSegment and displays it by using a Path element. The PathFigure object's StartPoint is set to 10,20 and a LineSegment is defined with an end point of 100,130. The following illustration shows the PathGeometry that this example creates.

A PathGeometry that contains a single LineSegment

Diagonal line.

<Canvas  
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"> 
  
  <Path Stroke="Black" StrokeThickness="1">
    <Path.Data>
      <PathGeometry>
        <PathGeometry.Figures>
          <PathFigure StartPoint="10,20">
            <PathFigure.Segments>
              <LineSegment Point="100,130"/>
            </PathFigure.Segments>
          </PathFigure>
        </PathGeometry.Figures>
      </PathGeometry>
    </Path.Data>
  </Path> 
</Canvas>

The following example uses multiple segments in a PathFigure.

Multiple segments in a PathFigure

Pathfigure

<Canvas  
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"> 
  
  <Path Stroke="Black" StrokeThickness="1" >
    <Path.Data>
      <PathGeometry>
        <PathGeometry.Figures>
          <PathFigure StartPoint="10,50">
            <PathFigure.Segments>
              <BezierSegment
                Point1="100,0"
                Point2="200,200"
                Point3="300,100"/>
              <LineSegment Point="400,100" />
              <ArcSegment
                Size="50,50" RotationAngle="45"
                IsLargeArc="True" SweepDirection="Clockwise"
                Point="200,100"/>
            </PathFigure.Segments>
          </PathFigure>
        </PathGeometry.Figures>
      </PathGeometry>
    </Path.Data>
  </Path> 
</Canvas>

See Also

Reference

Geometry

GeometryGroup