Thumbnail Images Display in ListView

In this post i am showing how to display thumbnails of images which are stored in database using ListView control.

















UI Design: I am using a picture Box,ImageList and list view.

ImageList is renamed as imagethumbnails
List view is renamed as listviewthumbnails.

Changes done in some properties of listviewthumbnails ( list view) are:
Multiselect = False.
Showitemtooltips =true.
Sorting = Ascending.

Expand the SmallImageList property and set the followings:
Name=imagethumbnails
ColorDepth=Depth 32Bit
ImageSize=150 x 150
Note:If we don't set these properties we get blurred thumbnail images.

as we are displaying thumbnail images in listviewthumbnail (List view) ,make it of same size as picturebox. and send the picturebox background.



Code Part:
//On Thumbnail button click
















private void btnThumbnails_Click(object sender, EventArgs e)

1. {
2. try
3. {
4. 
   
5. listviewthumbnails.BringToFront();
6. 
   
7. DataTable dtthumb = new DataTable( );
8. dtthumb = getallimages( ) ;/
9. thumbcount = dtthumb.Rows.Count;
10. 
    
11. int counter = 0;
12. int i = 0;
13. Image img = null;
14. 
    
15. if (!processedthumbnailed) //process it only once,to improve the performance on next click
16. {
17. while (counter <>
18. {
19. if (dtthumb.Rows != null)
20. {
21. 
    
22. img = (System.Drawing.Image)(RetrieveImage(dtthumb.Rows[i][0] as byte[]));
23. Image imgthumb = img.GetThumbnailImage(110, 110, null, new IntPtr());
24. imagethumbnails.Images.Add(imgthumb);
25. imagethumbnails.ImageSize = new Size(150, 150);
26. ListViewItem item = new ListViewItem(" ");
27. item.ToolTipText = Convert.ToString(dtthumb.Rows[i][1]);
28. item.ImageIndex = counter;
29. listviewthumbnails.TileSize = new Size(100, 100);
30. listviewthumbnails.Items.Add(item);
31. i++;
32. }
33. processedthumbnailed = true;
34. counter++;
35. }
36. }
37. 
    
38. listviewthumbnails.SmallImageList = imagethumbnails;
39. listviewthumbnails.View = View.List;
40. listviewthumbnails.Visible = true;
41. 
    
42. }
43. catch (Exception ex)
44. {
45. MessageBox.Show(ex.Message);
46. }
47. }

//reconstructing image from byte array
private System.Drawing.Image RetrieveImage(byte[] NodeIcon)
{
System.Drawing.Image image = null;
byte[] imageData = (byte[])NodeIcon;

if (imageData == null)
return image;

MemoryStream memStream = new MemoryStream(imageData);
image = System.Drawing.Image.FromStream(memStream);
return image;
}


public DataTable getallimages( )
{
try
{
DataTable dt = new DataTable();
MySqlDataAdapter MDDataAdapter = new MySqlDataAdapter();

MySqlConnection Conn = new MySqlConnection("datasource=localhost;username=root;" +
"password=root;database=telemedicine");
MalDet.Open();
MySqlCommand mdCommand = new MySqlCommand("SP_GetAllImages", Conn;
mdCommand.CommandType = CommandType.StoredProcedure;

MDDataAdapter.SelectCommand = mdCommand;
MDDataAdapter.Fill(dt);

mdCommand.ExecuteNonQuery();
Conn.Close();
return (dt);

}
catch (Exception ex)
{
return null;
}

}

//Double click on selected thumbnail image to view large image















private void listviewthumbnails_DoubleClick(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt = getallimages(1);
listviewthumbnails.SendToBack();
int index = Convert.ToInt32(listviewthumbnails.SelectedIndices[0]);
Image ima = (System.Drawing.Image)(RetrieveImage(dt.Rows[index][0] as byte[]));
pictureBox1.Refresh();
pictureBox1.Image = ima;
}

}



Code Explanation:

private void btnThumbnails_Click(object sender, EventArgs e)
{
Get all the images from the database by calling "getallimages( )" , which returns datatable containing image data. Assign the returned datatable to newly created datatable "dtthumb".

In "While loop" retrieve each image from datatable "dtthumb" by calling "RetrieveImage " function, which returns Image by passing image byte array and then assing it to "img".

Create a thumbnail image for that returned image by using "GetThumbnailImage" inbuilt function. Add the thumbnail image to " imagethumbnails"(Imagelist).

Set width and height of the thumbnail image.

Create new "ListViewItem" object by passing null string Assigning image name to tooltip text (dtthumb.Rows[i][1] gives image name and dtthumb.Rows[i][0] gives image data )

Set the index of the image that is displayed for the item(ListViewItems)

Add items to listviewthumbnails.

Set the "processedthumbnailed" variable to true so that next time when we click on thumbnail button it will display already processed images.

Display all the images as small icons in the "ListView" control by setting the view to list.
}


NOTE:We are using "processedthumbnailed" bool variable to check whether thumbnails are already processed.we don't need to process the same thumbnails when we click "Thumbnail" button again,because thumbnail images are already present in "listviewthumbnail" , which we can display directly.

private System.Drawing.Image RetrieveImage(byte[] NodeIcon)
{
Create new instance of MemoryStream of bytearray. Constructing an image from memory byte stream(Converting byte array stream to an image)
}


private void listviewthumbnails_DoubleClick(object sender, EventArgs e)
{

Get all the images from the database by calling "getallimages( )" , which returns datatable containing image data. Assign the returned datatable to newly created datatable "dt".

Get the index of the selected or double clicked thumbnail image.

Fetch the image using it's index position in datatable dt , reconstruct the image by calling "RetrieveImage( )" function by passing byte array of image data and assign the reconstructed large original image to image "ima".

Display large image of double clicked thumbnail image in to picturebox.


}

public DataTable getallimages( )
{

Create the MySql connection and open the connection Call the stored procedure "SP_GetAllImages" Fill the datatable"dt" with the returned result set. return the datatable

}

NOTE:Stored procedure "SP_GetAllImages" contains the query " select ImageData, ImageId from images" which fetches ImageData and Image Name.