Home
WPF
Ellipse: Stroke, Fill and MouseEnter
Updated Sep 25, 2024
Dot Net Perls
Ellipse. An Ellipse can be used as a button or for graphical design. We can use events (such as MouseEnter and MouseLeave) on an Ellipse.
Getting started. Please drag an Ellipse from the Toolbox to your WPF window. We will create a graphical element that changes color (and runs code) on mouse over.
Code example. 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.
<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>
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, MouseLeave. We use these 2 events to make the Ellipse interactive. In Ellipse_MouseEnter, we cast the sender argument to an Ellipse with the as-cast.
Then We assign the Fill to Brushes.AliceBlue, a light blue shade. This changes the background color of the ellipse.
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 the opposite.
Summary. As part of WPF programs, you can draw and transform shapes, such as the Ellipse. This makes graphical, interactive programs easier to develop.
Dot Net Perls is a collection of pages with code examples, which are updated to stay current. Programming is an art, and it can be learned from examples.
Donate to this site to help offset the costs of running the server. Sites like this will cease to exist if there is no financial support for them.
Sam Allen is passionate about computer languages, and he maintains 100% of the material available on this website. He hopes it makes the world a nicer place.
This page was last updated on Sep 25, 2024 (edit).
Home
Changes
© 2007-2025 Sam Allen