How to move a pictureBox inside a Panel by Mouse

Question

How to move a pictureBox inside a Panel by Mouse. Visual Studio 2015 C# Winsows Forms Application.

I've made a primitive slider to control the volume of my WindowsMediaPlayer. A panel as the background and a pictureBox inside as the slider-knopf. And it works well. But purely visually it does not work that good.

I'v searched all around, but can't I find an answer to this little funny problem.

Here is my code:

    int posY;

    private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
    {
        if (e.Button == MouseButtons.Left)
        {
            posY = e.Y; ;
        }
    }

    private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
    {
        PictureBox box = sender as PictureBox;

        if (e.Button == MouseButtons.Left)
        {
            box.Top += e.Y - posY;
        }

        if (box.Top < 0)
        {
            box.Top = 0;
        }

        if (box.Top > 100)
        {
            box.Top = 100;
        }
        int n = box.Top;
        n = n * - 1 + 100;
        label1.Text = n.ToString();
    }

When I move the pictureBox out of the edge of the little panel, the pictureBox somehow 'shrinks' in the panel. But when I release the mouse, the pictureBox restore its size.

Slider.gif

Why is that.? And how can I avoid it.?

Thanks.

Answer 1

I found a solution. It's not optimal, but it can be used. I changed the code to:

    private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
    {
        if (e.Button == MouseButtons.Left)
        {
            dragging = true;
            startPoint = e.Location;
        }
    }


    private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
    {
        if (dragging)
        {
            Debug.WriteLine("mousemove X: " + e.X + " Y: " + e.Y);
            pictureBox1.Location = new Point(0, pictureBox1.Top + e.Location.Y - startPoint.Y);

            if (pictureBox1.Location.Y < 0)
            {
                pictureBox1.Location = new Point(0, 0);
                dragging = false;
            }
            if (pictureBox1.Location.Y > 100)
            {
                pictureBox1.Location = new Point(0, 100);
                dragging = false;
            }
            this.Refresh();
        }
        int n = pictureBox1.Location.Y;
        n = n * -1 + 100;
        label1.Text = n.ToString();

        mediaPlayer1.settings.volume = n;
    }


    private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
    {
        dragging = false;
    }

gif

I still need to put an 'if' to correct, when the pictureBox1 is pulled out of the panel. And to avoid flicker, I have had to put a 'dragging = false'. However, it results in the pictureBox1 is getting frozen to the edge, so I have to release the mouse, and re-click to continue.

But well - it's to live with.

Thanks.