Export (0) Print
Expand All

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 void MouseMoveHandler(object sender, MouseEventArgs e)
{
    // Get the x and y coordinates of the mouse pointer.
    System.Windows.Point position = e.GetPosition(this);
    double pX = position.X;
    double pY = position.Y;

    // Sets the Height/Width of the circle to the mouse coordinates.
    ellipse.Width = pX;
    ellipse.Height = pY;
}
Show:
© 2014 Microsoft