Ellipse In WPF

The Ellipse object represents an ellipse shape and draws an ellipse with the given height and width. This article demonstrates how to create and use an ellipse in WPF and XAML.

The Ellipse object represents an ellipse shape and draws an ellipse with the given height and width. The Width and Height properties of the Ellipse class represent the width and height of an ellipse. The Fill property fills the interior of an ellipse. The Stroke property sets the color and StrokeThickness represents the width of the outer line of an ellipse.

Creating an Ellipse

The Ellipse element in XAML creates an ellipse shape. The following code snippet creates an ellipse by setting its width and height properties to 200 and 100 respectively. The code also sets the black stroke of width to four. 

  1. <Ellipse  
  2.     Width="200"  
  3.     Height="100"  
  4.     Fill="Blue"  
  5.     Stroke="Black"  
  6.  StrokeThickness="4" />  

The output looks like Figure 7.

An Ellipse 
Figure 7. An Ellipse

The CreateAnEllipse method listed in Listing 8 draws the same rectangle in Figure 7 dynamically.

  1. ///<summary>    
  2. /// Creates a blue ellipse with black border    
  3. ///</summary>    
  4. public void CreateAnEllipse() {    
  5.     // Create an Ellipse    
  6.     Ellipse blueRectangle = new Ellipse();    
  7.     blueRectangle.Height = 100;    
  8.     blueRectangle.Width = 200;    
  9.     // Create a blue and a black Brush    
  10.     SolidColorBrush blueBrush = new SolidColorBrush();    
  11.     blueBrush.Color = Colors.Blue;    
  12.     SolidColorBrush blackBrush = new SolidColorBrush();    
  13.     blackBrush.Color = Colors.Black;    
  14.     // Set Ellipse's width and color    
  15.     blueRectangle.StrokeThickness = 4;    
  16.     blueRectangle.Stroke = blackBrush;    
  17.     // Fill rectangle with blue color    
  18.     blueRectangle.Fill = blueBrush;    
  19.     // Add Ellipse to the Grid.    
  20.     LayoutRoot.Children.Add(blueRectangle);    
  21. }   
Listing 7

A circle is an ellipse with an equal width and height. If you set both width and height to 200 in the above code listed in Listing 7, it will generate a circle.