Scroll many pictures in a panel

Question

I have a Panel and I put pictureboxes in the Panel. All pictureboxes are square and same size. I put them in 3 columns. I want to autoscroll them (move up). When the first three pictures (1st row) disappear, it come to the bottom.

I use timer to move up pixel by pixel and if the 1st row disappear, I change the location of all pictureboxes. But they flickr, I try some ways but nothing work. Please give me some ideas. Here is another way, I used FlowLayoutPanel, but same problem.

class PicturesPanel : Panel {
    private FlowLayoutPanel flowPanel;
    internal Timer timer;
    private List<BorderPictureBox> PicturesList;
    private int top;

    public ImageList Images {
        get;
        set;
    }

    public PicturesPanel() {
        this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.UserPaint, true);
        //this.AutoScroll = true;
        PicturesList = new List<BorderPictureBox>();
    }

    private void PicturesPanel_Click(object sender, EventArgs e) {
        loadImages();
    }

    private void loadImages() {
        if (this.Images != null) {
            int count = this.Images.Images.Count;
            int estimateHeight = 60 * (count / 3) - 4;

            flowPanel = new FlowLayoutPanel();
            flowPanel.Top = 0;
            flowPanel.Left = 0;
            flowPanel.Width = 200;
            flowPanel.Height = estimateHeight + 50;
            flowPanel.FlowDirection = FlowDirection.LeftToRight;
            this.Controls.Add(flowPanel);

            for (int i = 0; i < count; i++) {
                BorderPictureBox newPic = new BorderPictureBox();
                newPic.Image = this.Images.Images[i];
                newPic.Width = 56;
                newPic.Height = 56;
                newPic.SizeMode = PictureBoxSizeMode.StretchImage;
                newPic.Top = 60 * (i / 3);
                newPic.Left = 60 * (i % 3);
                flowPanel.Controls.Add(newPic);
                PicturesList.Add(newPic);
            }

            if (timer == null) {
                if (estimateHeight > this.Height) {
                    timer = new Timer();
                    timer.Interval = 25;
                    timer.Tick += new EventHandler(timer_Tick);
                    autoscroll = true;
                    timer.Start();
                }
            }
        }
    }

    private void timer_Tick(object sender, EventArgs e) {
        //this.VerticalScroll.Value += 1;
        //if (PicturesList[0].Bottom <= -4) {
        //    PicturesList.Add(PicturesList[0]);
        //    PicturesList.Add(PicturesList[1]);
        //    PicturesList.Add(PicturesList[2]);
        //    PicturesList.RemoveAt(0);
        //    PicturesList.RemoveAt(0);
        //    PicturesList.RemoveAt(0);
        //    this.VerticalScroll.Value = 0;

        //    for (int i = 0; i < PicturesList.Count; ++i) {
        //        PicturesList[i].Top = 60 * (i / 3);
        //        PicturesList[i].Left = 60 * (i % 3);
        //    }

        //}
        flowPanel.Top -= 1;
        if (flowPanel.Top <= -60) {
            flowPanel.SuspendLayout();
            flowPanel.Controls.RemoveAt(0);
            flowPanel.Controls.RemoveAt(0);
            flowPanel.Controls.RemoveAt(0);
            flowPanel.Controls.Add(PicturesList[0]);
            flowPanel.Controls.Add(PicturesList[1]);
            flowPanel.Controls.Add(PicturesList[2]);
            PicturesList.Add(PicturesList[0]);
            PicturesList.Add(PicturesList[1]);
            PicturesList.Add(PicturesList[2]);
            PicturesList.RemoveAt(0);
            PicturesList.RemoveAt(0);
            PicturesList.RemoveAt(0);
            flowPanel.Top = 0;
            flowPanel.ResumeLayout();
        }
    }
}

Answer 1

I wouldn't move the PictureBoxes inside your FlowLayoutPanel to get this effect, try just changing the value of the FlowLayoutPanel's scrollbar:

void timer_Tick(object sender, EventArgs e) {
  flowPanel.VerticalScroll.Value += 1;
  if (flowPanel.VerticalScroll.Value + flowPanel.VerticalScroll.LargeChange > 
                                       flowPanel.VerticalScroll.Maximum) {
    ((Timer)sender).Enabled = false;
  }
}