Table of Contents

Note: You can download the Source Code  from the link  Source Code Download Link

Introduction

The main purpose of this article is to explain on how to create a simple Animated Image Slide Show for windows applications using C#. 

This Animated Image Slide Show User control has features as

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.
14) Play and Stop Music

Building the Sample

 This application was developed using C# GDI+ functionality. The goal was to create a flash style animated Image Slide show for Windows Applications. We have added basic animation features for the Image Slide Show user control. Here we can see Fade and Vertical Transparent Bar Animation Screens.

Here we can see the Selected and Current Image in Thump View will be Highlighted with Border and little big Image size.

Now we start with our Code:
We have created a Animated Image Slide Show as a User Control so that it can be used easily in all projects.
In this article we have attached zip file named as SHANUImageSlideShow.zip. Which contains..
1) "ShanuImageSlideShow_Cntrl" Folder (This folder contains the Image Slide Show User control Source code).
2) "SHANUImageSlideShow_Demo" Folder (This folder contains the Demo program which includes the Image Slide Show user control ).

Code Part

1) To Create Animation User Control


 First we will start with the User Control. To Create a 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 which is needed.
  4. In code behind declare all the public variables and Public property variables.
  5. Image Load Button Click.Here we load all the image from the Folder as Thumb image view in our control.
public void LoadImages()
        {
            DirectoryInfo Folder;
            DialogResult result = this.folderBrowserDlg.ShowDialog();
            imageselected = false;
            if (result == DialogResult.OK)
            {
                Folder = new DirectoryInfo(folderBrowserDlg.SelectedPath);
  
  
                var imageFiles = Folder.GetFiles("*.jpg")
                      .Concat(Folder.GetFiles("*.gif"))
                      .Concat(Folder.GetFiles("*.png"))
                      .Concat(Folder.GetFiles("*.jpeg"))
                      .Concat(Folder.GetFiles("*.bmp")).ToArray(); // Here we filter all image files 
                pnlThumb.Controls.Clear();
                if (imageFiles.Length > 0)
                {
                    imageselected = true;
                    TotalimageFiles = imageFiles.Length;
                }
                else
                {
                    return;
                }
                int locnewX = locX;
                int locnewY = locY;
  
                ctrl = new PictureBox[TotalimageFiles];
                AllImageFielsNames = new String[TotalimageFiles];
                int imageindexs = 0;
                foreach (FileInfo img in imageFiles)
                {
                    AllImageFielsNames[imageindexs] = img.FullName;
                    loadImagestoPanel(img.Name, img.FullName, locnewX, locnewY, imageindexs);
                    locnewX = locnewX + sizeWidth + 10;
                    imageindexs = imageindexs + 1;
  
                }
                CurrentIndex = 0;
                StartIndex = 0;
                LastIndex = 0;
  
                DrawImageSlideShows();
            }
        }
// This Function will display the Thumb Images.
        private void loadImagestoPanel(String imageName, String ImageFullName, int newLocX, int newLocY, int imageindexs)
        {
            ctrl[imageindexs] = new PictureBox();
            ctrl[imageindexs].Image = Image.FromFile(ImageFullName);
            ctrl[imageindexs].BackColor = Color.Black;
            ctrl[imageindexs].Location = new Point(newLocX, newLocY);
            ctrl[imageindexs].Size = new System.Drawing.Size(sizeWidth - 30, sizeHeight - 60);
            ctrl[imageindexs].BorderStyle = BorderStyle.None;
            ctrl[imageindexs].SizeMode = PictureBoxSizeMode.StretchImage;
            //  ctrl[imageindexs].MouseClick += new MouseEventHandler(control_MouseMove);
            pnlThumb.Controls.Add(ctrl[imageindexs]);
  
  
        }

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

6. Once Image loaded we need highlight the selected and current image. For this we call the below function which will check for the current image and set the image border and Increase the Size of the present image.

#region Highlight The Current Slected image
      public void HighlightCurrentImage()
      {
          for (int i = 0; i <= ctrl.Length - 1; i++)
          {
              if (i == CurrentIndex)
              {
                  ctrl[i].Left = ctrl[i].Left - 20;
                  ctrl[i].Size = new System.Drawing.Size(sizeWidth + 10, sizeHeight);
                  ctrl[i].BorderStyle = BorderStyle.FixedSingle;
  
              }
              else
              {
                  // ctrl[i].Location = new Point(newLocX, newLocY);
                  ctrl[i].Size = new System.Drawing.Size(sizeWidth - 20, sizeHeight - 40);
                  ctrl[i].BorderStyle = BorderStyle.None;
              }
          }
      }
      #endregion

7.This is the important function of User control where we do the Animation for the selected current Image.This function will be called in Timer Tick event. After the Animation is finished we stop the timer and activate the main timer to load next image.From main Timer we create the Random no from 1 to 11 and activate the sub timer. Sub timer is used to display the animation.

