Image disappears after trying to change image location

Question

I'm still learning WPF but what I'm trying to do is make it so when the image is clicked it follows the mouse around. So far I have the events firing properly, but I don't think I'm relocating the image properly.

    <Image x:Name="LetterBlock" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" MouseDown="ImageOnMouseDown" MouseMove="ImageOnMouseMove">
        <Image.Source>
            <ImageSource>pack://application:,,,/Resources/A_LetterBlock.jpg</ImageSource>
        </Image.Source>
        <Image.Margin >
            <Thickness>145,104,0,0</Thickness>
        </Image.Margin>
    </Image>

And this is my event handlers. I probably have some irrelevant code in there, but I can clean that up once I get it working.

    public void ImageOnMouseDown(Object sender, MouseEventArgs e) {
        IsClicked = true;
    }

    public void ImageOnMouseMove(Object sender, MouseEventArgs e)
    {
        if (!IsClicked)
            return;
        Point position = GetMousePositionWindowsForms();
        Thickness nMargin = new Thickness(position.X, position.Y, 0, 0);
        LetterBlock.Margin = nMargin;
    }

    private Point GetMousePositionWindowsForms()
    {
        System.Drawing.Point point = System.Windows.Forms.Control.MousePosition;
        return new Point(point.X, point.Y);
    }

The problem is that when I click on the image, it disappears...

//note I just took out InvalidateVisual and it still doesn't work, but the image jumps off the screen now.

//note2 I added some code to maximize the window and that helped. I learned that the image is running away from my mouse. It seems the mousemove event is only firing when the mouse is ontop of the image and immediately stops after its off of the image so it's kinda like it's running away from the mouse...

Have you had a look at http://stackoverflow.com/questions/5659237/make-object-follow-mouse-on-mousedown-and-stick-on-mouseup — Jamleck, Jul 09 '14 at 05:07
The first thing you need to do is use wpf to get your mouse coordinates and do away with the winforms import, the coordinate systems are different. second thing I would do is use a canvas instead of a grid, that way you can use the xy coordinates to set your position directly not having to worry about using margins. — Mark Hall, Jul 09 '14 at 05:28

score 0 · Accepted Answer · answered Jul 09 '14 at 05:22

Try this. Use the Mouse.GetPosition(this) to get the position of the mouse pointer relative to the Window with the upper-left corner of the Window being the point of origin..

using System;
using System.Windows;
using System.Windows.Input;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void LetterBlock_MouseDown(object sender, MouseButtonEventArgs e)
    {
        IsClicked = !IsClicked;

        if (IsClicked)
        {
            LetterBlock.CaptureMouse();
        }
        else
        {
            LetterBlock.ReleaseMouseCapture();
        }
    }

    private void LetterBlock_MouseMove(object sender, MouseEventArgs e)
    {
        if (!IsClicked)
            return;

        Point position = Mouse.GetPosition(this);    
        Thickness nMargin = new Thickness(position.X, position.Y, 0, 0);
        LetterBlock.Margin = nMargin;

        //InvalidateVisual();
    }

    public bool IsClicked { get; set; }
}

That is exactly what I wanted. Thank god because I had no clue what was going on in the other answer that was given. — user3796261, Jul 09 '14 at 05:30

Image disappears after trying to change image location

1 Answers1