Click here to Skip to main content
13,259,539 members (52,423 online)
Click here to Skip to main content
Add your own
alternative version


133 bookmarked
Posted 23 Feb 2003

ImageListPopup, a C# class which pops up a window to select an image from an image list

, 23 Feb 2003
Rate this:
Please Sign up or sign in to vote.
Have you ever wanted to display an image list which looks like the MSN Messenger emoticon chooser...
<!-- Article image -->

Sample Image - ImageListPopup.jpg

<!-- Add the rest of your HTML here -->


The ImageListPopup is a quite easy to use Class that inherits from System.Windows.Forms.Form and allows to show a popup displaying the content of a specified Image List. When you click over an image, an event is fired and you get the index of the clicked image in the imagelist.


The ImageListPopup class supports:
  • Custom colors for the grid, background color and selection color
  • Adjustable horizontal and vertical spaces between images


This class is stand alone and doesn't need any particular Libraries except .NET default ones. It runs in managed code and hence should be portable.

How to use the Class

  • First of all, copy ImageListPopup.cs in your project directory.
  • Add on the top of your source code the directive using CustomUIControls;
  • add a member variable in your class:
    ImageListPopup imageListPopup;
  • In your constructor add the following lines:
    imageListPopup = new ImageListPopup();
    // facultative properties
    imageListPopup.BackgroundColor = Color.FromArgb(241,241,241);
    imageListPopup.BackgroundOverColor = Color.FromArgb(102,154,204);
    imageListPopup.HLinesColor = Color.FromArgb(182,189,210);
    imageListPopup.VLinesColor = Color.FromArgb(182,189,210);
    imageListPopup.BorderColor = Color.FromArgb(0,0,0);
    imageListPopup.EnableDragDrop = true;
    imageListPopup.ItemClick += new ImageListPopupEventHandler(OnItemClicked);


imageListPopup.BackgroundColor = Color.FromArgb(241,241,241);
imageListPopup.BackgroundOverColor = Color.FromArgb(102,154,204);
imageListPopup.HLinesColor = Color.FromArgb(182,189,210);
imageListPopup.VLinesColor = Color.FromArgb(182,189,210);
imageListPopup.BorderColor = Color.FromArgb(0,0,0);

These properties allow us to customize the different colors of the ImageList Popup (see the picture below for details):

Sample popup

The properties must be set before calling Init(), otherwise they won't be taken into account.

imageListPopup.EnableDragDrop = true;

This property allows to Enable Drag'n'Drop support (default is false). You can drag a bitmap from the popup to any Drop target. A Bitmap object and a string containing the Id of the dropped image in the imagelist are available to the target.


This line sets the image list, the horizontal and vertical pixel spaces between 2 images, and the rows and columns number (must be present).

imageListPopup.ItemClick += new ImageListPopupEventHandler(OnItemClicked);

This is the Event that is fired when an image is selected. The delegate should look like this:

private void OnItemClicked(object sender, ImageListPopupEventArgs e)
 label1.Text = "Selected Image: " + e.SelectedItem;

When you want to show the ImageListPopup, you just have to call:


Technical issues

When Init is called, a pre-calculated bitmap is generated with all the static drawing (the background Color, the grid, and all the images)

public bool Init(ImageList imageList, int nHSpace, int nVSpace,<BR>                 int nColumns, int nRows)
    _imageList = imageList;
    _nColumns = nColumns;
    _nRows = nRows;
    _nHSpace = nHSpace;
    _nVSpace = nVSpace;
    _nItemWidth = _imageList.ImageSize.Width + nHSpace;
    _nItemHeight = _imageList.ImageSize.Height + nVSpace;
    _nBitmapWidth = _nColumns * _nItemWidth + 1;
    _nBitmapHeight = _nRows * _nItemHeight + 1;
    this.Width = _nBitmapWidth;
    this.Height = _nBitmapHeight;

    _Bitmap = new Bitmap(_nBitmapWidth,_nBitmapHeight);
    Graphics grfx = Graphics.FromImage(_Bitmap);
    grfx.FillRectangle(new SolidBrush(BackgroundColor), 0, 0,<BR>                                      _nBitmapWidth, _nBitmapHeight);
    for (int i=0;i<_nColumns;i++)
        grfx.DrawLine(new Pen(VLinesColor), i*_nItemWidth, 0,<BR>                              i*_nItemWidth, _nBitmapHeight-1);
    for (int i=0;i<_nRows;i++)
        grfx.DrawLine(new Pen(HLinesColor), 0, <BR>                        i*_nItemHeight, _nBitmapWidth-1, i*_nItemHeight);
    grfx.DrawRectangle(new Pen(BorderColor), 0 ,0 , <BR>                               _nBitmapWidth-1, _nBitmapHeight-1);

    for (int i=0;i<_nColumns;i++)
        for (int j=0;j<_nRows ;j++)
            if ((j*_nColumns+i) < imageList.Images.Count)

    return true;

