So I am starting a series of posts that involves extending the default .NET controls to add new looks as well as new functionality. Today we will be extending the ListBox, so let’s get started.
The new listbox that we will create will have a main text or title and a description text below it as well as the ability to add an image on the control.
To get started we will create a class which I will name ListBoxItem which will contain the new properties that will be added to the control (Title, description, image).
-
using System;
-
using System.Collections.Generic;
-
using System.Text;
-
using System.Drawing;
-
-
namespace ListBoxEx
-
{
-
public class ListBoxItem
-
{
-
Image image;
-
string text;
-
string desc;
-
-
public Image Image
-
{
-
get
-
{
-
return image;
-
}
-
set
-
{
-
image = value;
-
}
-
}
-
-
public string Text
-
{
-
get
-
{
-
return text;
-
}
-
set
-
{
-
text = value;
-
}
-
}
-
-
-
public string Desc
-
{
-
get
-
{
-
return desc;
-
}
-
set
-
{
-
desc = value;
-
}
-
}
-
}
-
}
So now that we got that done we can get started with the ListBox itself. We are going to create a class to extend the original ListBox control.
-
using System;
-
using System.Collections.Generic;
-
using System.Text;
-
using System.Drawing;
-
using System.Drawing.Drawing2D;
-
using System.Windows.Forms;
-
-
namespace ListBoxEx
-
{
-
public class ListBoxEx : ListBox
-
{
-
-
}
-
}
Now lets start with the ListBoxEx class. Firstly we will add a constructor to the class and we will set the ItemHeight in it. We could set the ItemHeight dynamically by using the combined height of the strings or the height of the image.
-
public ListBoxEx()
-
{
-
this.ItemHeight = 35;
-
}
Now lets write the method that sets up the drawing of the items.
What we will do here is firstly check that we have a valid index if so then select the currently active item. After that we are going to check if it is selected or not then draw either a gradient background or the standard background. Then draw the image if one is used then the text.
-
protected override void OnDrawItem(DrawItemEventArgs e)
-
{
-
//Lets grab are current item from the list of items, as well as check to see
-
//that we actually have a valid index for are item.
-
-
if (this.Items.Count > 0)
-
{
-
ListBoxItem item = (ListBoxItem)this.Items[e.Index];
-
Color textColor = this.ForeColor;
-
bool isUsingImage = false;
-
int textMargin = 2;
-
-
//Check to see that we actually have an image.
-
if (item.Image != null)
-
isUsingImage = true;
-
-
e.DrawFocusRectangle();
-
-
//Draw are graident background if the control is selected otherwise the standard background.
-
if ((e.State & DrawItemState.Selected) == DrawItemState.Selected)
-
{
-
e.Graphics.FillRectangle(new LinearGradientBrush(new Point(0, 0), new Point(0, this.ItemHeight),
-
Color.LightSkyBlue, Color.LightSteelBlue), e.Bounds);
-
textColor = Color.White;
-
}
-
else
-
{
-
e.Graphics.FillRectangle(new SolidBrush(SystemColors.Window), e.Bounds);
-
}
-
-
//Draw are image if one is being used then draw the text.
-
if (isUsingImage)
-
{
-
Rectangle imgRect = new Rectangle();
-
imgRect.Location = new Point(2, (e.Bounds.Y + 2));
-
imgRect.Size = new Size(20, 20);
-
-
e.Graphics.DrawImage(item.Image, imgRect);
-
textMargin = 26;
-
}
-
-
//We can extend this even further by using the TextRender class and be able to add an ellipsis to are strings if they go beyond the
-
//edge of the control and all sorts of other nifty things.
-
e.Graphics.DrawString(item.Text, new Font(this.Font.FontFamily, 10, FontStyle.Regular),
-
new SolidBrush(textColor), new PointF(textMargin, (e.Bounds.Y + 2)));
-
e.Graphics.DrawString(item.Desc, this.Font, new SolidBrush(textColor), new PointF(textMargin, (e.Bounds.Y + 20)));
-
}
-
-
base.OnDrawItem(e);
-
}
Here is the result of what I got as well as the download of the project and code.
ListBoxEx Screenshot
0 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.