Ellipse in Silverlight

Silverlight Ellipse Control

This article demonstrates how to create and use an Ellipse control in Silverlight using XAML and C#.

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 a 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 a Ellipse

The Ellipse element represents a Silverlight Ellipse control in XAML.

The code snippet in Listing 1 creates an Ellipse by setting its width and height properties to 200 and 100 respectively. The code also sets the black stroke of width 4.

<Ellipse

Width="200"

Height="100"

Fill="Blue"

Stroke="Black"

StrokeThickness="4" />

Listing 1

The output looks like Figure 1.

Figure 1

The CreateAnEllipse method listed in Listing 2 draws same Ellipse in Figure 1 dynamically.

/// <summary>

/// Creates a blue Ellipse with black border

/// </summary>

public void CreateAnEllipse()

{

// Create a Ellipse

Ellipse blueEllipse = new Ellipse();

blueEllipse.Height = 100;

blueEllipse.Width = 200;

// Create a blue and a black Brush

SolidColorBrush blueBrush = new SolidColorBrush();

blueBrush.Color = Colors.Blue;

SolidColorBrush blackBrush = new SolidColorBrush();

blackBrush.Color = Colors.Black;

// Set Ellipse's width and color

blueEllipse.StrokeThickness = 4;

blueEllipse.Stroke = blackBrush;

// Fill Ellipse with blue color

blueEllipse.Fill = blueBrush;

// Add Ellipse to the Grid.

LayoutRoot.Children.Add(blueEllipse);

}

Listing 2

If we create an ellipse with an equal width and height, it will create a circle. The following code snippet creates a circle that looks like Figure 2.

<Ellipse

Width="200"

Height="100"

Fill="Blue"

Stroke="Black"

StrokeThickness="4" />

Figure 2

Formatting a Ellipse

We can use the Fill property of the Ellipse to draw an Ellipse with any kind of brush including a solid brush, linear gradient brush, radial gradient brush, or an image brush. The code in Listing 3 uses linear gradient brushes to draw the background and foreground of a Ellipse.

<Ellipse

Width="200"

Height="100"

Stroke="Black"

StrokeThickness="4" >

<Ellipse.Fill>

</LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

Listing 3

The new Ellipse looks like Figure 3.

Figure 3

Setting Image as Background of a Ellipse

To set an image as background of a Ellipse, we can set an image brush as the Fill of the Ellipse. The code in Listing 4 sets fills the Ellipse with an image.

<Ellipse.Fill >

</Ellipse.Fill >

Listing 4

The new output looks like Figure 4.

Figure 4

Drawing a Semi-transparent Ellipse

The Opacity property represents the transparency of an Ellipse. The value of Opacity is between 0 and 1, where 0 is fully transparent and 1 is fully opaque. The code listed in Listing 5 generates a semi-transparent ellipse.

<Ellipse

Width="200"

Height="100"

Stroke="Black"

StrokeThickness="4"

Opacity="0.5">

Listing 5

The new output looks like Figure 5.

Figure 5

Summary

In this article, I discussed how we can create an Ellipse control in Silverlight at design-time using XAML and at run-time using C#. We also saw how we can format an Ellipse by setting its fill property. After that, we saw you to set an image as the background of a Ellipse. In the end, we saw how to draw a semi-transparent Ellipse.