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.

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).

The Dev Codes

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

TheDeveloperBlog.com

WPF Ellipse: Stroke, Fill and MouseEnter

Related Links:

.Net

Java

Related Links