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
- Some “Image Slider” internals:
The component is a wrapper of a standard .NET “Panel” class. It consists of
three internal classes:
private ImgButton btnPrev;
private ImgButton btnNext;
private ClientArea slider;
- 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.
- Initialization:
public void Initialize(string btnPrevPic,
string btnPrevPicD,
string btnNextPic,
string btnNextPicD,
int penWidth,
Color penColor,
string bkgPic)
btnPrevPic
, btnPrevPicD
– left slider’s button /
button down pictures
btnNextPic
, btnNextPicD
– right slider’s button /
button down pictures
penWidth
, penColor
– width and color of the axis
in client area.
BkgPic
(or bkgColor
) – background picture (or
color) of client area.
- A custom event of type “
ImgChangedHandler
” is responsible for
firing “Image changed” events to container form.
public delegate void ImgChangedHandler(object sender,
ImgChangedArgs e);
public event ImgChangedHandler ImgChanged;
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/
- How to use the component.
- Including component’s namespace in your project:
using nmImgSlider;
- Declaring the slider object:
private ImgSlider imgSdl;
- Initializing it - on Form’s Load event:
imgSdl = new ImgSlider(this.Width, 50, 50);
imgSdl.Location = new Point(0, 25);
Controls.Add(imgSdl);
imgSdl.Initialize("bkw.bmp", "bkwd.bmp", "fwd.bmp", "fwdd.bmp", 3,
Color.Black, "bkgslider1.bmp");
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