#region Draw Animation on selected Image
      public void drawAnimation()
     {
         try
         {
  
             switch (SlideType)
             {
                 case 0:// Small to big
                     SmalltoBigImage_Animation();
                     break;
  
                 case 1:// left to right
                     LefttoRight_Animation();
                     break;
  
                 case 2:// Rectangle Transparent
                     Transparent_Bar_Animation();
                     break;
  
                 case 3:// Right to Left
                     RighttoLeft_Animation();
                     break;
  
                 case 4:// Top to Bottom
                     ToptoBottom_Animation();
                     break;
  
                 case 5:// Bottom to Top
                     BottomTop_Animation();
                     break;
  
                 case 6:// Rectangle Vertical Block Transparent
                     Vertical_Bar_Animation();
                     break;
  
                 case 7:// Random Block Transparent
                     Random_Bar_Animation();
                     break;
  
                 case 8:// Rectangle Horizontal Block Transparent
                    Horizontal_Bar_Animation();
                     break;
  
                 case 9:// Text Transparent
                     Transparent_Text_Animation();
                     break;
  
                 case 10:// Random Circle and Bar Transparent
                     Random_Circle_Animation();
                     break;
  
  
                 default: // In Default there is no animation but load next image in time intervals.
                     picImageSlide.Width = pnlImg.Width;
                     picImageSlide.Height = pnlImg.Height;
  
                     timer1.Enabled = true;
                     timer1.Start();
  
                     break;
             }
         }
         catch (Exception ex)
         {
         }
     }
  
