Image Folder View Using C#.Net Winforms

Introduction

Today in this article, I will explain how to create a simple C# program for Image Folder View. It has been a long time since I have planed to create a Winform C# program, for viewing Images the same as a folder structure (Small icon, Medium icon, Large icon and Extra Large icon). Today finally I got some time to work on my simple program.

In my program I have used a "FolderBrowserDialog" to select Image path folder location. The images listed in the selected folder will be loaded to a panel. The user can view the images as Small, Medium, Large or Extra Large icons by clicking on the menu top. When users hover the mouse on images a preview will be displayed in the right that can be saved as an image file.

Using the Code

1. Variable Declarations
   
   I have declared the FolderBrowserDialog, locationX, locationY, Width and Height of the picture box for initial setting.
    

   private System.Windows.Forms.FolderBrowserDialog folderBrowserDlg;

   int locX = 20;

   int locY = 10;

   int sizeWidth = 30;

   int sizeHeight = 30;
    

2. Open Folder
   
   
   
   In the Open Folder Menu click event I get all the images from the selected folderpath using Folder.GetFiles() method, and checking for the images files from the selected folder. Using loadImagestoPanel() all the images are added to a pictuerbox and finally all the picturebox are added to the Panel control.
   
   The details of the Open folder menu click event:
    

   private void openFolderToolStripMenuItem_Click(object sender, EventArgs e)

   {

       DirectoryInfo Folder;

       FileInfo[] Images;

       this.folderBrowserDlg.RootFolder = System.Environment.SpecialFolder.MyComputer;

       this.folderBrowserDlg.ShowNewFolderButton = false;

       DialogResult result = this.folderBrowserDlg.ShowDialog();

       if (result == DialogResult.OK)

       {

           Folder = new DirectoryInfo(folderBrowserDlg.SelectedPath);

           Images = Folder.GetFiles();

           pnControls.Controls.Clear();

           int locnewX = locX;

           int locnewY = locY;

           foreach (FileInfo img in Images)

           {

               if (img.Extension.ToLower() == ".png" || img.Extension.ToLower() == ".jpg" || img.Extension.ToLower() == ".gif" || img.Extension.ToLower() == ".jpeg" || img.Extension.ToLower() == ".bmp" || img.Extension.ToLower() == ".tif")
                   {

                   if (locnewX >= pnControls.Width - sizeWidth - 10)

                   {

                       locnewX = locX;

                       locY = locY + sizeHeight + 30;

                       locnewY = locY;

                   }

                   else

                   {

    

                       locnewY = locY;

                   }

                   loadImagestoPanel(img.Name, img.FullName, locnewX,locnewY);

                   locnewY = locY + sizeHeight + 10;

                   locnewX = locnewX + sizeWidth + 10;                       

               }

           }

       }          

   }
   
   The detail Folder Images are added to the panel function.
   
   In this function get the Imagename, Path, image XLocation and image YLocation. Create a pictuerbox at runtime and add all pictuerboxes to the panel controls.
    

   private void loadImagestoPanel(String imageName,String ImageFullName,int newLocX,int newLocY)

   {

    
   

           PictureBox ctrl = new PictureBox();

           ctrl.Image = Image.FromFile(ImageFullName);

           ctrl.BackColor = Color.Black;

           ctrl.Location = new Point(newLocX, newLocY);

           ctrl.Size = new System.Drawing.Size(sizeWidth, sizeHeight);

           ctrl.SizeMode = PictureBoxSizeMode.StretchImage;

           ctrl.MouseMove += new MouseEventHandler(control_MouseMove);

           pnControls.Controls.Add(ctrl);

    

       }
   

   }

   
   I have added a MouseMove event for all Pictuerbox controls. In this MouseMove Event I displayed the image to the preview Image Pictuerbox.
   
   private void control_MouseMove(object sender, MouseEventArgs e)
   {
       Control control = (Control)sender;
       PictureBox pic = (PictureBox)control;
       pictureBox1.Image = pic.Image;
   }

3. Image Icon Size Change
   
   
   
   Here I have 4 menu buttons for Small, Medium, Large and Extra Large. In this button click event I set the pictuerbox height and width and reload all the pictuerboxes with the new size added. The detailed code is listed below.
    

   private void toolStripButton4_Click(object sender, EventArgs e)

   {

               locX = 20;
               locY = 10;
               sizeWidth = 30;
               sizeHeight = 30;
               if (pnControls.Controls.Count > 0)
               {
                   loadControls();                
               }

    

   }

   private void loadControls()

   {

       int locnewX = locX;

       int locnewY = locY;

   foreach (Control p in pnControls.Controls)

       {

           if (locnewX >= pnControls.Width - sizeWidth - 10)

           {

               locnewX = locX;

               locY = locY + sizeHeight + 30;

               locnewY = locY;

           }

           else

           {

               locnewY = locY;

           }

           p.Location = new Point(locnewX, locnewY);

           p.Size = new System.Drawing.Size(sizeWidth, sizeHeight);

           locnewY = locY + sizeHeight + 10;

           locnewX = locnewX + sizeWidth + 10;

       }

   }

Points of Interest

The main purpose of this article is to create a simple C# application to view all the images listed in the folder with preview and save functionality.