Edit

Xamarin.Forms Shapes: Rectangle

  • Article

Download Sample Download the sample

The Rectangle class derives from the Shape class, and can be used to draw rectangles and squares. For information on the properties that the Rectangle class inherits from the Shape class, see Xamarin.Forms Shapes.

Rectangle defines the following properties:

  • RadiusX, of type double, which is the x-axis radius that's used to round the corners of the rectangle. The default value of this property is 0.0.
  • RadiusY, of type double, which is the y-axis radius that's used to round the corners of the rectangle. The default value of this property is 0.0.

These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

The Rectangle class sets the Aspect property, inherited from the Shape class, to Stretch.Fill. For more information about the Aspect property, see Stretch shapes.

Create a Rectangle

To draw a rectangle, create a Rectangle object and sets its WidthRequest and HeightRequest properties. To paint the inside of the rectangle, set its Fill property to a Brush-derived object. To give the rectangle an outline, set its Stroke property to a Brush-derived object. The StrokeThickness property specifies the thickness of the rectangle outline. For more information about Brush objects, see Xamarin.Forms Brushes.

To give the rectangle rounded corners, set its RadiusX and RadiusY properties. These properties set the x-axis and y-axis radii that's used to round the corners of the rectangle.

To draw a square, make the WidthRequest and HeightRequest properties of the Rectangle object equal.

The following XAML example shows how to draw a filled rectangle:

<Rectangle Fill="Red"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Start" />

In this example, a red filled rectangle with dimensions 150x50 (device-independent units) is drawn:

Filled rectangle

The following XAML example shows how to draw a filled rectangle, with rounded corners:

<Rectangle Fill="Blue"
           Stroke="Black"
           StrokeThickness="3"
           RadiusX="50"
           RadiusY="10"
           WidthRequest="200"
           HeightRequest="100"
           HorizontalOptions="Start" />

In this example, a blue filled rectangle with rounded corners is drawn:

Rectangle with rounded corners

For information about drawing a dashed rectangle, see Draw dashed shapes.