How can I make an image move smoothly ?

Question

I have a PictureBox image in a form which is moving with the mouse movement on the panel.

It's moving as I want it, however it's flickering all the time (like refreshes) and I learnt that it's a problem with forms.

I tried the following lines of code in the constructor of my form but no success:

SetStyle( ControlStyles.ResizeRedraw, true );

SetStyle( ControlStyles.UserPaint, true );

SetStyle( ControlStyles.AllPaintingInWmPaint, true );   

SetStyle( ControlStyles.OptimizedDoubleBuffer, true );

This is the event handler for the mouse move if it helps to see all the picture. chipHolder is a panel and image is the image imported from file respectively.

private void grid_MouseMove(object sender, MouseEventArgs e)
{ 
      columnPosition = e.X;

      if (columnPosition != -1)
      {
          if (!(columnPosition < 35 || columnPosition > 610))
          {
                chipHolder.Controls.Clear();  
                PictureBox picBox = new PictureBox();
                chipHolder.Controls.Add(picBox);
                picBox.Image = image;
                picBox.Width = image.Width;
                picBox.Height = image.Height;
                picBox.Location = new Point(columnPosition - 33, 0);
                picBox.Show();
          }
      }
      chipHolder.Update();
}

Any ideas?

Igor · Accepted Answer · 2012-11-27T20:22:29.643

4

Do not recreate the PictureBox, just move it.

Just tried this, and image moves without any flickering:

private void button1_Click(object sender, EventArgs e)
{
    for (int iter = 0; iter < 500; iter++)
    {
        pictureBox1.Location = new Point(pictureBox1.Left + 1, pictureBox1.Top + 1);
        Application.DoEvents();
        System.Threading.Thread.Sleep(30);
    }
}

For mouse movements:

private void Form1_MouseMove(object sender, MouseEventArgs e)
{
    pictureBox1.Location = new Point(e.X, e.Y);
}

private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
    pictureBox1.Location = new Point(e.X + pictureBox1.Left, e.Y + pictureBox1.Top);
}

edited Nov 27 '12 at 20:22

answered Nov 27 '12 at 18:57

Igor

15,833
1
27
32

Thanks for your answer.. Yes this solves the flickering.. but I need the image to move with the mouse movement.. Not +1 every iteration. I tried including this: Application.DoEvents(); System.Threading.Thread.Sleep(30); in the Mouse_mouve events but still :/ – Bernice Nov 27 '12 at 20:13
"still" what? What do you see, and how do you want it to be different? I added code that moves the picture with the mouse to my answer. Remove chipHolder.Update(); call, just changing the picture box location should be enough. – Igor Nov 27 '12 at 20:21

score 0 · Answer 2 · answered Nov 27 '12 at 19:22

What Igor said:

private void grid_MouseMove(object sender, MouseEventArgs e)
{ 
      columnPosition = e.X;

      if (columnPosition != -1)
      {
          if (!(columnPosition < 35 || columnPosition > 610))
          {
                PictureBox picBox = chipHolder.Controls[0] // whatever your picbox id is;
                picBox.Location = new Point(columnPosition - 33, 0);
          }
      }
}

How can I make an image move smoothly ?

2 Answers2