// Small to Big Size Image
     private void SmalltoBigImage_Animation()
     {
         int leftConstant_adjust = 40;
         int topconstant_adjust = 30;
         if ((picImageSlide.Width < (MINMAX * pnlImg.Width)) &&
          (picImageSlide.Height < (MINMAX * pnlImg.Height)))
         {
             picImageSlide.Width = Convert.ToInt32(picImageSlide.Width * ZOOMFACTOR);
             picImageSlide.Height = Convert.ToInt32(picImageSlide.Height * ZOOMFACTOR);
             picImageSlide.Left = Convert.ToInt32(picImageSlide.Left - leftConstant_adjust);
             if (picImageSlide.Top <= 0)
             {
                 picImageSlide.Left = 0;
                 picImageSlide.Top = 0;
             }
             picImageSlide.Top = Convert.ToInt32(picImageSlide.Top - topconstant_adjust);
             picImageSlide.SizeMode = PictureBoxSizeMode.StretchImage;
         }
         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.
         {
             picImageSlide.Width = pnlImg.Width;
             picImageSlide.Height = pnlImg.Height;
             Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image
             Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.
  
         }
     }
  
     //Left to Right Animation
     private void LefttoRight_Animation()
     {
         picImageSlide.Invalidate();
         if (picImageSlide.Location.X >= 10)
         {
             picImageSlide.Left = 0;
  
             Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image
             Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.
         }
         else
         {
  
             picImageSlide.Left = xval;
             xval = xval + 100;
         }
         picImageSlide.Width = pnlImg.Width;
         picImageSlide.Height = pnlImg.Height;
     }
  
     //Left to Right Animation
     private void Transparent_Bar_Animation()
     {
         //   picImageSlide.Invalidate();
  
         if (opacity >= 90)
         {
             Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image
             Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.
  
             opacity = 100;
         }
         //   picImageSlide.Refresh();
         Graphics g = Graphics.FromImage(picImageSlide.Image);
         g.FillRectangle(new SolidBrush(Color.FromArgb(58, Color.White)), 0, 0, picImageSlide.Image.Width, picImageSlide.Image.Height);
         opacity = opacity + 10;
         picImageSlide.Image = PictuerBoxFadeIn(picImageSlide.Image, opacity);  //calling ChangeOpacity Function
     }
     // Right to Left Animation
     private void RighttoLeft_Animation()
     {
         picImageSlide.Invalidate();
         if (xval_Right <= 100)
         {
             picImageSlide.Left = 0;
             xval_Right = 0;
             Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image
             Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.
         }
         else
         {
  
             picImageSlide.Left = xval_Right;
             xval_Right = xval_Right - 100;
         }
         picImageSlide.Width = pnlImg.Width;
         picImageSlide.Height = pnlImg.Height;
     }
  
  
  
     // Top to Bottom Slide Animation
     private void ToptoBottom_Animation()
     {
         picImageSlide.Invalidate();
         if (yval + 60 >= 30)
         {
             picImageSlide.Top = 0;
  
             Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image
             Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.
         }
         else
         {
  
             picImageSlide.Top = yval;
             yval = yval + 100;
         }
         picImageSlide.Width = pnlImg.Width;
         picImageSlide.Height = pnlImg.Height;
     }
  
     // Bottom to Top Slide Animation
     private void BottomTop_Animation()
     {
         picImageSlide.Invalidate();
         if (yval_Right <= 0)
         {
             picImageSlide.Left = 0;
             xval_Right = 0;
  
             Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image
             Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.
         }
         else
         {
  
             picImageSlide.Top = yval_Right;
             yval_Right = yval_Right - 100;
         }
         picImageSlide.Width = pnlImg.Width;
         picImageSlide.Height = pnlImg.Height;
  
     }
  
        // vertical transparent Bar Animation
     private void Vertical_Bar_Animation()
     {
         if (opacity_new <= 0)
         {
             Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image
             Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.
             opacity_new = 100;
         }
         // picImageSlide.Refresh();
         Graphics g2 = Graphics.FromImage(picImageSlide.Image);
  
  
         recBlockYval = 0;
         barheight = barheight + 100;
  
         g2.DrawRectangle(Pens.Black, recBlockXval, recBlockYval, barwidth, barheight);
         g2.FillRectangle(new SolidBrush(Color.FromArgb(opacity_new, Color.White)), recBlockXval, recBlockYval, barwidth - 1, barheight - 1);
         opacity_new = opacity_new - 10;
         recBlockXval = recBlockXval + barwidth + 4;
  
         picImageSlide.Refresh();
     }
  
      // Random bar and Circle transparent  Animation
     private void Random_Bar_Animation()
     {
  
         if (opacity_new <= 0)
         {
             Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image
             Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.
             opacity_new = 100;
         }
         // picImageSlide.Refresh();
         Graphics g3 = Graphics.FromImage(picImageSlide.Image);
  
  
         recBlockXval = 0;
         barwidth = barwidth + 100;
  
         // g3.DrawRectangle(Pens.Black, rnd.Next(0, 200), rnd.Next(0, 200), rnd.Next(100, 600), rnd.Next(60, 400));
         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));
         opacity_new = opacity_new - 5;
         recBlockYval = recBlockYval + barheight + 4;
         //recBlockYval = recBlockYval + 100;
         //barheight = barheight + 100;
         picImageSlide.Refresh();
     }
     //Horizontal transparent Bar Animation
     private void Horizontal_Bar_Animation()
     {
         if (opacity_new <= 0)
         {
             Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image
             Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.
             opacity_new = 100;
         }
         recBlockXval = 0;
         barwidth = barwidth + 100;
         Graphics g4 = Graphics.FromImage(picImageSlide.Image);
         g4.DrawRectangle(Pens.Black, recBlockXval, recBlockYval, barwidth, barheight);
         g4.FillRectangle(new SolidBrush(Color.FromArgb(opacity_new, Color.White)), recBlockXval, recBlockYval, barwidth - 1, barheight - 1);
         opacity_new = opacity_new - 10;
         recBlockYval = recBlockYval + barheight + 4;
         picImageSlide.Refresh();
     }
  
     // transparent text Animation
     private void  Transparent_Text_Animation()
     {
                         if (opacity_new <= 0)
                     {
                         Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image
                         Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.
                         opacity_new = 100;
                     }
                     // picImageSlide.Refresh();
                     Graphics g5 = Graphics.FromImage(picImageSlide.Image);
  
                     g5.DrawString("Shanu Slide Show", new Font("Arial", 86),
               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));
  
                     opacity_new = opacity_new - 5;
  
                     picImageSlide.Refresh();
     }
  
     // Random Circle Animation
     private void Random_Circle_Animation()
     {
         if (opacity_new <= 0)
         {
             Start_Stop_Timer_1(true); // Start the Timer 1 to load the next Image
             Start_Stop_Timer_2(false);// Stop the Timer 2 to stop the animation till the next image loaded.
             opacity_new = 100;
         }
         // picImageSlide.Refresh();
         Graphics g6 = Graphics.FromImage(picImageSlide.Image);
  
         recBlockXval = 0;
         barwidth = barwidth + 100;
  
         // g3.DrawRectangle(Pens.Black, rnd.Next(0, 200), rnd.Next(0, 200), rnd.Next(100, 600), rnd.Next(60, 400));
         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));
         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);
         opacity_new = opacity_new - 5;
         recBlockYval = recBlockYval + barheight + 4;
         //recBlockYval = recBlockYval + 100;
         //barheight = barheight + 100;
         picImageSlide.Refresh();
     }
  
     //for the Image Transparent
     public static Bitmap PictuerBoxFadeIn(Image img, int opacity)
     {
         Bitmap bmp = new Bitmap(img.Width, img.Height);
  
         Graphics g = Graphics.FromImage(bmp);
         ColorMatrix colmat = new ColorMatrix();
         colmat.Matrix33 = opacity;
         ImageAttributes imgAttr = new ImageAttributes();
         imgAttr.SetColorMatrix(colmat, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);
         g.DrawImage(img, new Rectangle(0, 0, bmp.Width, bmp.Height), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel, imgAttr);
         g.Dispose();
         // return the new fade in Image
         return bmp;
     }
     #endregion

8.After completion save,Build and run the project.

2) Run Sample

Now we create a Windows application and add test our "SHANUImageSlideShow_Demo" User Control.

  1. Create a new Windows project.
  2. Open your form and then from Toolbox > right click > choose items > browse select your user control dll and add.
  3.  Drag the User Control to your windows form.
  4. Run your program.now you can see the user control will be added in windows form.You can open your image folder and load all the images and play the Animated Image Slide Show.

Note: You can download the Source Code  from the link  Source Code Download Link