There are several built-in controls in xamarin technology. Including a new API with an ellipse, line, polygon, rectangle, polyline, etc. All shapes are supported by common styling properties. You can easily implement such beautiful shapes in an application using the methods below.

The shape is a part of the drawing UI feature of xamarin.forms. The developer can convert a shape into a linear code.

The shape is a type of View that enables to draw the screen. The shape can be used inside layout classes and many controls because the shape class is derived from the view class.

Aspect

Aspect is a type of stretch. It describes how the shape fills its allocated space and by default the Aspects property value is Stretch.None.

Fill

Fill is a type of Brush. The brush is used to paint in shape interior.

Stroke

A stroke is a type of Brush. It can be used to paint the shape’s outline.

StrokeDashArray

StrokeDashArray is a kind of double collection, it represents a collection of double values showing the line and space patterns used to constrain the shape.

StrokeDashOffset

StrokeDashOffset is a type of double. This property is used for showing distance between one dash line ending to second-line starting and StrokeDashOffset default value is 0.0.

StrokeLineCap

StrokeLineCap is a type of PenLineCap. This property is used for showing the shape of the line segment. StrokeLineCap property’s default value is PenLineCap.Flat.

StrokeLineJoin

StrokeLineJoin is a type of PenLineJoin. This property can define the specific type of join that is used for vertices of the shape. StrokeLineJoin property’s default value is PenLineJoin.Meter.

StrokeMiterLimit

StrokeMiterLimit is a type of double. This property specifies the limit on the ratio of the miter length for the StrokeThickness of shape.StrokeMiterLimit default value is 10.0.

StrokeThickness

StrokeThickness is a type of double. This property indicates the width of the shape outline and StrokeThickness default value is 0.0.

These properties are registered by the BindableProperty objects, which means they can be stylized and data-binding targets.

Example:

Using Rectangle:

Using Line:

Paths control is a control of xamarin.forms 5. The path control can be used for the Custom design. If you use an SVG image, then you are already using Paths.

The Path class is derived from the shape class and you have also created complex shapes and curves. These curves and shapes are described using Geometry objects.

Data:

Data is a type of Geometry. This property is use for drawing the particular shapes.

RenderTransform:

RenderTransform is a type of transform. This property represents the transform that is applied in geometry using a path before it is drawn

These properties are registered by the BindableProperty objects, which means they can be stylized and be the goal of data-bindings.

How to Create Path?

There are two methods for creating the path the following:

Create a path With Mark-up Syntax:

Example for Rectangle:

Describe

M -M is the Move Command, Establish the start point for the path.

L -L is a Line Command, which specify the starting and ending point of the line.

Z- Z is the Close Command, which creates a line that connects the starting point.

Create a path with Geometry Objects

Curves and shapes can be defined using geometry objects and it is used to set the data property of the Path object. There are three varieties of objects below.

All geometry is to be used for simple shapes. But if you create complex shapes and curves that can be used as a PathGeometry. PathGeometry objects consist of one or more PathFigure objects. Each PathFigure object represents a different shape. Each PathFigure object itself consists of one or more PathSegment objects, each of which represents the binding part of the shape. There are three segment objects below.

Example using Triangle:

Code:

Describe

The starting point of the triangle is (20,200). A line segment is drawn between (20,200) to (200,200) and (200,200) to (200,60). The numbers in the first and last segment are then linked because of the PathFigure.IsClosed property is set to true.