Image Slider .NET component - flicker free browsing of pictures

• Download demo project and source - 426 Kb

Introduction

The purpose of this simple Image Catalogue demo is to show the functionality of “Image Slider”. It is a runtime .NET component that could be used for quick browsing of thumbnail images – slider’s thumb represents the current image. The slider produces a flicker free animation of these images while someone is moving the thumb. “Image Slider” fires back “Image Changed” notification event (returning the new picture’s filename) when the image changes in its client area.

I created two folders with two copies of the same pictures for the demo program:

• Bmp\\ - contains thumbnails of the pictures.
• Jpg\\ - contains the pictures in their normal size.

“Image Slider” displays all thumbnails, while all normal pictures are shown on catalogue’s client area. During its initialization “Image Slider” takes as input parameter Images’ path. Then it creates a list of all file names from that folder. The slider loads a new Image from the disk every time when the thumb must display new picture.

Note: I used bmp files as thumbnails since .NET works faster with them than jpg (even when they are with bigger size).

Using the code

1. Some “Image Slider” internals:

   The component is a wrapper of a standard .NET “Panel” class. It consists of three internal classes:

   private ImgButton btnPrev; //left button
   
   private ImgButton btnNext; //right button
   
   private ClientArea slider; //client area of the slider
   
   

   1. Component's Constructor:

      public ImgSlider(int Width, int Height, int buttonSize1)
      

      It takes width and height of the component as well as the side’s size of its two square buttons. As the slider is resizable these values are recalculated when the container resizes.
   2. Initialization:

      public void Initialize(string btnPrevPic, 
                             string btnPrevPicD, 
                             string btnNextPic, 
                             string btnNextPicD,
                             int penWidth, 
                             Color penColor, 
                             string bkgPic)
      

      1. btnPrevPic, btnPrevPicD – left slider’s button / button down pictures
      2. btnNextPic, btnNextPicD – right slider’s button / button down pictures
      3. penWidth, penColor – width and color of the axis in client area.
      4. BkgPic (or bkgColor) – background picture (or color) of client area.
   3. A custom event of type “ImgChangedHandler” is responsible for firing “Image changed” events to container form.

      // Delegate declaration. It will be type of custom event..
      
      public delegate void ImgChangedHandler(object sender, 
        ImgChangedArgs e);
      
      // Custom event of type ImgChangedHandler.
      
      public event ImgChangedHandler ImgChanged;
      
      //-----------------------------------------------------------
      
      // The OnImgChanged method raises the event by invoking 
      
      // the delegates. The sender is always this, the current instance 
      
      // of the class.
      
      //-----------------------------------------------------------
      
      
      public virtual void OnImgChanged(string ImgFileName)

      All this is done according to Microsoft .NET requirements. The slider’s thumb animation (along with GDI + double buffering) is very simple. For more details about the algorithm please check: "A Simple, Flicker-Free 2D Animation Demo", http://www.codeguru.com/Cpp/G-M/multimedia/graphics/article.php/c4713/
2. How to use the component.
   1. Including component’s namespace in your project:

      using nmImgSlider;
      

   2. Declaring the slider object:

      private ImgSlider imgSdl;
      

   3. Initializing it - on Form’s Load event:

      //Init the image slider component
      
      imgSdl = new ImgSlider(this.Width, 50, 50);
      imgSdl.Location = new Point(0, 25);
      //should be done before initialize - it needs parent...
      
      Controls.Add(imgSdl);
      imgSdl.Initialize("bkw.bmp", "bkwd.bmp", "fwd.bmp", "fwdd.bmp", 3, 
                        Color.Black, "bkgslider1.bmp");
      //Subscribe for changing image event.
      
      imgSdl.ImgChanged += new ImgChangedHandler(
        imgSdl_OnImgCahangedNotify);
      if (!imgSdl.LoadImages(THUMBNAILS))
      {
          MessageBox.Show(imgSdl.ErrorMsg);
      }
      

      Where the event handler "imgSdl_OnImgCahangedNotify" should be of ImgChangedHandler type. For details check Microsoft .NET documentation.

History

• Initial version - 8/22/2004