Ellipse control WPF in VB.NET

Here we see how to create ellipse and also explains the basic use of the various ellipse property in xaml.
  • 3448

Here we see how to create ellipse and also explains the basic use of the various ellipse property in xaml.

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.

Creating Ellipse in XAML

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

 

The width property represent the width of the Ellipse. The Height property represents the height of the Ellipse and Name attribute represents the name of the control. The Stroke property sets the color and StrokeThickness represents the width of the outer line of an Ellipse.

 

e1.gif
 

Figure1.gif

 

Now using Fill property to fill the Ellipse.

XAML code

<Ellipse Height="100" HorizontalAlignment="Left" Margin="87,77,0,0" Name="Ellipse1" Stroke="Blue" StrokeThickness="4" VerticalAlignment="Top" Width="200" Fill="DarkGreen" />

 

The fill property is used to fill the interior of an Ellipse.

e2.gif

Figure2.gif

Setting Image as Background of a Ellipse

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

XAML code

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

            <Ellipse.Fill>

                <ImageBrush ImageSource="/WpfApplication70;component/Images/image1.jpg.gif" />

            </Ellipse.Fill>

        </Ellipse>

The image looks like this in interior ellipse.

e3.gif

Figure3.gif

Using Opacity property for transparency of an Ellipse

 

XAML code

 

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

            <Ellipse.Fill>

                <ImageBrush ImageSource="/WpfApplication70;component/Images/image1.jpg.gif" />

            </Ellipse.Fill>

        </Ellipse>

 

The image looks like this in interior ellipse.


e4.gif

 

Figure4.gif

 

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.

 

XAML code

 

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

            <Ellipse.Fill>

                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                    <GradientStop Color="Black" Offset="0" />

                    <GradientStop Color="#9B2EC7D4" Offset="1" />

                </LinearGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

 

The formatted Ellipse looks like this.

 

e5.gif

 

Figure5.gif.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.