Getting Started

RadPath is rendered via the SkiaSharp graphics library.

Define RadPath control

RadPath control exposes Geometry property which should be assigned to a RadPathGeometry object. RadPathGeometry consists of different RadPathFigures such as line and arc. RadPath also provides a few predefined geometries such as star, circle and other. Below you can find two examples of creating a path with built-in as well as custom geometry.

Creating RadPath with built-in geometry

RadPath provides several built-in geometries that can be found in the Telerik.XamarinForms.Input.Geometries static class. Below you could find a list of the available geometries:

  • Star;
  • Circle;
  • Heart;
  • Diamond.

You can choose any of those and set it directly to the Geometry property of the Path component:

<telerikPrimitives:RadPath x:Name="starPath"
                           StrokeThickness="0" 
                           Fill="#FFC325"
                           Geometry="{x:Static telerikInput:Geometries.Star}" />

In addition to this you need to add the following namespaces:

xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.Maui.Controls.Compatibility"
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.Maui.Controls.Compatibility"

Register the Telerik controls through Telerik.Maui.Controls.Compatibility.UseTelerik extension method called inside the Configure method of the Startup.cs file of your project:

using Telerik.Maui.Controls.Compatibility;



public void Configure(IAppHostBuilder appBuilder)
{
    appBuilder        
        .UseTelerik()
        .UseMauiApp<App>();

}              

Creating RadPath with custom geometry

You are free to create a custom geometry which will be visualized by the RadPath control. For that purpose, you need to create object of type RadPathGeometry and add a RadPathFigure with the needed segments.

The next example shows a RadPath with an Arc definition:

<telerikPrimitives:RadPath x:Name="customPath"
                       Grid.Row="0"
                       StrokeThickness="4" 
                       Stroke="#2EC262">
    <telerikCommon:RadPathGeometry>
        <telerikCommon:RadPathFigure StartPoint="0.85, 0.85">
            <telerikCommon:RadArcSegment Center = "0.5, 0.5"
                                         Size = "1, 1"
                                         StartAngle = "315"
                                         SweepAngle = "270" />
        </telerikCommon:RadPathFigure>
    </telerikCommon:RadPathGeometry>
</telerikPrimitives:RadPath>

and add the following namespace:

xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.Maui.Controls.Compatibility"
xmlns:telerikCommon="clr-namespace:Telerik.XamarinForms.Common;assembly=Telerik.Maui.Controls.Compatibility"

Both RadPath objects appearance can be reviewed in the image below:

RadPath Figures

See Also

In this article
Not finding the help you need?