Path Geometries in WPF

In this article, we discuss the Path Geometries in WPF. We can create arcs, curves, lines and many more things with the help of this. We use PathFigure to describe the shape in the PathGeometry. And each PathFigure consists of one or more path segment objects.

Here we discuss the types of Segments:

1. Bezier Segment: It creates a cubic Bezier curve between two points.

Example: Here we create a Bezier curve:

<Path Stroke="Red" StrokeThickness="2">
      <Path.Data>
          <PathGeometry>
              <PathGeometry.Figures>
                  <PathFigureCollection>
                      <PathFigure StartPoint="0,100">
                          <PathFigure.Segments>
                              <PathSegmentCollection>
                                   <BezierSegment Point1="100,0" Point2="200,200" Point3="300,100" />
                              </PathSegmentCollection>
                          </PathFigure.Segments>
                      </PathFigure>
                  </PathFigureCollection>
              </PathGeometry.Figures>
           </PathGeometry>
      </Path.Data>
</Path>

Output:




2. Arc Segment: It creates an arc between the two points.

Example:

<Path Stroke="Red" StrokeThickness="2">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigureCollection>
                        <PathFigure StartPoint="50,100">
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <ArcSegment Size="100,80" RotationAngle="90" IsLargeArc="True" SweepDirection="CounterClockwise" Point="200,100" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

Output:



3. Line Segment: It is used to create a line between two points:

Example:

<Path Stroke="Red" StrokeThickness="2">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="200,90">
                        <LineSegment Point="100,90" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>


Output:


4. PolyBezier Segment: It is used to create one or more Bezier curves:

Example:

<StackPanel>
            <Canvas>
                <Path Stroke="Red" StrokeThickness="2">
                    <Path.Data>
                        <PathGeometry>
                            <PathGeometry.Figures>
                                <PathFigureCollection>
 
                                    <PathFigure StartPoint="0,100">
                                        <PathFigure.Segments>
                                            <PathSegmentCollection>

                                                <PolyBezierSegment Points="0,0 100,0 100,100 50,0 100,0 200,100" />
                                            </PathSegmentCollection>
                                        </PathFigure.Segments>
                                    </PathFigure>
                                </PathFigureCollection>
                            </PathGeometry.Figures>
                        </PathGeometry>
                    </Path.Data>
                </Path>
            </Canvas>
        </StackPanel>



5. PolyLineSegment: It is used to create a set of line segments.

6. PolyQuadraticBezierSegment: It is used to represent a set of quadratic Bezier segments.

Example:

<StackPanel>
            <Canvas>
                <Path Stroke="Red" StrokeThickness="2">
                    <Path.Data>
                        <PathGeometry>
                            <PathGeometry.Figures>
                                <PathFigureCollection>
 
                                    <PathFigure StartPoint="0,100">
                                        <PathFigure.Segments>
                                            <PathSegmentCollection>
 
                                               <PolyQuadraticBezierSegment Points="200,0 200,50 0,100 30,20" />
                                            </PathSegmentCollection>
                                        </PathFigure.Segments>
                                    </PathFigure>
                                </PathFigureCollection>
                            </PathGeometry.Figures>
                        </PathGeometry>
                    </Path.Data>
                </Path>
            </Canvas>
        </StackPanel>

Output




7. QuadraticBezierSegment: It is used to create a quadratic Bezier Curve.

Example:

<Path Stroke="Red" StrokeThickness="2">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigureCollection>
                            <PathFigure StartPoint="0,100">

                                <PathFigure.Segments>
                                    <PathSegmentCollection>
                                        <QuadraticBezierSegment Point1="100,200" Point2="200,100" />
                                    </PathSegmentCollection>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathFigureCollection>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>


Output: