Input Events in WPF using VB.NET: Part 2
In this article you will learn about the all Input Events in WPF.
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.