How can i implement the paging effect in a FlowLayoutPanel control?

Question

Thanks to the following code i create and add images - as thumbnails - to the FlowLayoutPanel.

The implementation is pretty simple. I read the available images within the directory and call the following sub procedure.

Private Sub LoadImages(ByVal FlowPanel As FlowLayoutPanel, ByVal fi As FileInfo)
        Pedit = New DevExpress.XtraEditors.PictureEdit
        Pedit.Width = txtIconsWidth.EditValue
        Pedit.Height = Pedit.Width / (4 / 3)
        Dim fs As System.IO.FileStream
        fs = New System.IO.FileStream(fi.FullName, IO.FileMode.Open, IO.FileAccess.Read)
        Pedit.Image = System.Drawing.Image.FromStream(fs)
        fs.Close()
        fs.Dispose()
        Pedit.Properties.SizeMode = DevExpress.XtraEditors.Controls.PictureSizeMode.Zoom

        If FlowPanel Is flowR Then
            AddHandler Pedit.MouseClick, AddressOf Pedit_MouseClick
            AddHandler Pedit.MouseEnter, AddressOf Pedit_MouseEnter
            AddHandler Pedit.MouseLeave, AddressOf Pedit_MouseLeave
        End If

        FlowPanel.Controls.Add(Pedit)
    End Sub

Now, i would like to extend it. I would like to create the paging effect. The application should read all the available images BUT paint only the ones that are visible to screen.

And as usual i do not know from where to start. Could i use your lights please?

...and here comes the C# version!

private void LoadImages(FlowLayoutPanel FlowPanel, FileInfo fi)
{
    Pedit = new DevExpress.XtraEditors.PictureEdit();
    Pedit.Width = txtIconsWidth.EditValue;
    Pedit.Height = Pedit.Width / (4 / 3);
    System.IO.FileStream fs = null;
    fs = new System.IO.FileStream(fi.FullName, System.IO.FileMode.Open, System.IO.FileAccess.Read);
    Pedit.Image = System.Drawing.Image.FromStream(fs);
    fs.Close();
    fs.Dispose();
    Pedit.Properties.SizeMode = DevExpress.XtraEditors.Controls.PictureSizeMode.Zoom;

    if (object.ReferenceEquals(FlowPanel, flowR)) {
        Pedit.MouseClick += Pedit_MouseClick;
        Pedit.MouseEnter += Pedit_MouseEnter;
        Pedit.MouseLeave += Pedit_MouseLeave;
    }

    FlowPanel.Controls.Add(Pedit);
}

Answer 1

To speed up the process, once images are loaded you could cache them so you would not have to load from the File stream each time you required them.

While I do not know the explicit code, here is a general process:

1) You could have a few variables, but the most important is an Integer for the currentPage.

2) Next, you will need to define how many thumbnails will be displayed on each page, either a constant or another Integer variable. Let's call this thumbsPerPage

3) On the Event Handlerss (OnClick, on hover or other action events you wish), do the following:

4) Clear the FlowPanel of all items, probably akin to FlowPanel.Controls.Items.Clear()

5) Then add the following images for a given page within the range: [(currentPage-1) * thumbsPerPage, (currentPage * thumbsPerPage) - 1]

This assumes you are starting at 0 for your image index, and 1 for your page index

Example, for 9 images per page: On Page 1 you want images [0,8] On Page 2 you want images [9,17], etc.

so in code it would be similar to

FlowPanel.Items.Clear()
for(int i = (currentPage-1) * thumbsPerPage; i < (currentPage * thumbsPerPage) - 1; i++)
   FlowPanel.Controls.Add(Pedits[i])

Lastly, convert your code to C# :)...not a requirement, but users are much more willing to help generally when it's not in VB.NET