Animated Image Slide Show in C#

This article describes how to create a simple Animated Image Slide Show for Windows Applications using C#.

Introduction

The main purpose of this article is to create and explain how to create a simple Animated Image Slide Show for windows applications using C#. My intent was to create a simple reusable Animated Image Slide, so as a result I have created the Image Slide Show as a User Control, by which a user can just add the User Control to a project and use it.

Animated Slide Show

This Animated Image Slide Show User control has the following features:

  1. Load Images
  2. Display both Thumb and Large size Image
  3. Highlight the Selected and Current Image in Thumb image View
  4. Previous, Next and Play Animation
  5. Small to Big Zoom out Image Animation
  6. Left to Right Scroll Animation
  7. Right to Left Scroll Animation
  8. Top to Bottom Scroll Animation
  9. Image Fade In Animation
  10. Transparent Horizontal Bar display on image Animation
  11. Transparent Vertical Bar display on image Animation
  12. Transparent Text display on Image Animation
  13. Random Block transparent Animation

Background

The main purpose was to develop a simple and easy to use .NET User Control for an Image Slide Show. This application was developed using .NET 4.0 (C#) and uses GDI+ functionality. The goal was to create a flash style animated Image Slide show for Windows Applications. I have added basic animation features for the Image Slide Show user control. Here we can see Fade and Vertical Transparent Bar Animation Screens of my project.

Image Slider Control

Selecting Image in Slider Control

Here we can see the Selected and Current Image in Thump View will be highlighted with a border and a small Image.

Now we start with our code.

I have created an Animated Image Slide Show as a User Control so that it can be used easily in all projects.

In this article I have attached a Zip file named SHANUImageSlideShow.zip that contains:

  • "ShanuImageSlideShow_Cntrl" folder (This folder contains the Image Slide Show User control Source code).
  • "SHANUImageSlideShow_Demo" folder (This folder contains the demo program that includes the Image Slide Show user control ).

Using the code

Step 1: First we will start with the User Control. To Create the user control:

  1. Create a new Windows Control Library project.
  2. Set the Name of Project and Click Ok (here my user control name is ShanuImageSlideShow_Cntrl).
  3. Add all the controls that are needed.
  4. In code behind declare all the public variables and Public property variables.
  5. Image Load Button Click. Here we load all the images from the folder as a Thump image view in our control.
    1. #region LoadImage  
    2.        public void LoadImages()  
    3.        {  
    4.            DirectoryInfo Folder;  
    5.            DialogResult result = this.folderBrowserDlg.ShowDialog();  
    6.            imageselected = false;  
    7.            if (result == DialogResult.OK)  
    8.            {  
    9.                Folder = new DirectoryInfo(folderBrowserDlg.SelectedPath);  
    10.   
    11.   
    12.                var imageFiles = Folder.GetFiles("*.jpg")  
    13.                      .Concat(Folder.GetFiles("*.gif"))  
    14.                      .Concat(Folder.GetFiles("*.png"))  
    15.                      .Concat(Folder.GetFiles("*.jpeg"))  
    16.                      .Concat(Folder.GetFiles("*.bmp")).ToArray(); // Here we filter all image files   
    17.                pnlThumb.Controls.Clear();  
    18.                if (imageFiles.Length > 0)  
    19.                {  
    20.                    imageselected = true;  
    21.                    TotalimageFiles = imageFiles.Length;  
    22.                }  
    23.                else  
    24.                {  
    25.                    return;  
    26.                }  
    27.                int locnewX = locX;  
    28.                int locnewY = locY;  
    29.   
    30.                ctrl = new PictureBox[TotalimageFiles];  
    31.                AllImageFielsNames = new String[TotalimageFiles];  
    32.                int imageindexs = 0;  
    33.                foreach (FileInfo img in imageFiles)  
    34.                {  
    35.                    AllImageFielsNames[imageindexs] = img.FullName;  
    36.                    loadImagestoPanel(img.Name, img.FullName, locnewX, locnewY, imageindexs);  
    37.                    locnewX = locnewX + sizeWidth + 10;  
    38.                    imageindexs = imageindexs + 1;  
    39.   
    40.                }  
    41.                CurrentIndex = 0;  
    42.                StartIndex = 0;  
    43.                LastIndex = 0;  
    44.   
    45.                DrawImageSlideShows();  
    46.            }  
    47.        }  
    48.   
    49.        private void loadImagestoPanel(String imageName, String ImageFullName, int newLocX, int newLocY, int imageindexs)  
    50.        {  
    51.            ctrl[imageindexs] = new PictureBox();  
    52.            ctrl[imageindexs].Image = Image.FromFile(ImageFullName);  
    53.            ctrl[imageindexs].BackColor = Color.Black;  
    54.            ctrl[imageindexs].Location = new Point(newLocX, newLocY);  
    55.            ctrl[imageindexs].Size = new System.Drawing.Size(sizeWidth - 30, sizeHeight - 60);  
    56.            ctrl[imageindexs].BorderStyle = BorderStyle.None;  
    57.            ctrl[imageindexs].SizeMode = PictureBoxSizeMode.StretchImage;  
    58.            //  ctrl[imageindexs].MouseClick += new MouseEventHandler(control_MouseMove);  
    59.            pnlThumb.Controls.Add(ctrl[imageindexs]);  
    60.   
    61.        }  
    62.        #endregion  

 

Here I call the preceding function in the Load Image Click Event. In this function load and display all the Images from the selected folder.
 

  1. Once the Image is loaded we need to highlight the selected and current image. For that I call the following function that will check for the current image and set the image border and increase the size of the present image.
    1. #region Highlight The Current Slected image  
    2.  public void HighlightCurrentImage()  
    3.  {  
    4.      for (int i = 0; i <= ctrl.Length - 1; i++)  
    5.      {  
    6.          if (i == CurrentIndex)  
    7.          {  
    8.              ctrl[i].Left = ctrl[i].Left - 20;  
    9.              ctrl[i].Size = new System.Drawing.Size(sizeWidth + 10, sizeHeight);  
    10.              ctrl[i].BorderStyle = BorderStyle.FixedSingle;  
    11.          }  
    12.          else  
    13.          {  
    14.              // ctrl[i].Location = new Point(newLocX, newLocY);  
    15.              ctrl[i].Size = new System.Drawing.Size(sizeWidth - 20, sizeHeight - 40);  
    16.              ctrl[i].BorderStyle = BorderStyle.None;  
    17.          }  
    18.      }  
    19.  }  
    20.  #endregion
  2. This is the important function of the User Control. I do the animation for the selected current Image. This function will be called in the Timer Tick event . After the Animation is finished I stop the timer and activate the main timer to load the next image. From the main Timer I create a random number from 1 to 11 and activate the sub timer. the sub timer is used to display the animation. I have commented in each case about the use.
    1. #region Draw Animation on seleced Image  
    2.   
    3.       // Small to Big Size Image  
    4.       private void SmalltoBigImage_Animation()  
    5.       {  
    6.           int leftConstant_adjust = 40;  
    7.           int topconstant_adjust = 30;  
    8.           if ((picImageSlide.Width < (MINMAX * pnlImg.Width)) &&  
    9.            (picImageSlide.Height < (MINMAX * pnlImg.Height)))  
    10.           {  
    11.               picImageSlide.Width = Convert.ToInt32(picImageSlide.Width * ZOOMFACTOR);  
    12.               picImageSlide.Height = Convert.ToInt32(picImageSlide.Height * ZOOMFACTOR);  
    13.               picImageSlide.Left = Convert.ToInt32(picImageSlide.Left - leftConstant_adjust);  
    14.               if (picImageSlide.Top <= 0)  
    15.               {  
    16.                   picImageSlide.Left = 0;  
    17.                   picImageSlide.Top = 0;  
    18.               }  
    19.               picImageSlide.Top = Convert.ToInt32(picImageSlide.Top - topconstant_adjust);  
    20.               picImageSlide.SizeMode = PictureBoxSizeMode.StretchImage;  
    21.           }  
    22.           else //In else part i check for the animation completed if its completed stop the timer 2 and start the timer 1 to load the next image .  
    23.           {  
    24.               picImageSlide.Width = pnlImg.Width;  
    25.               picImageSlide.Height = pnlImg.Height;  
    26.               Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image  
    27.               Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.  
    28.                
    29.           }  
    30.       }  
    31.   
    32.       //Left to Right Animation  
    33.       private void LefttoRight_Animation()  
    34.       {  
    35.           picImageSlide.Invalidate();  
    36.           if (picImageSlide.Location.X >= 10)  
    37.           {  
    38.               picImageSlide.Left = 0;  
    39.   
    40.               Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image  
    41.               Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.  
    42.           }  
    43.           else  
    44.           {  
    45.   
    46.               picImageSlide.Left = xval;  
    47.               xval = xval + 100;  
    48.           }  
    49.           picImageSlide.Width = pnlImg.Width;  
    50.           picImageSlide.Height = pnlImg.Height;  
    51.       }  
    52.   
    53.       //Left to Right Animation  
    54.       private void Transparent_Bar_Animation()  
    55.       {  
    56.           //   picImageSlide.Invalidate();  
    57.   
    58.           if (opacity >= 90)  
    59.           {  
    60.               Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image  
    61.               Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.  
    62.   
    63.               opacity = 100;  
    64.           }  
    65.           //   picImageSlide.Refresh();     
    66.           Graphics g = Graphics.FromImage(picImageSlide.Image);  
    67.           g.FillRectangle(new SolidBrush(Color.FromArgb(58, Color.White)), 0, 0, picImageSlide.Image.Width, picImageSlide.Image.Height);  
    68.           opacity = opacity + 10;  
    69.           picImageSlide.Image = PictuerBoxFadeIn(picImageSlide.Image, opacity);  //calling ChangeOpacity Function   
    70.       }  
    71.       // Right to Left Animation  
    72.       private void RighttoLeft_Animation()  
    73.       {  
    74.           picImageSlide.Invalidate();  
    75.           if (xval_Right <= 100)  
    76.           {  
    77.               picImageSlide.Left = 0;  
    78.               xval_Right = 0;  
    79.               Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image  
    80.               Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.  
    81.           }  
    82.           else  
    83.           {  
    84.   
    85.               picImageSlide.Left = xval_Right;  
    86.               xval_Right = xval_Right - 100;  
    87.           }  
    88.           picImageSlide.Width = pnlImg.Width;  
    89.           picImageSlide.Height = pnlImg.Height;  
    90.       }  
    91.   
    92.      
    93.   
    94.       // Top to Bottom Slide Animation  
    95.       private void ToptoBottom_Animation()  
    96.       {  
    97.           picImageSlide.Invalidate();  
    98.           if (yval + 60 >= 30)  
    99.           {  
    100.               picImageSlide.Top = 0;  
    101.   
    102.               Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image  
    103.               Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.  
    104.           }  
    105.           else  
    106.           {  
    107.   
    108.               picImageSlide.Top = yval;  
    109.               yval = yval + 100;  
    110.           }  
    111.           picImageSlide.Width = pnlImg.Width;  
    112.           picImageSlide.Height = pnlImg.Height;  
    113.       }  
    114.   
    115.       // Bottom to Top Slide Animation  
    116.       private void BottomTop_Animation()  
    117.       {  
    118.           picImageSlide.Invalidate();  
    119.           if (yval_Right <= 0)  
    120.           {  
    121.               picImageSlide.Left = 0;  
    122.               xval_Right = 0;  
    123.   
    124.               Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image  
    125.               Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.  
    126.           }  
    127.           else  
    128.           {  
    129.   
    130.               picImageSlide.Top = yval_Right;  
    131.               yval_Right = yval_Right - 100;  
    132.           }  
    133.           picImageSlide.Width = pnlImg.Width;  
    134.           picImageSlide.Height = pnlImg.Height;  
    135.   
    136.       }  
    137.   
    138.          // vertical transparent Bar Animation  
    139.       private void Vertical_Bar_Animation()  
    140.       {  
    141.           if (opacity_new <= 0)  
    142.           {  
    143.               Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image  
    144.               Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.  
    145.               opacity_new = 100;  
    146.           }  
    147.           // picImageSlide.Refresh();  
    148.           Graphics g2 = Graphics.FromImage(picImageSlide.Image);  
    149.   
    150.   
    151.           recBlockYval = 0;  
    152.           barheight = barheight + 100;  
    153.   
    154.           g2.DrawRectangle(Pens.Black, recBlockXval, recBlockYval, barwidth, barheight);  
    155.           g2.FillRectangle(new SolidBrush(Color.FromArgb(opacity_new, Color.White)), recBlockXval, recBlockYval, barwidth - 1, barheight - 1);  
    156.           opacity_new = opacity_new - 10;  
    157.           recBlockXval = recBlockXval + barwidth + 4;  
    158.         
    159.           picImageSlide.Refresh();  
    160.       }  
    161.   
    162.        // Random bar and Circle transparent  Animation  
    163.       private void Random_Bar_Animation()  
    164.       {  
    165.   
    166.           if (opacity_new <= 0)  
    167.           {  
    168.               Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image  
    169.               Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.  
    170.               opacity_new = 100;  
    171.           }  
    172.           // picImageSlide.Refresh();  
    173.           Graphics g3 = Graphics.FromImage(picImageSlide.Image);  
    174.   
    175.   
    176.           recBlockXval = 0;  
    177.           barwidth = barwidth + 100;  
    178.   
    179.           // g3.DrawRectangle(Pens.Black, rnd.Next(0, 200), rnd.Next(0, 200), rnd.Next(100, 600), rnd.Next(60, 400));  
    180.           g3.FillRectangle(new SolidBrush(Color.FromArgb(opacity_new, Color.White)), rnd.Next(10, 600), rnd.Next(10, 600), rnd.Next(100, 600), rnd.Next(60, 400));  
    181.           opacity_new = opacity_new - 5;  
    182.           recBlockYval = recBlockYval + barheight + 4;  
    183.           //recBlockYval = recBlockYval + 100;  
    184.           //barheight = barheight + 100;  
    185.           picImageSlide.Refresh();  
    186.       }  
    187.       //Horizontal transparent Bar Animation  
    188.       private void Horizontal_Bar_Animation()  
    189.       {  
    190.           if (opacity_new <= 0)  
    191.           {  
    192.               Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image  
    193.               Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.  
    194.               opacity_new = 100;  
    195.           }  
    196.           recBlockXval = 0;  
    197.           barwidth = barwidth + 100;  
    198.           Graphics g4 = Graphics.FromImage(picImageSlide.Image);  
    199.           g4.DrawRectangle(Pens.Black, recBlockXval, recBlockYval, barwidth, barheight);  
    200.           g4.FillRectangle(new SolidBrush(Color.FromArgb(opacity_new, Color.White)), recBlockXval, recBlockYval, barwidth - 1, barheight - 1);  
    201.           opacity_new = opacity_new - 10;  
    202.           recBlockYval = recBlockYval + barheight + 4;  
    203.           picImageSlide.Refresh();  
    204.       }  
    205.   
    206.       // transparent text Animation  
    207.       private void  Transparent_Text_Animation()  
    208.       {  
    209.                           if (opacity_new <= 0)  
    210.                       {  
    211.                           Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image  
    212.                           Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.  
    213.                           opacity_new = 100;  
    214.                       }  
    215.                       // picImageSlide.Refresh();  
    216.                       Graphics g5 = Graphics.FromImage(picImageSlide.Image);  
    217.   
    218.                       g5.DrawString("Shanu Slide Show"new Font("Arial", 86),  
    219.                 new SolidBrush(Color.FromArgb(opacity_new, Color.FromArgb(this.rnd.Next(256), this.rnd.Next(256), this.rnd.Next(256)))),  
    220.                 rnd.Next(600), rnd.Next(400));  
    221.   
    222.                       opacity_new = opacity_new - 5;  
    223.   
    224.                       picImageSlide.Refresh();  
    225.       }  
    226.   
    227.       // Random Circle Animation  
    228.       private void Random_Circle_Animation()  
    229.       {  
    230.           if (opacity_new <= 0)  
    231.           {  
    232.               Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image  
    233.               Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.  
    234.               opacity_new = 100;  
    235.           }  
    236.           // picImageSlide.Refresh();  
    237.           Graphics g6 = Graphics.FromImage(picImageSlide.Image);  
    238.   
    239.           recBlockXval = 0;  
    240.           barwidth = barwidth + 100;  
    241.   
    242.           // g3.DrawRectangle(Pens.Black, rnd.Next(0, 200), rnd.Next(0, 200), rnd.Next(100, 600), rnd.Next(60, 400));  
    243.           g6.FillRectangle(new SolidBrush(Color.FromArgb(opacity_new, Color.White)), rnd.Next(10, 600), rnd.Next(10, 600), rnd.Next(400, 800), rnd.Next(60, 400));  
    244.           g6.FillPie(new SolidBrush(Color.FromArgb(opacity_new, Color.FromArgb(this.rnd.Next(256), this.rnd.Next(256), this.rnd.Next(256)))), rnd.Next(600), rnd.Next(400), rnd.Next(400, 800), rnd.Next(400), 0, 360);  
    245.           opacity_new = opacity_new - 5;  
    246.           recBlockYval = recBlockYval + barheight + 4;  
    247.           //recBlockYval = recBlockYval + 100;  
    248.           //barheight = barheight + 100;  
    249.           picImageSlide.Refresh();  
    250.       }  
    251.   
    252.   
    253.       public void drawAnimation()  
    254.       {  
    255.           try  
    256.           {  
    257.   
    258.               switch (SlideType)  
    259.               {  
    260.                   case 0:// Small to big  
    261.                       SmalltoBigImage_Animation();  
    262.                       break;  
    263.   
    264.                   case 1:// left to right  
    265.                       LefttoRight_Animation();  
    266.                       break;  
    267.   
    268.                   case 2:// Rectangle Transparent  
    269.                       Transparent_Bar_Animation();  
    270.                       break;  
    271.   
    272.                   case 3:// Right to Left  
    273.                       RighttoLeft_Animation();          
    274.                       break;  
    275.   
    276.                   case 4:// Top to Bottom  
    277.                       ToptoBottom_Animation();      
    278.                       break;  
    279.   
    280.                   case 5:// Bottom to Top  
    281.                       BottomTop_Animation();  
    282.                       break;  
    283.   
    284.                   case 6:// Rectangle Vertical Block Transparent  
    285.                       Vertical_Bar_Animation();  
    286.                       break;  
    287.   
    288.                   case 7:// Random Block Transparent  
    289.                       Random_Bar_Animation();  
    290.                       break;  
    291.   
    292.                   case 8:// Rectangle Horizontal Block Transparent  
    293.                      Horizontal_Bar_Animation();                        
    294.                       break;  
    295.   
    296.                   case 9:// Text Transparent  
    297.                       Transparent_Text_Animation();                           
    298.                       break;  
    299.   
    300.                   case 10:// Random Circle and Bar Transparent  
    301.                       Random_Circle_Animation();  
    302.                       break;  
    303.   
    304.   
    305.                   default// In Default there is no animation but load next image in time intervals.  
    306.                       picImageSlide.Width = pnlImg.Width;  
    307.                       picImageSlide.Height = pnlImg.Height;  
    308.   
    309.                       timer1.Enabled = true;  
    310.                       timer1.Start();  
    311.   
    312.                       break;  
    313.               }  
    314.           }  
    315.           catch (Exception ex)  
    316.           {  
    317.           }  
    318.       }  
    319.       //for the Image Transparent  
    320.       public static Bitmap PictuerBoxFadeIn(Image img, int opacity)  
    321.       {  
    322.           Bitmap bmp = new Bitmap(img.Width, img.Height);  
    323.   
    324.           Graphics g = Graphics.FromImage(bmp);  
    325.           ColorMatrix colmat = new ColorMatrix();  
    326.           colmat.Matrix33 = opacity;  
    327.           ImageAttributes imgAttr = new ImageAttributes();  
    328.           imgAttr.SetColorMatrix(colmat, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);  
    329.           g.DrawImage(img, new Rectangle(0, 0, bmp.Width, bmp.Height), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel, imgAttr);  
    330.           g.Dispose();  
    331.           // return the new fade in Image            
    332.           return bmp;  
    333.       }  
    334.       #endregion  

  3. After completion save, build and run the project.

Step 2: Now we create a Windows application and add a test of our "SHANUImageSlideShow_Demo" User Control.

  1. Create a new Windows project.
  2. Open your form and then from Toolbox right-click then choose items then browse to select your User Control DLL and add it.
  3. Drag the User Control to your Windows form.
  4. Run your program. Now you can see that the User Control was added to the Windows Form. You can open your image folder and load all the images and play the Animated Image Slide Show.

Conclusion

The main purpose of this article is to create a simple user friendly Animated Image Slide Show for Windows applications that will be useful for many users to use for free in their projects. I hope my Pareto chart control will be useful for many users from now on.

If you like my article and Animated Image Slide ShowControl kindly leave me a comment and vote for my article. I hope this control will be helpful.