Develop Reference

I'm trying to drag and element using the mouse but it always starts dragging from a specific location and not the current location

I'm trying to drag a rectangle element called "Rec" using the mouse. I can drag it to the location I want and the rectangle stays there, but when I try to drag it again it returns to the first location and the dragging starts from there. I want to drag it from where I left it the last time. I just don't get where the problem is.
I have one Canvas only and all my elements are inside it, the Canvas is called the "maincanvas". I use the following very simple events to for dragging.
Point originalPosition = new Point(0, 0);
private void Rec_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
Point CurrPosition = Mouse.GetPosition(MainCanvas);
Canvas.SetLeft(e.Source as UIElement, -( originalPosition.X - CurrPosition.X));
Canvas.SetTop(e.Source as UIElement, -(originalPosition.Y - CurrPosition.Y));
}
private void Rec_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
UIElement a = e.Source as UIElement;
a.CaptureMouse();
Rec.MouseMove += Rec_MouseMove;
originalPosition = Mouse.GetPosition(MainCanvas);
}
private void Rec_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Rec.MouseMove -= Rec_MouseMove;
UIElement a = e.Source as UIElement;
a.ReleaseMouseCapture();
originalPosition = new Point(0, 0);
}
I hope you guys could help me.

You should handle the mouse events on the Canvas like this:
<Canvas MouseLeftButtonDown="CanvasMouseLeftButtonDown"
MouseLeftButtonUp="CanvasMouseLeftButtonUp"
MouseMove="CanvasMouseMove">
...
</Canvas>
In the mouse down handler you would get the element that should be dragged by the MouseButtonEventArgs's OriginalSource property:
private UIElement draggedElement;
private Point lastMousePos;
private void CanvasMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (e.OriginalSource != sender)
{
IInputElement canvas = (IInputElement)sender;
canvas.CaptureMouse();
draggedElement = e.OriginalSource as UIElement;
lastMousePos = e.GetPosition(canvas);
}
}
private void CanvasMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
((IInputElement)sender).ReleaseMouseCapture();
draggedElement = null;
}
private void CanvasMouseMove(object sender, MouseEventArgs e)
{
if (draggedElement != null)
{
var p = e.GetPosition((IInputElement)sender);
var dx = p.X - lastMousePos.X;
var dy = p.Y - lastMousePos.Y;
lastMousePos = p;
Canvas.SetLeft(draggedElement, Canvas.GetLeft(draggedElement) + dx);
Canvas.SetTop(draggedElement, Canvas.GetTop(draggedElement) + dy);
}
}

Trying to make a picturebox drag but it glitches out C#

private void Brick_MouseDown(object sender, MouseEventArgs e)
{
isDragging = true;
}
private void Brick_MouseMove(object sender, MouseEventArgs e)
{
if (isDragging)
{
Brick1.Left = e.X;
Brick1.Top = e.Y;
}
}
public void Brick_MouseUp(object sender, MouseEventArgs m)
{
isDragging = false;
}
It kinda works but it glitches out when you move it (The picturebox teleports around the screen rapidly). https://www.youtube.com/watch?v=hWazyAnGNBE

You need to use the PointToClient method of the Form
var relativePoint = this.PointToClient(new Point(X, Y));
// Or
var relativePoint = this.PointToClient(Cursor.Position);
Control.PointToClient Method (Point)
Computes the location of the specified screen point into client
coordinates.
Update
private void Brick_MouseMove(object sender, MouseEventArgs e)
{
if (isDragging)
{
var relativePoint = this.PointToClient(Cursor.Position);
Brick1.Left = relativePoint.X;
Brick1.Top = relativePoint.Y;
}
}

How to pan Image inside PictureBox

I have a custom PictureBox which can zoom in using MouseWheel event. Now I want to add a panning feature to it. I mean when PictureBox is in zoomed state, if user left clicks and holds the click then move the mouse, the image would pan within the picturebox.
Here is my code but unfortunately it does not work! I don't know where to look anymore...
private Point _panStartingPoint = Point.Empty;
private bool _panIsActive;
private void CurveBox_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
Focus();
_panIsActive = true;
_panStartingPoint = e.Location;
}
}
private void CurveBox_MouseUp(object sender, MouseEventArgs e)
{
_panIsActive = false;
}
private void CurveBox_MouseLeave(object sender, EventArgs e)
{
_panIsActive = false;
}
private void CurveBox_MouseMove(object sender, MouseEventArgs e)
{
if(_panIsActive && IsZoomed)
{
var g = CreateGraphics(); //Create graphics from PictureBox
var nx = _panStartingPoint.X + e.X;
var ny = _panStartingPoint.Y + e.Y;
var sourceRectangle = new Rectangle(nx, ny, Image.Width, Image.Height);
g.DrawImage(Image, nx, ny, sourceRectangle, GraphicsUnit.Pixel);
}
}
I am suspecting the MouseMove event...I am not sure if anything happens in this event and/or nx and ny does contain correct point.
Any helps/tips is really appriciated!

