C# ListBox with Variable Height Items

Suppose you need a ListBox that has to display items with the text spread across multiple lines. With the default implementation that would look like this:

Normal listbox

The CR LF characters are displayed as squares and the item has only one line of text. To make the list box items have variable height depending on the number of lines of the text you need an owner draw ListBox.

That requires two this:

  • set the DrawMode property to OwnerDrawVariable
  • handle the MeasureItem and DrawItem event; the first one is fired when the size of the item (height and width) must be computed, and the second when the item is to be displayed
listBox1.DrawMode = System.Windows.Forms.DrawMode.OwnerDrawVariable;
listBox1.DrawItem += new System.Windows.Forms.DrawItemEventHandler(this.listBox1_DrawItem);
listBox1.MeasureItem += new System.Windows.Forms.MeasureItemEventHandler(this.listBox1_MeasureItem);

A simple implementation for these handlers is:

private void listBox1_DrawItem(object sender, DrawItemEventArgs e)
{
        e.DrawBackground();
        e.DrawFocusRectangle();
        e.Graphics.DrawString(
             (string)listBox1.Items[e.Index],
             e.Font,
             new SolidBrush(e.ForeColor),
             e.Bounds);
}

private void listBox1_MeasureItem(object sender, MeasureItemEventArgs e)
{
        e.ItemHeight = 13 * GetLinesNumber((string)listBox1.Items[e.Index]);
}

private int GetLinesNumber(string text)
{
        int count = 1;
        int pos = 0;
        while ((pos = text.IndexOf("\r\n", pos)) != -1)  { count++; pos += 2; }
        return count;
}

With those changes made the items should now look like this:
Owner-draw list box
Owner-draw list box

And that was fast and easy!

11 thoughts on “C# ListBox with Variable Height Items”

  1. Well, that might be helpful for determining the numbers of lines from a text box. But what we need here is a way to determine how many lines a string has, no matter where that string is taken from. Because for this particular snippet that is the string for each listbox item.

  2. yeah,I just believed you may possibly want to understand that your blog is messed up when you view it on my iphone. I?m not certain if it’s something to do with my phone?s browser or your internet site? just stating…

  3. Maybe you should consider trying an Android phone… Kidding. It’s possible, yes, that it doesn’t look good under iPhone. This is something I never tried, since I don’t have an iPhone. It’s probably not optimized for mobile browsing. But if you have a problem with a particular item (images, code, text, layout, etc.) please tell what it is. Thank you.

  4. This is the precise blog for anybody who wants to find out about this topic. You understand a lot its nearly laborious to argue with you (not that I really would want…HaHa). You definitely put a brand new spin on a subject thats been written about for years. Great stuff, just great!

  5. This doesn’t work. I’ve added long items in the collection during design time but those items are not wrapping up on multiple lines during run time.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.