Owner Draw ListBox Control with Images

I was just looking around the code submitted by Sanjay Ahuja for the Owner Draw ListBox here: Owner Draw ListBox Control

 

And I started modifying the code. I found out there was a way to insert an icon in the Listbox control. This part of the code I have taken from Shripad Kulkarni's article Owner Draw Menus (including icons). All you have to do is to just follow the Procedure given by Sanjay Ahuja and start the project.

 

To make this simpler I have included the procedure here.

 

Note: Please copy all the bitmaps either to bin/debug or bin/release folder.

 

We start application by creating a Windows Application. Add a ListBox control to the form and set its DrawMode property to OwnerDrawVariable. Alternatively you can add following line to InitializeComponent() function of your form,

 

//lstColor is ListBox control
this.lstColor.DrawMode = System.Windows.Forms.DrawMode.OwnerDrawVariable;

 

Next add following lines after the above line

//tell windows we are interested in drawing items in ListBox on our own
this.lstColor.DrawItem += new DrawItemEventHandler(this.DrawItemHandler);
//tell windows we are interested in providing item size
this.lstColor.MeasureItem += new System.Windows.Forms.MeasureItemEventHandler(this.MeasureItemHandler);

By doing this, windows will send the DrawItem and MeasureItem events for each item added to ListBox.

 

Next, add handlers for these events

private void DrawItemHandler(object sender, DrawItemEventArgs e)
{
    e.DrawBackground();
    e.DrawFocusRectangle();
    e.Graphics.DrawString(data[e.Index],new
    Font(FontFamily.GenericSansSerif, 14, FontStyle.Bold),new SolidBrush(color[e.Index]),e.Bounds);
}

private void MeasureItemHandler(object sender, MeasureItemEventArgs e)
{
    e.ItemHeight= 22;
}

In above code, date is an array that holds items to be inserted and color is an array of class Color.

 

That's it. We are done!!! I think so NO!!!!

 

Here comes the fun part.

 

Include this in the Class part

private string []data;
private string []data2;
private Color []color;
Bitmap img_fileopen , img_exit , img_close ;
Bitmap img_security , img_network , img_about;

Include this in the Constructor

data= new String[6]{"Open - Red","Close - Azure","Exit - Bisque","Security - BurlyWood","Network - Yellow","About - AntiqueWhite"};
data2=new String[5]{"First","Second","Third","Forth","Fifth"};
color=new Color[6]{Color.Red,Color.Azure,Color.Bisque,Color.BurlyWood,Color.Yellow,Color.AntiqueWhite};
listBox1.DataSource = data;
listBox2.DataSource = data2;
img_fileopen =new Bitmap("FileOpen.bmp");
img_exit =new Bitmap("exit.bmp");
img_close =new Bitmap("Close.bmp");
img_about =new Bitmap("about.bmp");
img_security =new Bitmap("security.bmp");
img_network =new Bitmap("network.bmp");

For listBox handlers events. (see the source code for more details)

Rectangle rc = new Rectangle(e.Bounds.X+1, e.Bounds.Y+1, e.Bounds.Width-5, e.Bounds.Height-3);
e.Graphics.FillRectangle(new SolidBrush(Color.CornflowerBlue), rc);
string []datas = data;
StringFormat sf =new StringFormat();
sf.Alignment = StringAlignment.Far;
e.Graphics.DrawString(datas[e.Index],new Font("Verdana", 10, FontStyle.Bold), new SolidBrush(color[e.Index]), rc, sf);
e.DrawFocusRectangle();
e.Graphics.DrawRectangle(new Pen(new SolidBrush(Color.White), 2), rc);

To add the images (Please download the images). Add this code.

Image useImage = null ;
if ( datas[e.Index] == "Open - Red" )
{
    useImage = img_fileopen;
}
if ( datas[e.Index] == "Close - Azure" )
{
    useImage = img_close;
}
if ( datas[e.Index] == "Exit - Bisque" )
{
    useImage = img_exit;
}
if ( datas[e.Index] == "Security - BurlyWood" )
{
    useImage = img_security;
}
if ( datas[e.Index] == "Network - Yellow" )
{
    useImage = img_network;
}
if ( datas[e.Index] == "About - AntiqueWhite" )
{
    useImage = img_about;
}
if ( useImage != null )
{
    SizeF sz = useImage.PhysicalDimension;
    e.Graphics.DrawImage(useImage, e.Bounds.X+5 , ( e.Bounds.Bottom + e.Bounds.Top ) /2 - sz.Height/2);
}

That's it. Have fun!!!!!