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

SDK Browser and QSF applications contain different examples that show RadPath's main features. You can find the applications in the Examples and QSF folders of your local Telerik UI for Xamarin installation.

See Also