.NET MAUI Path Geometry

To create a specific Path, you need to set a RadPathGeometry object to its Geometry property. The RadPathGeometry object exposes a Figures property which is a collection of RadPathFigures.

RadPathFigure

Each of the RadPathFigure objects is composed of one or several segments. These can be a RadArcSegment or a RadLineSegment. Adding several segments in combination with setting up the StartPoint of the RadPathFigure is enough for you to create the desired figure which have to be added to the figures collection of the geometry.

Each line or arc segment you add to the path figure is drawn consequently - its starting point is the last point of the previous segment of the Segments collection of the PathFigure object. The first segment uses the StartPoint of the path figure as a starting point.

RadArcSegment

The RadArcSegment represents an elliptical arc between two points. It exposes the following properties:

• Center: Defines the center point of the arc.
• Size: Sets the x- and y-diameter of the arc as a Size structure.
• StartAngle: Determines the angle from which the arc segment will start.
• SweepAngle: Specifies the length in degrees from the first to the second arc point. Positive angles are counter clockwise and negative angles clockwise.

The scheme below shows how StartAngle and SweepAngle are applied to the ArcSegment:

The following example shows a sample implementation of an RadArcSegment object.

Define the Path.

<telerik:RadPath x:Name="simpleArcPath"
                 StrokeThickness="4"
                 Stroke="#2EC262"
                 HorizontalOptions="Center"
                 VerticalOptions="Center">
    <telerik:RadPath.Geometry>
        <telerik:RadPathGeometry>
            <telerik:RadPathFigure StartPoint="1, 0.5">
                <telerik:RadArcSegment Center="0.5, 0.5"
                                       Size ="1, 1"
                                       StartAngle="0"
                                       SweepAngle="180" />
            </telerik:RadPathFigure>
        </telerik:RadPathGeometry>
    </telerik:RadPath.Geometry>
</telerik:RadPath>

Add the namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

RadLineSegment

The RadLineSegment creates a line between two points in a RadPathFigure. The starting point of the line is defined either by the previous segment's end point or by the StartPoint of the PathFigure object. The end point is defined by the Point property of the LineSegment object.

The thickness and the color of the line are determined by the StrokeThickness and Stroke properties of the Path object to which this line figure is added.

The following example shows how to create a line PathFigure.

Define the Path.

<telerik:RadPath x:Name="simpleLinePath"
                 Grid.Row="1"
                 StrokeThickness="4"
                 Stroke="#2EC262"
                 HorizontalOptions="Center"
                 VerticalOptions="Center">
    <telerik:RadPath.Geometry>
        <telerik:RadPathGeometry>
            <telerik:RadPathFigure StartPoint="0.8, 0.1">
                <telerik:RadLineSegment Point="0.1, 0.8" />
            </telerik:RadPathFigure>
        </telerik:RadPathGeometry>
    </telerik:RadPath.Geometry>
</telerik:RadPath>

Add the namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

Example

The following example shows how to create a more complex RadPathGeometry object and add a line with curved edges to its Figures collection.

1. First, define the RadPath figure:

   <telerik:RadPath x:Name="customLinePath"
                  Grid.Row="2"
                  StrokeThickness="0"
                  Fill="#3DBAFE"
                  HorizontalOptions="Center"
                  VerticalOptions="Center" />
   

2. Add the namespace:

   xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
   

3. Then, set its Geometry to have the following structure:

   RadPathFigure customLine = new RadPathFigure();
   customLine.StartPoint = new Point(0.8, 0.1);
   customLine.Segments.Add(new RadLineSegment(new Point(0.1, 0.8)));
   
   
   customLine.Segments.Add(new RadArcSegment() { Center = new Point(0.125, 0.825), StartAngle = 135, SweepAngle = 180, Size = new Size(0.070710678, 0.070710678) });
   customLine.Segments.Add(new RadLineSegment(new Point(0.85, 0.15)));
   customLine.Segments.Add(new RadArcSegment() { Center = new Point(0.825, 0.125), StartAngle = 315, SweepAngle = 180, Size = new Size(0.070710678, 0.070710678) });
   
   RadPathGeometry geometry = new RadPathGeometry();
   geometry.Figures.Add(customLine);
   customLinePath.Geometry = geometry;
   

   1. Add the namespace:

   using Microsoft.Maui.Graphics;
   using Telerik.Maui.Control;
   using Telerik.Maui.Controls.Compatibility.Common;
   

   The following image shows the result after creating the three Paths:

   

   See Also

   • MultiPath
   • Styling