WPF Ellipse control 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>