How to: Make an Object Follow the Mouse Pointer

This example shows how to change the dimensions of an object when the mouse pointer moves on the screen.

The example includes an Extensible Application Markup Language (XAML) file that creates the user interface (UI) and a code-behind file that creates the event handler.

The following XAML creates the UI, which consists of an Ellipse inside of a StackPanel, and attaches the event handler for the MouseMove event.

<Window x:Class="WCSamples.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="mouseMoveWithPointer"
    Height="400"
    Width="500"
    >
  <Canvas MouseMove="MouseMoveHandler"
          Background="LemonChiffon">
    <Ellipse Name="ellipse" Fill="LightBlue" 
             Width="100" Height="100"/>
  </Canvas>
</Window>

The following code behind creates the MouseMove event handler. When the mouse pointer moves, the height and the width of the Ellipse are increased and decreased.

' raised when the mouse pointer moves. 
' Expands the dimensions of an Ellipse when the mouse moves. 
Private Sub OnMouseMoveHandler(ByVal sender As Object, ByVal e As MouseEventArgs)

    'Get the x and y coordinates of the mouse pointer. 
    Dim position As System.Windows.Point
    position = e.GetPosition(Me)
    Dim pX As Double
    pX = position.X
    Dim pY As Double
    pY = position.Y

    'Set the Height and Width of the Ellipse to the mouse coordinates.
    ellipse1.Height = pY
    ellipse1.Width = pX
End Sub
Was this page helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2015 Microsoft