Click here to Skip to main content
12,697,783 members (27,966 online)
Click here to Skip to main content
Add your own
alternative version


53 bookmarked

Image Slider .NET component - flicker free browsing of pictures

, 23 Aug 2004
Rate this:
Please Sign up or sign in to vote.
Image Slider is a runtime .NET component that could be used for quick browsing of thumbnail images in Multimedia projects


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",
  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...
      imgSdl.Initialize("bkw.bmp", "bkwd.bmp", "fwd.bmp", "fwdd.bmp", 3, 
                        Color.Black, "bkgslider1.bmp");
      //Subscribe for changing image event.
      imgSdl.ImgChanged += new ImgChangedHandler(
      if (!imgSdl.LoadImages(THUMBNAILS))
      Where the event handler "imgSdl_OnImgCahangedNotify" should be of ImgChangedHandler type. For details check Microsoft .NET documentation.


  • Initial version - 8/22/2004


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
Australia Australia

You may also be interested in...

Comments and Discussions

GeneralNice apple-like background Pin
jjayants1-Feb-05 13:29
memberjjayants1-Feb-05 13:29 
GeneralLicensing Pin
maihuaz25-Aug-04 14:05
membermaihuaz25-Aug-04 14:05 
GeneralRe: Licensing Pin
Angel_Komarov25-Aug-04 14:38
memberAngel_Komarov25-Aug-04 14:38 
GeneralNice Idea.... Pin
jaxterama24-Aug-04 18:26
memberjaxterama24-Aug-04 18:26 
GeneralRe: Nice Idea.... Pin
Angel_Komarov25-Aug-04 14:18
memberAngel_Komarov25-Aug-04 14:18 
GeneralRe: Nice Idea.... Pin
jaxterama26-Aug-04 7:06
memberjaxterama26-Aug-04 7:06 
Generalsource code Pin
<font color=#EE88BB>m a y s a m23-Aug-04 20:22
memberm a y s a m23-Aug-04 20:22 
GeneralRe: source code Pin
Nishant S23-Aug-04 21:59
staffNishant S23-Aug-04 21:59 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170118.1 | Last Updated 24 Aug 2004
Article Copyright 2004 by Angel_Komarov
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid