TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

WPF Ellipse: Stroke, Fill and MouseEnter

This WPF article uses the Ellipse control. It uses Fill and Stroke. The example handles MouseEnter and MouseLeave events.

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

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf