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.
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.
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.
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.
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.
Figure5.gif.