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