LIDOR SYSTEMS

Advanced User Interface Controls and Components

How to Create Items with Rich Content Using ListBox .NET

May 06, 2011

By default when adding objects in ListBox they are only displayed in simple list. However, in some cases we want to show more details in single item related to the same object. And we want to show not only just text, but also images in different sizes, hyperlinks, buttons etc.

We will show you how to do that using IntegralUI ListBox .NET control. This control has an option to create templates using HTML tags and arrange various objects like text, images, hyperlinks, custom controls etc. in custom layouts in single item. Many of already known HTML tags are supported which helps in creation of different layouts.

ListBox .NET with Rich Text Items
Download ListBox with Rich Text Items Sample

Let's start by creation of our custom object. For example let's create a Product class which will contain information about product: ID, Name, Category, Price and Rating.

public class Product : System.Object

{

private int _id = -1;

private String _name = String.Empty;

private String _category = String.Empty;

private String _imageSource = String.Empty;

private double _price = 0.0f;

private int _rating = 0;

 

public Product(int id)

{

Init(id, String.Empty, String.Empty, 0, 0);

}

 

public Product(int id, String name, String category)

{

Init(id, name, category, 0, 0);

}

 

private void Init(int id, String name, String category, double price, int rating)

{

int _id = id;

String _name = name;

String _category = category;

double _price = price;

int _rating = rating;

}

 

public int ID

{

get { return _id; }

}

 

public String Name

{

get { return _name; }

set { _name = value; }

}

 

public String Category

{

get { return _category; }

set { _category = value; }

}

 

public String ImageSource

{

get { return _imageSource; }

set { _imageSource = value; }

}

 

public double Price

{

get { return _price; }

set { _price = value; }

}

 

public int Rating

{

get { return _rating; }

set { _rating = value; }

}

}

Public Class Product Inherits System.Object

Private _id As Integer = -1

Private _name As String = String.Empty

Private _category As String = String.Empty

Private _imageSource As String = String.Empty

Private _price As Double = 0.0F

Private _rating As Integer = 0

 

Public Sub New(ByVal id As Integer)

Init(id, String.Empty, String.Empty, 0, 0)

End Sub

 

Public Sub New(ByVal id As Integer, ByVal name As String, ByVal category As String)

Init(id, name, category, 0, 0)

End Sub

 

Private Sub Init(ByVal id As Integer, ByVal name As String, ByVal category As String, ByVal price As Double, ByVal rating As Integer)

Dim _id As Integer = id

Dim _name As String = name

Dim _category As String = category

Dim _price As Double = price

Dim _rating As Integer = rating

End Sub

 

Public ReadOnly Property ID() As Integer

Get

Return _id

End Get

End Property

 

Public Property Name() As String

Get

Return _name

End Get

Set(ByVal value As String)

_name = value

End Set

End Property

 

Public Property Category() As String

Get

Return _category

End Get

Set(ByVal value As String)

_category = value

End Set

End Property

 

Public Property ImageSource() As String

Get

Return _imageSource

End Get

Set(ByVal value As String)

_imageSource = value

End Set

End Property

 

Public Property Price() As Double

Get

Return _price

End Get

Set(ByVal value As Double)

_price = value

End Set

End Property

 

Public Property Rating() As Integer

Get

Return _rating

End Get

Set(ByVal value As Integer)

_rating = value

End Set

End Property

End Class

Now we need to construct a template which will be used to arrange details for each product. For this purpose we will use <table> tag because it gives a uniform layout. The template should allow us to show product image to far left, product name on top following with detail information in middle. Additionally we want to show a button or hyperlink which when clicked will open for example a window with more details about the product. Here is the template sample:

private String ApplyTemplate(Product obj)

{

String content = String.Empty;

 

content = "<div>";

content += "<table cellpadding=\"2\" width=\"100%\">";

content += "<tr>";

content += "<td rowspan=\"2\"><img assemblypath=\"" + assemblyFullPath + "\" resource=\"Resources." + obj.ImageSource + "\"></img></td>";

content += "<td width=\"100%\"><font size=\"10\">" + obj.Name + "</font></td>";

content += "<td style=\"align:middleright;textcolor:DarkBlue\">" + obj.Category + "</td>";

content += "<td style=\"align:middlecenter;hovertextcolor:DarkRed\" width=\"50\"><a href=\"" + obj.Name + "\">more ...</a></td>";

content += "</tr>";

content += "<tr>";

content += "<td>><control index=\"0\"></control></td>";

content += "<td style=\"align:middleright\"><b>" + obj.Price.ToString("0.00") + "</b></td>";

content += "</tr>";

content += "</table>";

content += "</div>";

 

return content;

}

Private Function ApplyTemplate(ByVal obj As Product) As String