I think the math is backwards. Try it like this:
private Point startingPoint = Point.Empty;
private Point movingPoint = Point.Empty;
private bool panning = false;
void pictureBox1_MouseDown(object sender, MouseEventArgs e) {
panning = true;
startingPoint = new Point(e.Location.X - movingPoint.X,
e.Location.Y - movingPoint.Y);
}
void pictureBox1_MouseUp(object sender, MouseEventArgs e) {
panning = false;
}
void pictureBox1_MouseMove(object sender, MouseEventArgs e) {
if (panning) {
movingPoint = new Point(e.Location.X - startingPoint.X,
e.Location.Y - startingPoint.Y);
pictureBox1.Invalidate();
}
}
void pictureBox1_Paint(object sender, PaintEventArgs e) {
e.Graphics.Clear(Color.White);
e.Graphics.DrawImage(Image, movingPoint);
}
You aren't disposing your graphic object, and CreateGraphics is just a temporary drawing anyway (minimizing would erase it) so I moved the drawing code to the Paint event and am just invalidating as the user is panning.

Moving a control within another control's visible area

I have a PictureBox that is inside a TabPage, and of course this TabPage is part of a TabView and this TabView is inside a Form. I want users be able to move this picture box within the tab page. For this I am using the MouseDown, MouseMove and MouseUp events of the picture box:
private void pictureBoxPackageView_MouseDown(object sender, MouseEventArgs e)
{
if (!_mapPackageIsMoving)
{
_mapPackageIsMoving = true;
}
}
private void pictureBoxPackageView_MouseMove(object sender, MouseEventArgs e)
{
if(_mapPackageIsMoving)
{
pictureBoxPackageView.Location = MousePosition; //This is not exact at all!
return;
}
//Some other code for some other stuff when picturebox is not moving...
}
private void pictureBoxPackageView_MouseUp(object sender, MouseEventArgs e)
{
if (_mapPackageIsMoving)
{
_mapPackageIsMoving = false; //Mouse button is up, end moving!
return;
}
}
But my problem lies in the MouseMove event. As soon as I move mouse after button down, the picture box jumps out of tab page's visible area.
I need to know how to handle the move only within the rectangle of the tab page, and if picture box is being dragged out of tab view's visible area, it shouldn't move anymore unless user brings the mouse inside the tab view's visible rectangle.
Any helps/tips will be appriciated!

You need a variable to hold the original position of the PictureBox:
Modified from a HansPassant answer:
private Point start = Point.Empty;
void pictureBoxPackageView_MouseUp(object sender, MouseEventArgs e) {
_mapPackageIsMoving = false;
}
void pictureBoxPackageView_MouseMove(object sender, MouseEventArgs e) {
if (_mapPackageIsMoving) {
pictureBoxPackageView.Location = new Point(
pictureBoxPackageView.Left + (e.X - start.X),
pictureBoxPackageView.Top + (e.Y - start.Y));
}
}
void pictureBoxPackageView_MouseDown(object sender, MouseEventArgs e) {
start = e.Location;
_mapPackageIsMoving = true;
}

How to move PictureBox in C#?

i have used this code to move picture box on the pictureBox_MouseMove event
pictureBox.Location = new System.Drawing.Point(e.Location);
but when i try to execute the picture box flickers and the exact position cannot be identified. can you guys help me with it. I want the picture box to be steady...

You want to move the control by the amount that the mouse moved:
Point mousePos;
private void pictureBox1_MouseDown(object sender, MouseEventArgs e) {
mousePos = e.Location;
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e) {
if (e.Button == MouseButtons.Left) {
int dx = e.X - mousePos.X;
int dy = e.Y - mousePos.Y;
pictureBox1.Location = new Point(pictureBox1.Left + dx, pictureBox1.Top + dy);
}
}
Note that this code does not update the mousePos variable in MouseMove. Necessary since moving the control changes the relative position of the mouse cursor.

You have to do several things
Register the start of the moving operation in MouseDown and remember the start location of the mouse.
In MouseMove see if you are actually moving the picture. Move by keeping the same offset to the upper left corner of the picture box, i.e. while moving, the mouse pointer should always point to the same point inside the picture box. This makes the picture box move together with the mouse pointer.
Register the end of the moving operation in MouseUp.
private bool _moving;
private Point _startLocation;
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
_moving = true;
_startLocation = e.Location;
}
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
_moving = false;
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
if (_moving) {
pictureBox1.Left += e.Location.X - _startLocation.X;
pictureBox1.Top += e.Location.Y - _startLocation.Y;
}
}

Try to change SizeMode property from AutoSize to Normal