.NET 4.0+

WPF Shapes - Ellipse

by Richard Carr, published at http://www.blackwasp.co.uk/WPFEllipse.aspx

The one hundred and twenty-first part of the Windows Presentation Foundation Fundamentals tutorial looks at the Ellipse class, which draws a filled or transparent ellipse.

Ellipse

In the previous two articles we've seen the Line and Rectangle classes, which draw shapes in WPF windows. In this article we'll look at a third shape class, which produces ellipses.

The Ellipse class is used in almost exactly the same manner as Rectangle. You set the height and width of the control to determine the shape, and the stroke and fill properties to determine the border width and the colours for the border and the inner area. Unlike Rectangle, there are no properties to control the rendering of the curves. These are automatically calculated to form a true ellipse.

To demonstrate the use of ellipses, create a new WPF application project in Visual Studio. Name the solution, "EllipseDemo". Once loaded, replace the XAML of the main window with the following code:

<Window x:Class="EllipseDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ellipse Demo" Height="200" Width="200">
    <Canvas>
        <Ellipse Height="100" Width="100" Fill="Green" />
        <Ellipse Height="100" Width="100" Fill="Red" Stroke="DarkRed" StrokeThickness="5"
                 Canvas.Left="76"/>
        <Ellipse Height="100" Width="100" Stroke="Black" StrokeThickness="5"
                 Canvas.Left="38" Canvas.Top="60"/>
    </Canvas>
</Window>

The above XAML generates a window containing three ellipses. For each shape, the Height and Width properties match, so the shapes are actually circles. The first ellipse has no border but is filled. The second sets the Stroke, StrokeThickness and Fill properties to draw a filled shape with a border. The third circle has a border but is not filled, so the inner area is transparent.