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.
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.
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.
Figure 3.
Setting Image as Background of a Ellipse
Set the fill property to fill the image in Ellipse. Now select image...
Figure 4.
The output looks like this.
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.
Figure 6.
The output looks like this.
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.
The output looks like this.
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>