In the PaintBackground method, we blit the previously generated bitmap onto a hidden bitmap, then we draw the selection rectangle, and finally we blit everything to the screen with a basic double buffering technique.

protected override void OnPaintBackground(PaintEventArgs pea)
    Graphics grfx = pea.Graphics;
    grfx.PageUnit = GraphicsUnit.Pixel;
    // Basic double buffering technique
    Bitmap offscreenBitmap = new Bitmap(_nBitmapWidth, _nBitmapHeight);
    Graphics offscreenGrfx = Graphics.FromImage(offscreenBitmap);
    // We blit the precalculated bitmap on the offscreen Graphics
    offscreenGrfx.DrawImage(_Bitmap, 0, 0);

    if (_nCoordX!=-1 && _nCoordY!=-1 && <BR>       (_nCoordY*_nColumns+_nCoordX)<_imageList.Images.Count)
        // We draw the selection rectangle
        offscreenGrfx.FillRectangle(new SolidBrush(BackgroundOverColor),
                                    _nCoordX*_nItemWidth + 1,
                                    _nCoordY*_nItemHeight + 1,
                                    _nItemWidth-1, _nItemHeight-1);
        if (_bIsMouseDown)
            // Mouse Down aspect for the image
                _nCoordX*_nItemWidth + _nHSpace/2 + 1,
                _nCoordY*_nItemHeight + _nVSpace/2 + 1,
                _nCoordY*_nColumns + _nCoordX);
            // Normal aspect for the image
                _nCoordX*_nItemWidth + _nHSpace/2,
                _nCoordY*_nItemHeight + _nVSpace/2,
                _nCoordY*_nColumns + _nCoordX);
        // Border selection Rectangle
        offscreenGrfx.DrawRectangle(new Pen(BorderColor),
                                    _nCoordX*_nItemWidth, <BR>                                    _nCoordY*_nItemHeight,
                                    _nItemWidth, _nItemHeight);

    // We blit the offscreen image on the screen
    grfx.DrawImage(offscreenBitmap, 0, 0);


I hope this code will be useful to you. If you have suggestions to enhance this class functionalities, please post a comment.


  • 24/02/2003 : Initial Release
  • 25/02/2003 : Added Keyboard support, Added Drag'n'Drop Support (disabled by default) - The selected Image and its Id are available to the drop target


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

John O'Byrne
Web Developer
United States United States
I live in Santa Clara CA and work as a software engineer for SAP Business Objects.

My areas of expertise are user interface developments in Eclipse RCP / SWT / Draw 2D and C#

You may also be interested in...

Comments and Discussions