Dim content As String = String.Empty

 

content = "<div>";

content += "<table cellpadding=""2"" width=""100%"">";

content += "<tr>";

content += "<td rowspan=""2""><img assemblypath=""" & assemblyFullPath & """ resource=""Resources." & obj.ImageSource & """></img></td>";

content += "<td width=""100%""><font size=""10"">" & obj.Name & "</font></td>";

content += "<td style=""align:middleright;textcolor:DarkBlue"">" & obj.Category & "</td>";

content += "<td style=""align:middlecenter;hovertextcolor:DarkRed"" width=""50""><a href=""" & obj.Name & """>more ...</a></td>";

content += "</tr>";

content += "<tr>";

content += "<td>><control index=""0""></control></td>";

content += "<td style=""align:middleright""><b>" & obj.Price.ToString("0.00") & "</b></td>";

content += "</tr>";

content += "</table>";

content += "</div>";

 

Return content;

End Function

We will use the same template to display all products. But if you want, you can apply different template for each item.

Now let's create a list of 10 products:

private void InitList()

{

this.listBox1.SuspendUpdate();

 

this.listBox1.NormalItemStyle.BorderColor = Color.LightGray;

 

Product obj = null;

LidorSystems.IntegralUI.Lists.ListBoxItem item = null;

 

for (int i = 0; i < 10; i++)

{

item = new LidorSystems.IntegralUI.Lists.ListBoxItem();

 

obj = CreateProduct(i);

item.Content = ApplyTemplate(obj);

item.Tag = obj;

 

ProgressBar ctrlRate = new ProgressBar();

ctrlRate.Size = new Size(70, 12);

ctrlRate.Minimum = 0;

ctrlRate.Maximum = 5;

ctrlRate.Value = obj.Rating;

item.Controls.Add(ctrlRate);

 

this.listBox1.Items.Add(item);

}

 

this.listBox1.ResumeUpdate();

}

 

private Product CreateProduct(int index)

{

Product obj = new Product(index);

 

switch (index % 3)

{

case 1:

obj.Name = "Thüringer Rostbratwurst";

obj.Category = "Meat";

obj.Rating = 2;

obj.Price = 123.79f;

obj.ImageSource = "meat.jpg";

break;

 

case 2:

obj.Name = "Scottish Longbreads";

obj.Category = "Confections";

obj.Rating = 4;

obj.Price = 12.50f;

obj.ImageSource = "confections.jpg";

break;

 

default:

obj.Name = "Ipoh Coffee";

obj.Category = "Beverages";

obj.Rating = 3;

obj.Price = 46.00f;

obj.ImageSource = "beverages.jpg";

break;

}

 

return obj;

}

Private Sub InitList()

Me.listBox1.SuspendUpdate()

 

Dim obj As Product = Nothing

Dim item As LidorSystems.IntegralUI.Lists.ListBoxItem = Nothing

 

For i As Integer = 0 To 9

item = New LidorSystems.IntegralUI.Lists.ListBoxItem()

 

obj = CreateProduct(i)

item.Content = ApplyTemplate(obj)

item.Tag = obj

 

Dim ctrlRate As New ProgressBar()

ctrlRate.Size = New Size(70, 12)

ctrlRate.Minimum = 0

ctrlRate.Maximum = 5

ctrlRate.Value = obj.Rating

item.Controls.Add(ctrlRate)

 

Me.listBox1.Items.Add(item)

Next

 

Me.listBox1.ResumeUpdate()

End Sub

 

Private Function CreateProduct(ByVal index As Integer) As Product

Dim obj As New Product(index)

 

Select Case index Mod 3

Case 1

obj.Name = "Thüringer Rostbratwurst"

obj.Category = "Meat"

obj.Rating = 2

obj.Price = 123.79F

obj.ImageSource = "meat.jpg"

Exit Select

 

Case 2

obj.Name = "Scottish Longbreads"

obj.Category = "Confections"

obj.Rating = 4

obj.Price = 12.5F

obj.ImageSource = "confections.jpg"

Exit Select

 

Case Else

obj.Name = "Ipoh Coffee"

obj.Category = "Beverages"

obj.Rating = 3

obj.Price = 46.0F

obj.ImageSource = "beverages.jpg"

Exit Select

End Select

 

Return obj

End Function

For this demo we are creating the product list from three types of products. We little modification this could easily be adjusted with data from some database or any other dataset. As a result, all products are shown with more details. You can notice that we are using text, images, hyperlinks and ProgressBar control to show various data for each product.

A complete sample project in C# and VB showing how to create a listbox where each item display various objects in custom layout using a template is available for download from here: ListBox .NET Rich Content Sample

Newsletter


Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name: Email: *
*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.