Tuesday, April 21, 2009

Free Cool ListBox - Customized for alternate item colors and text wrap properties.

I have got a requirement to design a list box with alternate items coloring and text wrapping feature. I have tried for one in the google but very less help could be found.



So I designed one cool listbox that with the above requirements satisfied. I have given the code below.


My List box looks like the below image..






To acheive this, First you have to add one ListBox control and one Textbox with multiline property enabled underneath it. I have named my textbox as txtMessage and ListBox as ListBox1.



The below code shows how to add the contents from the text box on carriage return press ('Enter' button press)...






   1:  private void txtMessage_KeyPress(object sender, KeyPressEventArgs e)

   2:          {

   3:              if (e.KeyChar == 13)

   4:              {

   5:                  ListBox1.Items.Add(txtMessage.Text.Trim().ToString());

   6:                  txtMessage.Text = "";

   7:              }

   8:          }





Now, folllow the instructions below...



1.Select the ListBox1 from your design view and make the "DrawMode" property as "OwnerDrawVariable"



2. Generate the event for DrawItem and MeasureItem of the ListBox.






   1:    /// <summary>

   2:          /// DrawItem event triggers when the list box is visible in the form

   3:          /// </summary>

   4:          /// <param name="sender"></param>

   5:          /// <param name="e"></param>

   6:          private void ListBox1_DrawItem(object sender, DrawItemEventArgs e)

   7:          {

   8:              if (ListBox1.Items.Count > 0)

   9:              {

  10:                  // Draw the background of the ListBox control for each item.

  11:                  // Create a new Brush and initialize to a Black colored brush

  12:                  // by default. And inintialise other properties to set the font 

  13:                  //bg color font size etc.. as below.

  14:   

  15:                  FontFamily family = FontFamily.GenericSerif;

  16:                  float size = 8F;

  17:                  Font myFont = new Font(family, size, FontStyle.Regular);

  18:                  Color highlightercolor = Color.White;

  19:                  Brush fontcolor = Brushes.Black;

  20:   

  21:                  //Method call to draw the back ground if the list box [Metadata]

  22:                  e.DrawBackground();

  23:   

  24:                  //Inintialize a rectangle to contain each item

  25:                  Rectangle rectangle = new Rectangle(2, e.Bounds.Top + 2,

  26:                              e.Bounds.Height, e.Bounds.Height - 4);

  27:                  

  28:                  //Select alternate items 

  29:                  int type = 0;

  30:                  type = e.Index % 2;

  31:   

  32:                  // Determine the color of the font, bg color, and brush to 

  33:                  //draw each item based on the index of the item to draw.

  34:                  

  35:                  switch (type)

  36:                  {

  37:   

  38:                      case 0:

  39:                          family = FontFamily.GenericSansSerif;

  40:                          size = 8;

  41:                          myFont = new Font(family, size, FontStyle.Regular);

  42:                          highlightercolor = Color.Gainsboro;

  43:                          fontcolor = Brushes.Black;

  44:                          break;

  45:   

  46:                      case 1:

  47:                          family = FontFamily.GenericSansSerif;

  48:                          size = 8;

  49:                          myFont = new Font(family, size, FontStyle.Regular);

  50:                          highlightercolor = Color.WhiteSmoke;

  51:                          fontcolor = Brushes.Black;

  52:                          break;

  53:   

  54:                      default:

  55:                          break;

  56:                  }

  57:                  

  58:                  // Draw the current item text based on the current 

  59:                  // Font and the custom brush settings.

  60:                  e.Graphics.FillRectangle(new SolidBrush(highlightercolor), e.Bounds);

  61:   

  62:                  // Draw each string in the Listbox, 

  63:                  e.Graphics.DrawString(((ListBox)sender).Items[e.Index].ToString(), 

  64:                      myFont, fontcolor, new RectangleF(e.Bounds.X + rectangle.Width, 

  65:                          e.Bounds.Y, e.Bounds.Width, e.Bounds.Height));

  66:                  

  67:                  // If the ListBox has focus, draw a focus rectangle 

  68:                  // around the selected item.

  69:                 // [Metadata]

  70:                  e.DrawFocusRectangle();

  71:              }

  72:   

  73:          }





The above method takes care on the alternate back ground color, font properties etc..







   1:  /// <summary>

   2:          /// Event triggers when the ListBox1 is visible in the form

   3:          /// </summary>

   4:          /// <param name="sender"></param>

   5:          /// <param name="e"></param>

   6:          private void ListBox1_MeasureItem(object sender, MeasureItemEventArgs e)

   7:          {

   8:              Graphics gr = e.Graphics;

   9:              

  10:              //We will get the size of the string which we are about to draw,

  11:              //so that we could set the ItemHeight and ItemWidth property 

  12:              SizeF size = gr.MeasureString(((ListBox)sender).Items[e.Index].ToString(), 

  13:                  ((ListBox)sender).Font,

  14:                  ((ListBox)sender).Width - 3 - SystemInformation.VerticalScrollBarWidth);

  15:              

  16:              //Set the height and width to the item

  17:              e.ItemHeight = Convert.ToInt16(size.Height) + 5;

  18:              e.ItemWidth = Convert.ToInt16(size.Width) + 3;

  19:          }





This above method declares the wrap of the content of the ListBox1.


You can alter the features as you like, hopefully all the code were explained neatly.

No comments:

Post a Comment

Please leave your comments here to improve myself!