开发者

WPF - how do I bind a control's position to the current mouse position?

Is there a way to bind to the mouse position in WPF in the XAML file? Or does that have to be done in code? I have a control inside a Canvas, 开发者_C百科and I just want the control to follow the mouse while the mouse cursor is inside the Canvas.

Thanks


EDIT:

OK, I figured it out a relatively easy way using the code-behind 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 guideline.


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

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>


Tried a few examples only. The msdn documentation is , i think, incorrectly worded

"How to: Make an Object Follow the Mouse Pointer" should be

"How to: Make an object's size increase based on mouse position" anyway.

I was able to achieve this effect by changing the canvas properties. Also not sure why everyone was attaching the event handler to the objects next top level layout property and not the window. Maybe you and most of the examples online are going 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 behind

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);
  }
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