QuestionSelecting multiple images? Pin
lorecaster14-Jan-13 23:49
memberlorecaster14-Jan-13 23:49 
GeneralMy vote of 5 Pin
manoj kumar choubey21-Feb-12 1:19
membermanoj kumar choubey21-Feb-12 1:19 
QuestionAnyone have this working under 2008? Pin
littleGreenDude30-Dec-10 10:07
memberlittleGreenDude30-Dec-10 10:07 
AnswerRe: Anyone have this working under 2008? Pin
littleGreenDude3-Jan-11 9:26
memberlittleGreenDude3-Jan-11 9:26 
GeneralMy vote of 4 Pin
Toli Cuturicu14-Aug-10 6:45
memberToli Cuturicu14-Aug-10 6:45 
QuestionLicense Pin
claudiogmi9-Jun-10 8:40
memberclaudiogmi9-Jun-10 8:40 
GeneralScroll Bars Pin
Member 434709223-Sep-08 0:40
memberMember 434709223-Sep-08 0:40 
GeneralShowDialog problem Pin
Alwik7-Dec-06 23:22
memberAlwik7-Dec-06 23:22 
GeneralLicense on source code and icons Pin
maihuaz30-Nov-06 14:24
membermaihuaz30-Nov-06 14:24 
QuestionCould Embedded and chip lavel programming Possible in C#? Pin
rup_rj24-Sep-06 9:30
memberrup_rj24-Sep-06 9:30 
GeneralNIce control Pin
dotnetfireball16-Mar-06 13:00
memberdotnetfireball16-Mar-06 13:00 
GeneralDemo project is not downloading Pin
suresh_unique18-Aug-05 6:35
membersuresh_unique18-Aug-05 6:35 
GeneralRe: Demo project is not downloading Pin
John O'Byrne18-Aug-05 6:49
memberJohn O'Byrne18-Aug-05 6:49 
Questionanimated gif support? Pin
Unruled Boy4-Jul-05 17:46
memberUnruled Boy4-Jul-05 17:46 
GeneralToolTip Pin
Bluetears8-Oct-03 23:07
memberBluetears8-Oct-03 23:07 
GeneralYou forgot to release Graphics resource !! Pin
Jusin6-Apr-03 16:14
memberJusin6-Apr-03 16:14 
GeneralRe: You forgot to release Graphics resource !! Pin
John O'Byrne7-Apr-03 7:41
memberJohn O'Byrne7-Apr-03 7:41 
GeneralRe: You forgot to release Graphics resource !! Pin
Jusin7-Apr-03 15:51
memberJusin7-Apr-03 15:51 
GeneralRe: You forgot to release Graphics resource !! Pin
TimDet5-May-04 14:56
memberTimDet5-May-04 14:56 
QuestionHow could i add those images to a richtextbox? Pin
Acme31-Mar-03 4:48
memberAcme31-Mar-03 4:48 
AnswerRe: How could i add those images to a richtextbox? Pin
John O'Byrne31-Mar-03 5:33
memberJohn O'Byrne31-Mar-03 5:33 
GeneralOne word Pin
Anonymous5-Mar-03 7:39
sussAnonymous5-Mar-03 7:39 
GeneralGreat job. Pin
Ryan Farley4-Mar-03 6:43
memberRyan Farley4-Mar-03 6:43 
GeneralRe: Great job. Pin
John O'Byrne4-Mar-03 11:31
memberJohn O'Byrne4-Mar-03 11:31 
GeneralSlick Pin
Chopper25-Feb-03 1:15
memberChopper25-Feb-03 1:15 
GeneralRe: Slick Pin
John O'Byrne25-Feb-03 2:14
memberJohn O'Byrne25-Feb-03 2:14 
GeneralRe: Slick Pin
Chopper25-Feb-03 2:26
memberChopper25-Feb-03 2:26 
GeneralRe: Slick Pin
John O'Byrne25-Feb-03 2:51
memberJohn O'Byrne25-Feb-03 2:51 
GeneralRe: Slick Pin
John O'Byrne25-Feb-03 6:06
memberJohn O'Byrne25-Feb-03 6:06 
GeneralNice Pin
Tarpoon24-Feb-03 5:20
memberTarpoon24-Feb-03 5:20 
GeneralRe: Nice Pin
John O'Byrne24-Feb-03 5:27
memberJohn O'Byrne24-Feb-03 5:27 
GeneralRe: Nice Pin
cuypeji4-Apr-03 0:36
membercuypeji4-Apr-03 0:36 
GeneralRe: Nice Pin
John O'Byrne7-Apr-03 7:42
memberJohn O'Byrne7-Apr-03 7:42 
GeneralCool Pin
Poolbeer24-Feb-03 5:12
memberPoolbeer24-Feb-03 5:12 
GeneralRe: Cool Pin
John O'Byrne24-Feb-03 5:16
memberJohn O'Byrne24-Feb-03 5:16 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171114.1 | Last Updated 24 Feb 2003
Article Copyright 2003 by John O'Byrne
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid