In this article we will learn how to use Ellipse control in Silverlight 4.
Ellipse Control
The Ellipse control is also called the shape control. Ellipse control are used to draws an Ellipse with the given height and width.
Properties - These are the following properties of the Ellipse control.
Figure 1.
Width -Width properties of the Ellipse class represent the width and of a Ellipse.
Height - Height properties of the Ellipse class represent the height of a Ellipse.
Fill - property fills the interior of an Ellipse.
Stroke - property sets the color and StrokeThickness represents the width of the outer line of an Ellipse.
Creating a Ellipse
Silverlight Ellipse control in XAML.
<Ellipse/>
Now set the properties Height=100, Width=200, Stroke=Blue, Fill=brown of the Ellipse control.
<Ellipse Height="100" HorizontalAlignment="Left" Margin="87,77,0,0" Name="Ellipse1" Stroke="Blue"StrokeThickness="4" VerticalAlignment="Top" Width="200" Fill="Brown" />
The output looks like this.
Figure 2.
If we want to create an circle then set the width and height property equal. it will create a circle. The following code create a circle.
<Ellipse Height="200" HorizontalAlignment="Left" Margin="87,77,0,0" Name="Ellipse1" Stroke="Blue"StrokeThickness="4" VerticalAlignment="Top" Width="200" Fill="Brown" />
The output looks like this.
Figure 3.
Setting Image as Background of a Ellipse
Set the fill property to fill the image in Ellipse.
<Ellipse.Fill>
<ImageBrush ImageSource="/SilverlightApplication25;component/Images/flowers-image.jpg" />
</Ellipse.Fill>
The output looks like this.
Figure 4.
Formatting a Ellipse
The Fill property of the Ellipse are used to draw an Ellipse with any kind of brush including a solid brush, linear gradient brush, radial gradient brush, or an image brush. This property looks like this.
Figure 5.
<Ellipse Width="200" Height="100" StrokeThickness="4" Stroke="DarkRed">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
<GradientStop Color="Blue" Offset="0.1" />
<GradientStop Color="Orange" Offset="0.374" />
<GradientStop Color="Green" Offset="0.797" />
<GradientStop Color="Red" Offset="1" />
<GradientStop Color="Blue" Offset="0.106" />
<GradientStop Color="#FF4A8A00" Offset="0.626" />
<GradientStop Color="#FF939400" Offset="0.618" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
The output looks like this.
Figure 6.
Using Opacity property for transparency of an Ellipse
<Ellipse Width="200" Height="100" StrokeThickness="4" Stroke="DarkRed" Opacity="0.5">
The output looks like this.
Figure 7.