Getting Started

This example will guide you through the steps needed to add a basic RadPath control in your application.

Before you proceed, please, take a look at these articles and follow the instructions to setup your app:

Important properties

The RadPath element exposes the following properties:

  • Fill: Used for setting up the color within the figures. You should set an object of type RadBrush. This can be a RadSolidColorBrush or a RadSweepGradientBrush
  • Geometry: You should set an object of type RadPathGeometry which will provide the geometry that needs to be visualized. The RadPathGeometry consists of different RadPathFigures.
  • Stroke: You can use this property to set the stroke color.
  • StrokeThickness: You can use this property to set the thickness of the stroke.
  • BackgroundColor: You can use this property to modify the color of the rectangle which contains the specific figure.

Creating RadPath with built-in geometry

If your app is correctly set, you are ready to add a RadPath control within your page:

<telerikPrimitives:RadPath x:Name="path"
                           Grid.Row="0"
                           StrokeThickness="0" 
                           Fill="#FFC325"/>

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

xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"

You need to set the Geometry property of the RadPath instance for it to visualize properly. There are several built-in geometries which can be found in the Telerik.XamarinForms.Input.Geometries static class.

this.path.Geometry = Geometries.Star;

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. The definition of the RadPath is similar:

<telerikPrimitives:RadPath x:Name="customPath"
                       Grid.Row="0"
                       StrokeThickness="0" 
                       Fill="#2EC262"/>

Assigning the custom geometry:

this.customPath.Geometry = this.CreateArc();

The Custom geometry definition:

internal RadPathGeometry CreateArc()
{
    var geometry = new RadPathGeometry();

    RadPathFigure figure = new RadPathFigure();
    figure.StartPoint = new Point(0.5, 0.5);
    RadArcSegment segmentA = new RadArcSegment();
    segmentA.Center = new Point(0.5, 0.5);
    segmentA.Size = new Size(1, 1);
    segmentA.StartAngle = 315;
    segmentA.SweepAngle = 270;
    figure.Segments.Add(segmentA);

    RadArcSegment segmentB = new RadArcSegment();
    segmentB.Center = new Point(0.5, 0.5);
    segmentB.Size = new Size(1 - 0.1, 1 - 0.1);
    segmentB.StartAngle = 315 + 270;
    segmentB.SweepAngle = -270;
    figure.Segments.Add(segmentB);

    geometry.Figures.Add(figure);

    return geometry;
}

Both RadPath objects appearance can be reviewed in Figure 1.

Figure 1: RadPath Figures

See Also