Silverlight Ellipse control in VB.NET

In this article we will learn how to use Ellipse control in Silverlight 4.
  • 2268

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.

ellipse.gif
 

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.

 

ellipse1.gif

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.


 

ellipse2.gif

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.


 

ellipse3.gif

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.

ellipse4.gif

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.

ellipse5.gif

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.

ellipse6.gif

Figure 7.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.