{"id":98,"date":"2008-01-25T14:58:27","date_gmt":"2008-01-25T19:58:27","guid":{"rendered":"http:\/\/mariusbancila.ro\/blog\/?p=98"},"modified":"2008-01-25T14:59:57","modified_gmt":"2008-01-25T19:59:57","slug":"c-listbox-with-variable-height-items","status":"publish","type":"post","link":"https:\/\/mariusbancila.ro\/blog\/2008\/01\/25\/c-listbox-with-variable-height-items\/","title":{"rendered":"C# ListBox with Variable Height Items"},"content":{"rendered":"
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:<\/p>\n
<\/p>\n
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.<\/p>\n
That requires two this:<\/p>\n
\n
set the DrawMode property to OwnerDrawVariable<\/li>\n
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<\/li>\n<\/ul>\n
\r\nlistBox1.DrawMode = System.Windows.Forms.DrawMode.OwnerDrawVariable;\r\nlistBox1.DrawItem += new System.Windows.Forms.DrawItemEventHandler(this.listBox1_DrawItem);\r\nlistBox1.MeasureItem += new System.Windows.Forms.MeasureItemEventHandler(this.listBox1_MeasureItem);<\/pre>\n
A simple implementation for these handlers is:<\/p>\n
\r\nprivate void listBox1_DrawItem(object sender, DrawItemEventArgs e)\r\n{\r\n e.DrawBackground();\r\n e.DrawFocusRectangle();\r\n e.Graphics.DrawString(\r\n (string)listBox1.Items[e.Index],\r\n e.Font,\r\n new SolidBrush(e.ForeColor),\r\n e.Bounds);\r\n}\r\n\r\nprivate void listBox1_MeasureItem(object sender, MeasureItemEventArgs e)\r\n{\r\n e.ItemHeight = 13 * GetLinesNumber((string)listBox1.Items[e.Index]);\r\n}\r\n\r\nprivate int GetLinesNumber(string text)\r\n{\r\n int count = 1;\r\n int pos = 0;\r\n while ((pos = text.IndexOf(\"\\r\\n\", pos)) != -1) { count++; pos += 2; }\r\n return count;\r\n}<\/pre>\n
With those changes made the items should now look like this: \n \n<\/p>\n
And that was fast and easy!<\/p>\n","protected":false},"excerpt":{"rendered":"
![\"Normal](\"\/blog\/wp-content\/uploads\/2008\/01\/list1.png\")
<\/p>\n![\"Owner-draw](\"\/blog\/wp-content\/uploads\/2008\/01\/list2.png\")
![\"Owner-draw](\"\/blog\/wp-content\/uploads\/2008\/01\/list3.png\")
<\/p>\n