Share via

Xamarin.Forms Shapes: Ellipse

  • Article

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

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

Create an Ellipse

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

To draw a circle, make the WidthRequest and HeightRequest properties of the Ellipse object equal.

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

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

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

Filled ellipse

The following XAML example shows how to draw a circle:

<Ellipse Stroke="Red"
         StrokeThickness="4"
         WidthRequest="150"
         HeightRequest="150"
         HorizontalOptions="Start" />

In this example, a red circle with dimensions 150x150 (device-independent units) is drawn:

Unfilled circle

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