![WPF Tutorial](/wpf/images/wpf-mini-logo.jpg)
- WPF Tutorial
- WPF - Home
- WPF - Overview
- WPF - Environment Setup
- WPF - Hello World
- WPF - XAML Overview
- WPF - Elements Tree
- WPF - Dependency Properties
- WPF - Routed Events
- WPF - Controls
- WPF - Layouts
- WPF - Nesting Of Layout
- WPF - Input
- WPF - Command Line
- WPF - Data Binding
- WPF - Resources
- WPF - Templates
- WPF - Styles
- WPF - Triggers
- WPF - Debugging
- WPF - Custom Controls
- WPF - Exception Handling
- WPF - Localization
- WPF - Interaction
- WPF - 2D Graphics
- WPF - 3D Graphics
- WPF - Multimedia
- WPF Useful Resources
- WPF - Quick Guide
- WPF - Useful Resources
- WPF - Discussion
WPF - Mouse
There are different types of mouse inputs such as MouseDown, MouseEnter, MouseLeave, etc. In the following example, we will handle some of the mouse inputs.
Let’s create a new WPF project with the name WPFMouseInput.
Drag a rectangle and three Text blocks to a stack panel and set the following properties and events as shown in the following XAML file.
<Window x:Class = "WPFMouseInput.MainWindow" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local = "clr-namespace:WPFMouseInput" mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604"> <StackPanel> <Rectangle x:Name = "mrRec" Fill = "AliceBlue" MouseEnter = "OnMouseEnter" MouseLeave = "OnMouseLeave" MouseMove = "OnMouseMove" MouseDown = "OnMouseDown" Height = "100" Margin = "20"> </Rectangle> <TextBlock x:Name = "txt1" Height = "31" HorizontalAlignment = "Right" Width = "250" Margin = "0,0,294,0" /> <TextBlock x:Name = "txt2" Height = "31" HorizontalAlignment = "Right" Width = "250" Margin = "0,0,294,0" /> <TextBlock x:Name = "txt3" Height = "31" HorizontalAlignment = "Right" Width = "250" Margin = "0,0,294,0" /> </StackPanel> </Window>
Here is the C# code in which different mouse events are handled.
using System.Windows; using System.Windows.Input; using System.Windows.Media; using System.Windows.Shapes; namespace WPFMouseInput { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void OnMouseEnter(object sender, MouseEventArgs e) { Rectangle source = e.Source as Rectangle; if (source != null) { source.Fill = Brushes.SlateGray; } txt1.Text = "Mouse Entered"; } private void OnMouseLeave(object sender, MouseEventArgs e) { // Cast the source of the event to a Button. Rectangle source = e.Source as Rectangle; // If source is a Button. if (source != null) { source.Fill = Brushes.AliceBlue; } txt1.Text = "Mouse Leave"; txt2.Text = ""; txt3.Text = ""; } private void OnMouseMove(object sender, MouseEventArgs e) { Point pnt = e.GetPosition(mrRec); txt2.Text = "Mouse Move: " + pnt.ToString(); } private void OnMouseDown(object sender, MouseButtonEventArgs e) { Rectangle source = e.Source as Rectangle; Point pnt = e.GetPosition(mrRec); txt3.Text = "Mouse Click: " + pnt.ToString(); if (source != null) { source.Fill = Brushes.Beige; } } } }
When you compile and execute the above code, it will produce the following window −
![Output of Mouse](/wpf/images/output_of_mouse.jpg)
When the mouse enters inside the rectangle, the color of the rectangle will automatically change. In addition, you will get a message that the mouse has entered along with its coordinates.
![Mouse enters inside rectangle](/wpf/images/mouse_enters_inside_rectangle.jpg)
When you click inside the rectangle, it will change color and show the coordinates at which mouse has been clicked.
![Mouse clicks inside rectangle](/wpf/images/mouse_clicks_inside_rectangle.jpg)
When the mouse leaves the rectangle, it will show a message that mouse has left and the rectangle will change to its default color.
![Mouse Leaves Rectangle](/wpf/images/mouse_leaves_rectangle.jpg)