WPF - how do I snap a control position to the current mouse position?

Question

Is there a way to snap to mouse position in WPF in a XAML file? Or does it need to be done in code? I have a control inside a Canvas, and I just want the control to follow the mouse while the mouse cursor is inside the Canvas.

thanks

---

EDIT:

OK, I figured this out relatively easily using the code file. I added a MouseMove event handler on the canvas, and then added:

private void Canvas_MouseMove(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 position of the image to the mouse coordinates. myMouseImage.SetValue(Canvas.LeftProperty, pX); myMouseImage.SetValue(Canvas.TopProperty, pY); } 

using http://msdn.microsoft.com/en-us/library/ms746626.aspx as a guide.

Answer 1

I tried to make a kind of decorator for this. You wrap the object, the mouse position that you want to control over, and bind some control to the MousePosition property of the decorator.

 public class MouseTrackerDecorator : Decorator { static readonly DependencyProperty MousePositionProperty; static MouseTrackerDecorator() { MousePositionProperty = DependencyProperty.Register("MousePosition", typeof(Point), typeof(MouseTrackerDecorator)); } public override UIElement Child { get { return base.Child; } set { if (base.Child != null) base.Child.MouseMove -= _controlledObject_MouseMove; base.Child = value; base.Child.MouseMove += _controlledObject_MouseMove; } } public Point MousePosition { get { return (Point)GetValue(MouseTrackerDecorator.MousePositionProperty); } set { SetValue(MouseTrackerDecorator.MousePositionProperty, value); } } void _controlledObject_MouseMove(object sender, MouseEventArgs e) { Point p = e.GetPosition(base.Child); // Here you can add some validation logic MousePosition = p; } } 

and xaml

 <local:MouseTrackerDecorator x:Name="mouseTracker"> <Canvas Width="200" Height="200" Background="Red"> <Button Width="20" Height="20" Canvas.Left="{Binding ElementName=mouseTracker, Path=MousePosition.X}" Canvas.Top="{Binding ElementName=mouseTracker, Path=MousePosition.Y}" /> </Canvas> </local:MouseTrackerDecorator> 

Answer 2

Tried just a few examples. The msdn documentation is, I think, incorrectly worded

"How to make an object Follow the mouse pointer" should be

"How to make an increase in the size of the object depending on the position of the mouse" in any case.

I was able to achieve this effect by changing the properties of the canvas. I'm also not sure why everyone attached the event handler to the object of the next top-level layout property, and not to the window. Perhaps you and most examples on the Internet are looking for a different effect.

 <Window x:Class="FollowMouse.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" MouseMove="MouseMoveHandler"> <Canvas> <Ellipse Name="ellipse" Fill="LightBlue"Width="100" Height="100"/> </Canvas> 

code for

 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 eclipse to the mouse coordinates. Canvas.SetLeft(ellipse, pX); Canvas.SetTop(ellipse, pY); Canvas.SetRight(ellipse, pX); }