WPF Ellipse control in VB.NET

In this article we will learn how to use Ellipse control in WPF.
  • 2390

In this article we will learn how to use Ellipse control in WPF.

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.

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

WPF 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="Maroon" />

 

The output looks like this.


ell2.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="Maroon" />

 

The output looks like this.


ell3.gif 

Figure 3.

Setting Image as Background of a Ellipse

Set the fill property to fill the image in Ellipse. Now select image...

ell4.gif

Figure 4.

The output looks like this.


ell5.gif 

Figure 5.

 

XAML code

 

<Ellipse.Fill>

<ImageBrush ImageSource="/WpfApplication4;component/Images/imagec26.jpg" />

</Ellipse.Fill>

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.

ell6.gif

Figure 6.

The output looks like this.

ell7.gif

Figure 7.

XAML code

 

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

 

Using Opacity property for transparency of an Ellipse

 

Figure 8.

ell8.gif

The output looks like this.

ell9.gif

Figure 9.

XAML code

 

<Ellipse Height="200" HorizontalAlignment="Left" Margin="87,77,0,0" Name="Ellipse1"Stroke="Blue" StrokeThickness="4" 
VerticalAlignment
="Top" Width="200" Opacity="0.5">

            <Ellipse.Fill>

                <ImageBrush ImageSource="/WpfApplication4;component/Images/imagec26.jpg" />

            </Ellipse.Fill>

        </Ellipse> 

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.