Ellipse in Silverlight

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


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.

 

<Ellipse/>

 

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 StartPoint="0,0" EndPoint="1,1" >

            <GradientStop Color="Blue" Offset="0.1" />

            <GradientStop Color="Orange" Offset="0.25" />

            <GradientStop Color="Green" Offset="0.75" />

            <GradientStop Color="Red" Offset="1.0" />

        </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 >

    <ImageBrush ImageSource="dock.jpg" />

</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.