Share via


How to: Draw an Ellipse or a Circle

This example shows how to draw ellipses and circles by using the Ellipse element. To draw an ellipse, create an Ellipse element and specify its Width and Height. Use its Fill property to specify the Brush that is used to paint the interior of the ellipse. Use its Stroke property to specify the Brush that is used to paint the outline of the ellipse. The StrokeThickness property specifies the thickness of the ellipse outline.

To draw a circle, make the Width and Height of the Ellipse element equal to each other.

The following example draws four Ellipse elements within a Canvas.

Example

<Canvas Height="200" Width="200">

  <!-- Draws an oval with a blue interior. -->
  <Ellipse
    Width="100"
    Height="50"
    Fill="Blue"
    Canvas.Left="10"
    Canvas.Top="25" />

  <!-- Draws an oval with a blue interior and a black outline. -->
  <Ellipse
    Width="100"
    Height="50"
    Fill="Blue"
    Stroke="Black"
    StrokeThickness="4"
    Canvas.Left="10"
    Canvas.Top="100"/>

  <!-- Draws a circle with a blue interior. -->
  <Ellipse
    Width="50"
    Height="50"
    Fill="Blue"
    Canvas.Left="135"
    Canvas.Top="25"/>

  <!-- Draws a circle with a blue interior and a black outline. -->
  <Ellipse
    Width="50"
    Height="50"
    Stroke="Black"
    StrokeThickness="4"
    Canvas.Left="135"
    Canvas.Top="100" />

</Canvas>

Although this example uses a Canvas to contain the ellipses, you can use ellipse elements (and all the other shape elements) with any Panel or Control that supports non-text content.

This example is part of a larger sample; for the complete sample, see Shape Elements Sample.

See Also

Reference

Ellipse
Shape

Other Resources

Shape Elements Sample