Click here to Skip to main content
15,880,972 members
Search within:


Articles / Multimedia / GDI+
 
Article

Animated Image Slide Show

Rate me:
Please Sign up or sign in to vote.
4.77/5 (26 votes)
28 Jan 2015CPOL4 min read 100.2K   8K   33   14
Animated Image Slide Show for Winforms using C#
This article aims to explain how to create a simple Animated Image Slide Show for Windows applications using C#. I have created the Image Slide Show as a User Control - a user can just add the User Control to a project and use it.

Image 1

Introduction

The main purpose of this article is to 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. 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

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 2 Image 3

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.

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

In this article, I 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).

Using the Code

C#
#region Highlight The Current Selected 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
  1. 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 Thump image view in our control.
      C#
            #region LoadImage
        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]);
        }
        #endregion

      Here, I 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, I call the below function which will check for the current image and set the image border and increase the Size of the present image.
    7. This is the important function of User control where I do the Animation for the selected current Image. This function will be called in Timer Tick event. After the Animation is finished, I stop the timer and activate the main timer to load next image. From main Timer, I create the Random no from 1 to 11 and activate the sub timer. Sub timer is used to display the animation. I have commented in each case about the use.
      C#
      #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. 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.

Conclusion

The main aim of this article is to create a simple user friendly Animated Image Slide Show for Windows applications which will be useful for many users to use and work 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.

History

Note: By default, I have added a Wav music file in the demo bin folder. If users like to add their own music file, add your wav or mp3 file to the bin folder and in Control, change the file name.

  • 19th August, 2014: Initial release
  • 25th August, 2014: Source code updated, New version 1.1
  • 26th August, 2014: Play and Stop Music file features have been added in this new version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
syed shanu
Team Leader
India India
Microsoft MVP | Code Project MVP | CSharp Corner MVP | Author | Blogger and always happy to Share what he knows to others. MyBlog

My Interview on Microsoft TechNet Wiki Ninja Link

Comments and Discussions

 
First Prev Next
GeneralMy vote of 2 Pin
User 1106097921-Apr-17 7:59
User 1106097921-Apr-17 7:59 
GeneralMy vote of 5 Pin
Ehsan Sajjad4-Jul-16 13:25
professionalEhsan Sajjad4-Jul-16 13:25 
GeneralMy vote of 2 Pin
wpte20-Aug-14 3:52
wpte20-Aug-14 3:52 
GeneralRe: My vote of 2 Pin
syed shanu24-Aug-14 16:39
mvasyed shanu24-Aug-14 16:39 
GeneralMy vote of 2 Pin
Member 167877120-Aug-14 3:27
Member 167877120-Aug-14 3:27 
GeneralRe: My vote of 2 Pin
syed shanu20-Aug-14 14:18
mvasyed shanu20-Aug-14 14:18 
GeneralRe: My vote of 2 Pin
aarif moh shaikh7-Apr-15 18:56
professionalaarif moh shaikh7-Apr-15 18:56 
SuggestionCode improvements Pin
wpte20-Aug-14 2:36
wpte20-Aug-14 2:36 
GeneralRe: Code improvements Pin
syed shanu20-Aug-14 14:18
mvasyed shanu20-Aug-14 14:18 
GeneralRe: Code improvements Pin
Member 167877121-Aug-14 21:37
Member 167877121-Aug-14 21:37 
Hi,
it's admirable, that You sacrifice Your free time to publish code, where beginners will learn how to do things. I don't have the moral power to do it.
But I really believe, if beginners should learn something, that is not only how to make certain things, but just as important is, how to make them right. Also I think that You could make the code not only better looking, but also in shorter time, if You'd followed some rules. Gram of analysis is woth of ton code - one minute planning can save hour of coding. Even in such simple project. It took me about thenty years to realise, that quick and dirty hacks really takes me more time, then think about the problem some time and then do it the right way. Believe or not, the good coding rules and standards proved to be the way how to make things faster and more reliable.
E.g. Your code - the huge method DrawAnimation. There is so many times the same sequence timer1.enabled = true; timer1.Start(); timer2.enabled = false; timer2.Stop();.
Imagine, You'd realise not only enabled = true is equal to calling Start() and enabled = false is equal to calling Stop(), but that there may be something wrong and You should switch the order and first stop the one timer before starting the other one, to prevent a logic hazard (it's unlikely with C# timers, I know, just example). You'd have to fix it on so many places...
The method is huge. The metrics based rules are here because of huge blocks of monolitic code tends to attract bugs. You could make every case it's own method, where You would concentrate on single simple subtask. Don't feel ashamed, when most of Your methods are just two or three lines of code. Be afraid of the long ones. C# is great language, which protects the coder before himself in many ways - e.g. forbidding shadowing variables, but it can't help too much.
I hate magic constants. E.g. picImageSlide.Left = Convert.ToInt32(picImageSlide.Left - 40); or if (yval + 60 >= 30); What are these numbers?
Another issue - the SlideType is a number and on every case You have the comment explaining what the number means. And 3 and 5 are commented to be the same thing.
First improvement would be not to use such magic constants, but name them. Even better for SlideType would be to use enum type. And the best solution would be to have no switch cases at all, and use the design pattern Command instead. Probably together with design pattern Enum.
I don't want to discourage You publishing, I want to see You publish Your good ideas in the best way possible. Good luck.
GeneralRe: Code improvements Pin
syed shanu21-Aug-14 21:45
mvasyed shanu21-Aug-14 21:45 
SuggestionRe: Code improvements Pin
scalp30-Jan-15 2:18
scalp30-Jan-15 2:18 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun18-Aug-14 20:31
Humayun Kabir Mamun18-Aug-14 20:31 
GeneralRe: My vote of 5 Pin
syed shanu18-Aug-14 20:34
mvasyed shanu18-Aug-14 20:34 
Last Visit: 31-Dec-99 18:00     Last Update: 18-Apr-24 7:57Refresh1

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 28 Jan 2015

Article Copyright 2015 by syed shanu
Everything else Copyright © CodeProject, 1999-2024

Web03 2.8:2024-04-02:1