Input Events in WPF: Part 2

As you learn about keyboard event in my previous article and learn that the Input Events divided into three categories Keyboard events, Mouse events, Stylus events. This part of article explain about the Mouse events.

Mouse Events: There are so many tasks which performed by the mouse event but the most fundamental events you to react when the mouse is moved over an element. Both are direct events, which means they don't use tunneling or bubbling. Instead, they originate in one element and are raised by just that element. This makes sense because of the way controls are nested in a WPF window. All mouse button events provide a MouseButtonEventArgs object. The MouseButtonEventArgs class derives from MouseEventArgs (which means it includes the same coordinate and button state information) and it adds a few members.

Example of the Mouse Event
Xaml Code

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:d="http://schemas.microsoft.com/expression/interactivedesigner/2006"
  mc:Ignorable="d"
  x:Class="InputExamples.MousePosition"
  Width="640" Height="480">
    <Label d:LayoutOverrides="Height" x:Name="firstCoordinates"/>
    <Rectangle Stroke="#FF000000" Fill="#FFFFFFFF" x:Name="Rectangle"/>
    <Rectangle Stroke="#FF000000" Fill="#FFFFFFFF" x:Name="secondEllipse"/>
    <Ellipse d:LayoutOverrides="Height" Stroke="#FF000000" Width="14" Height="14" x:Name="firstEllipse"/>
    <Ellipse d:LayoutOverrides="Width" Stroke="#FF000000" Width="14" Height="14" x:Name="fourthEllipse"/>
    <Ellipse d:LayoutOverrides="Width" Stroke="#FF000000" Width="14" Height="14" x:Name="thirdEllipse"/>
    <Label d:LayoutOverrides="Width, Height" x:Name="secondCoordinates" Margin="287,254,0,192" HorizontalAlignment="Left" Width="117" />
    <Label d:LayoutOverrides="Width, Height" Width="100" x:Name="thirdCoordinates" Margin="422,254,118,192" />
    <Label d:LayoutOverrides="Width, Height" x:Name="fourthCoordinates" Margin="137,257,378,192" />
    <Rectangle Fill="blue" Width="16" Height="16" x:Name="DragEllipse" Margin="311,232,313,232" />
</Grid>

Vb Code

Imports System
Imports System.Net
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Navigation
Imports System.Windows.Shapes 
Namespace InputExamples
    Partial Public Class MousePosition
        Private ellipseTransform As New TranslateTransform() 
        Public Sub New()
            Me.InitializeComponent()
        End Sub
        Protected Overrides Sub OnInitialized(ByVal e As EventArgs)
            MyBase.OnInitialized(e)
            DragEllipse.RenderTransform = ellipseTransform
            AddHandler CompositionTarget.Rendering, AddressOf Me.CompositionTarget_Rendering
        End Sub 
        Private Sub CompositionTarget_Rendering(ByVal sender As Object, ByVal e As EventArgs)
            Dim mouse1 As Point = Mouse.GetPosition(firstEllipse)
            Dim mouse2 As Point = Mouse.GetPosition(secondEllipse)
            Dim mouse3 As Point = Mouse.GetPosition(thirdEllipse)
            Dim mouse4 As Point = Mouse.GetPosition(fourthEllipse)
            firstCoordinates.Content = mouse1.ToString()
            secondCoordinates.Content = mouse2.ToString()
            thirdCoordinates.Content = mouse3.ToString()
            fourthCoordinates.Content = mouse4.ToString() 
            Dim position As Point = Mouse.GetPosition(DragEllipse)
            ellipseTransform.X += position.X - (DragEllipse.Width / 2)
            ellipseTransform.Y += position.Y - (DragEllipse.Height / 2)
        End Sub
    End Class
End Namespace

Output Window

Conclusion

Hope this article helps you to understand the Input Events in WPF. Remaining part of this article you will see in my next article.