Click here to Skip to main content
Click here to Skip to main content

Image Slider .NET component - flicker free browsing of pictures

By , 23 Aug 2004
Rate this:
Please Sign up or sign in to vote.

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

License

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

Angel_Komarov
Web Developer
Australia Australia
*

Comments and Discussions

 
GeneralNice apple-like background Pinmemberjjayants1-Feb-05 12:29 
GeneralLicensing Pinmembermaihuaz25-Aug-04 13:05 
GeneralRe: Licensing PinmemberAngel_Komarov25-Aug-04 13:38 
GeneralNice Idea.... Pinmemberjaxterama24-Aug-04 17:26 
GeneralRe: Nice Idea.... PinmemberAngel_Komarov25-Aug-04 13:18 
GeneralRe: Nice Idea.... Pinmemberjaxterama26-Aug-04 6:06 
Generalsource code Pinmemberm a y s a m23-Aug-04 19:22 
GeneralRe: source code PinstaffNishant S23-Aug-04 20:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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 | Mobile
Web02 | 2.8.140415.2 | Last Updated 24 Aug 2004
Article Copyright 2004 by Angel_Komarov
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid