-1

I am making a Space Invaders clone where you control your ship with your mouse. I found online solutions for dragging and dropping a control, which worked but I couldn't manage to translate it to just moving the control with only your mouse. 

 private void Window_MouseMove(object sender, MouseEventArgs e)
    {
        Mothership.Body.Margin = new Thickness(Mouse.GetPosition(gridSpace).X, Mouse.GetPosition(gridSpace).Y, 0, 0);
    }

To clarify, I want the ship's(Image control) location to be exactly where to cursor is, without an offset. I don't even know where this offset comes from or how to get it.

Here is a screenshot of my mouse moving, you can see the image itself it very far away from the actual cursor. How do I fix this? If you need more information I will try to provide it. image

Mayfair
  • 358
  • 1
  • 11
  • This code works well, although it can be improved. But what do you mean by offset? Can you add a screenshot to explain the problem? – Hamid Reza Mohammadi May 01 '20 at 21:50
  • 4
    Put it in a Canvas and use Canvas.SetLeft and SetTop to set its position relative to the Canvas. The mouse position would then also have to be relative to the Canvas. – Clemens May 01 '20 at 21:50
  • Hamid Reza Mohammadi I added an image, I really don't know why this offset occurs. – Mayfair May 01 '20 at 21:57
  • I believe Clemens comment is the right approach and much better than setting the Margin property. Check this answer [Make Object Follow Mouse ...](https://stackoverflow.com/a/5660293/13448212) which is pretty similar, you just might not need everything in it. The key part being to place your mothership image inside the canvas and to offset the position of half the size of your mothersip since you are setting the top and left property. – Ostas May 01 '20 at 22:03

1 Answers1

2

I guess that yours image control inside the grid have HorizontalAlignment="Stretch" and VerticalAlignment="Stretch" (The default values), that cause the unwanted offset. So as Clemens suggested you must use a canvas. otherwise if you can't change your parent control set the image HorizontalAlignment="Left" and VerticalAlignment="Top" and your code will be work. But as the Clemens and Ostas suggested moving a object by margin is not a good way and if you must use grid you can use a TranslateTransform (also see this).

So just set RenderTransform property of image control and set it's X and Y properties in Window_MouseMove.

Sample xaml:

<Grid x:Name="gridSpace">
    <Image x:Name="Body" Source="*.png" Width="100" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Image.RenderTransform>
            <TranslateTransform x:Name="mTransform"/>
        </Image.RenderTransform>
     </Image>
</Grid>

Sample code:

private void Window_MouseMove(object sender, MouseEventArgs e)
{
   //Body.Margin = new Thickness(Mouse.GetPosition(gridSpace).X, Mouse.GetPosition(gridSpace).Y, 0, 0);
   Point pos = e.GetPosition(gridSpace);
   mTransform.X = pos.X;
   mTransform.Y = pos.Y;
}
Hamid Reza Mohammadi
  • 648
  • 1
  • 7
  • 19