Home
WPF
Ellipse: Stroke, Fill and MouseEnter
This page was last reviewed on 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 tested code examples. Pages are continually updated to stay current, with code correctness a top priority.
Sam Allen is passionate about computer languages. In the past, his work has been recommended by Apple and Microsoft and he has studied computers at a selective university in the United States.
This page was last updated on Sep 25, 2024 (edit).
Home
Changes
© 2007-2024 Sam Allen.