CODEWITHSUNDEEP
c#winformslistboxformatting
Helen Tekie
Helen Tekie

Reputation: 535

How to Format Listbox or padding

enter image description here

When I click my products from left side of the form, then I get them on ListBox padded name with price. But because every product name name length is different then the price lies ugly formatting, it is not straight way as you see in my image left side. I want them like on the right side if you see on my attached image. My code in List box Format event is as following but not working Formatting as I want. Please Help!

private void ListOfPaidProducts_Format(object sender, ListControlConvertEventArgs e)
{
    string currentProductName = ((Product)e.ListItem).Description;
    string currentPrice = String.Format("{0}", ((Product)e.ListItem).Price); // I tried even with {0,20}....

    string currentProductNamePadded = currentProductName.PadRight(30);

    e.Value = currentProductNamePadded + currentPrice + "$";
}

Upvotes: 0

Views: 4609

Answers (2)

Anu Viswan
Anu Viswan

Reputation: 18155

You should probably use ListView instead of ListBox.

For example, for the data

List<Product> list = new List<Product>
{
   new Product{Description = "abc efg", Price= 123},
   new Product{Description = "abc efg hijk 12 1212 12", Price= 23},
   new Product{Description = "abc", Price= 343},
   new Product{Description = "abc efg", Price= 22}
};

You can configure the ListView as following.

Set ListView's view as Detail to show multiple columns

listView1.View = View.Details;

Next Add two columns, for display discription and Price.

listView1.Columns.Add("Description");
listView1.Columns.Add("Price");

Now you can add the items to the ListView as follows.

foreach(var items in list)
{
   ListViewItem lvi = new ListViewItem();
   lvi.Text = items.Description;
   lvi.SubItems.Add($"{items.Price} $");
   listView1.Items.Add(lvi);
}

Finally, you can ensure the Columns resize themselves to max size of contents by using AutoReizeColumn Method.

listView1.AutoResizeColumn(0, ColumnHeaderAutoResizeStyle.ColumnContent);
listView1.AutoResizeColumn(1, ColumnHeaderAutoResizeStyle.ColumnContent);

You might be also interested in the FullRowSelect property of ListView which enables selection of full row, rather than column on mouse click on row.

listView1.FullRowSelect = true;

Output

enter image description here

Upvotes: 1

T.S.
T.S.

Reputation: 19330

If you use fonts which allocate same space for each character, like "Courier New", you can prep you object like

public class DisplayProduct // create a little decorator
{
     public DisplayProduct(Product prod, int pad)
     {
         Display = prod.Name.PadRight(pad) + prod.Price;
     }

     private Product Prod {get; set;}

     // if you plan to use Product properties, you can change scope and do
     // ((ProductDisplay)list.SelectedItem).Prod.Price
     public int Id {get{return Prod.Id;}}  

     public string Name {get{return Prod.Name;}} 

     public string Display {get; private set;} 

}

List<Product> products = GetList(...);
int maxLen = products.Max(p => p.Name.Length) + 5;
var diplayList = products.Select(p => new DisplayProduct(p, maxLen));

myListBox.DisplayMember = "Display";
myListBox.ValueMember = "Id";    
myListBox.DataSource = diplayList;

But you could use grid or even a ListView for displaying structure data. Another thing you can do - custom item draw in ListBox. But I don't think it worth the exercise.

Upvotes: 1

Related Questions