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.