WPF Ellipse: Stroke, Fill and MouseEnter

Ellipse. An Ellipse is round. It can be used for many purposes in WPF programs—as a button or graphical design.

We can use events (such as MouseEnter and MouseLeave) on an Ellipse. And we can dynamically change its appearance.

Based on:

.NET 4.5

Example. To begin, please drag an Ellipse from the Toolbox to your WPF window. You can change the Fill attribute in the XAML to a color. Also, you can adjust the Stroke—this is the border of the Ellipse.

Here: We add the MouseEnter and MouseLeave attributes. We have Visual Studio create the event handlers.

And: We set the Fill to "Salmon" for a good fishy quality, but leave the "Stroke" as "Black". Width and Height are set to 100 each.

Example markup: XAML

<Window x:Class="WpfApplication26.MainWindow"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="MainWindow" Height="350" Width="525">
    <Grid>
	<Ellipse Fill="Salmon"
		 HorizontalAlignment="Left"
		 Height="100"
		 Margin="10,10,0,0"
		 Stroke="Black"
		 VerticalAlignment="Top"
		 Width="100"
		 MouseEnter="Ellipse_MouseEnter"
		 MouseLeave="Ellipse_MouseLeave"/>
    </Grid>
</Window>

Example code: C#

using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;

namespace WpfApplication26
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
	public MainWindow()
	{
	    InitializeComponent();
	}

	private void Ellipse_MouseEnter(object sender, MouseEventArgs e)
	{
	    // ... Change Ellipse to a blue color.
	    var ellipse = sender as Ellipse;
	    ellipse.Fill = Brushes.AliceBlue;
	}

	private void Ellipse_MouseLeave(object sender, MouseEventArgs e)
	{
	    // ... Change Ellipse to a red color.
	    var ellipse = sender as Ellipse;
	    ellipse.Fill = Brushes.Salmon;
	}
    }
}

MouseEnter and MouseLeave. We use these two events to make the Ellipse interactive. In Ellipse_MouseEnter, we cast the sender argument to an Ellipse with the as-cast. We then assign the Fill to Brushes.AliceBlue, a light blue shade.

As

And: In MouseLeave, we take the same exact steps, except we use Brushes.Salmon to return our Ellipse to a fish color.

Note: MouseEnter and MouseLeave could be combined into a single method, one that changes Salmon to AliceBlue, and vice versa.

Summary. WPF provides many advanced rendering capabilities. As part of this functionality, you can draw and transform shapes, such as the Ellipse. This makes graphical, interactive programs easier to develop (although not trivial).

Related Links