.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 more segments, for example, RadArcSegment
or RadLineSegment
. To create a figure that will be added to the figures collection of the geometry, add the segments and set up the the StartPoint
of the RadPathFigure
.
Each line or arc segment you add to the path figure is drawn so - 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;
4. Add the namespace:
using Microsoft.Maui.Controls.Xaml;
using Microsoft.Maui.Graphics;
using System;
using Telerik.Maui.Controls;
using Telerik.Maui.Controls.Paths;