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);
}

Michael · Accepted Answer · 2011-02-02T22:09:22.093

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

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

1 Answers1

Linked