How to Change the Color and Font of Each Subitem in a ListView

Introduction

This article demonstrates how to change the color and font properties of each subitem of a ListView by using Visual Studio 2010 and C#. This article starts with an introduction of the controls we would use in this project. After that, it demonstrates how to position and the functions of the controls that we use. In the end, the article discusses how to change the color and fonts of each subitem and why we need some code snippets in this application.

Controls we would use

We use a ListView, six RadioButtons from row 1 to row 6, three ComboBoxes from column 2 to column 4, a GroupBox, a Button, a ColorDialog and a FontDialog.

The ListView contains six rows and four columns; the first column called "Pid" is the item which indicates ProductId. The second column is called "product" and the third column "stock" and the fourth column "price" are subitems of the related item.

We will change the colors of these subitems by colorbrowser, and font by using fontbrowser.

Then we would write changed values into the ListView.

Positioning

Figure 1 shows the positioning of conrols we used. First you must fill the text of three comboboxes.

Then you must click radiobutton1 for row 1, you choose color and font through browsers, after that again you fill three comboboxes for row 2 and click radiobutton 2 for row 2, and go ahead by this way until row 6.

The button named "try again" repeats this application from the beginning.

Figure 2 shows stage numbers of cycles 1 as red numbers for row 1, and cycle 2 blue numbers for row 2, and accordingly the same way for other rows.

Figure 3 shows adding a color to (row 1, column 2).

Figure 4 shows adding a font for item 1 (row 1, column 2).

Figure 5 shows row 1 and row 2 completed.

Figure 6 shows the output for the six rows above.

Listing 1

Some properties of the ListView changed in Listing 1.

listView1.GridLines = true;
listView1.View = View.Details;
listView1.FullRowSelect = true;
listView1.BackColor = Color.Silver;

Listing 2

Columns and ComboBox items added to the ListView.

listView1.Columns.Add("Pid", 100, HorizontalAlignment.Left);
listView1.Columns.Add("Product", 150, HorizontalAlignment.Left);
listView1.Columns.Add("Stock", 150, HorizontalAlignment.Left);
listView1.Columns.Add("Price", 100, HorizontalAlignment.Left);

cmbPrdct.Items.Add("Led Lcd TV");
cmbPrdct.Items.Add("Laptop");
cmbPrdct.Items.Add("HDD 500 GB");
cmbPrdct.Items.Add("3D Led Monitor");
cmbPrdct.Items.Add("GSM Phone");
cmbPrdct.Items.Add("Fax");

cmbStck.Items.Add(" 55");
cmbStck.Items.Add("112");
cmbStck.Items.Add(" 88");
cmbStck.Items.Add(" 43");
cmbStck.Items.Add("210");
cmbStck.Items.Add(" 86");

cmbPrc.Items.Add("1660 $");
cmbPrc.Items.Add("1300 $");
cmbPrc.Items.Add(" 260 $");
cmbPrc.Items.Add(" 690 $");
cmbPrc.Items.Add(" 350 $");
cmbPrc.Items.Add(" 240 $");

Listing 3

In the Radiobutton1 Click Event Handler we run the color and font codes for item 1 (row 1).

ListViewItem change1 = listView1.Items.Add("1");

A Listitem object must be created to the Listview first. "1" is the item number, also row number.

change1.UseItemStyleForSubItems = false;

After that the UseItemStyleForSubItems property must be false.

ListViewItem.ListViewSubItem product = change1.SubItems.Add(cmbPrdct.Text);

The subitem named "product" which is column 2 of the ListView must be added. cmbPrdct .Text is a string that you entered for Product.

Color and font properties are determined for subitem named "product".

ColorDialog colord = new ColorDialog();
if (colord.ShowDialog() == DialogResult.OK)
{
product.ForeColor = colord.Color;

}

FontDialog fontp = new FontDialog();
if (fontp.ShowDialog() == DialogResult.OK)
{
product.Font = fontp.Font;
}

The Subitem named "stock" which is column 3 of the ListView must be added. "cmbStck.Text" is a string that you enter for stock.

ListViewItem.ListViewSubItem stock = change1.SubItems.Add(cmbStck.Text);

Color and font properties determined for subitem called "stock".

ColorDialog colorStock = new ColorDialog();
if (colorStock.ShowDialog() == DialogResult.OK)
{
stock.ForeColor = colorStock.Color;

}

FontDialog fontst = new FontDialog();
if (fontst.ShowDialog() == DialogResult.OK)
{
stock.Font = fontst.Font;
}

The Subitem named "price" which column 4 of the ListView must be added. " cmbPrc.Text " is a string that you entered for price.

ListViewItem.ListViewSubItem Price = change1.SubItems.Add(cmbPrc.Text);

Color and font properties determined for subitem called "price".

ColorDialog colorPrice = new ColorDialog();
if (colorPrice.ShowDialog() == DialogResult.OK)
{
Price.ForeColor = colorPrice.Color;

}

FontDialog fontprc = new FontDialog();
if (fontprc.ShowDialog() == DialogResult.OK)
{
Price.Font = fontprc.Font;
}

Summary

In this article, I discussed how we can change color and font of each sub item of a ListView in C#. We also saw how we can position controls on the form and how to set some of the properties of the ListView at first. After that, we saw the cycles of color and font changes. In the end of this article, we saw changes of color and font on the ListView. You can use some code snippets in your own applications to emphasize the priority of sub items in rows or columns by different color and font to create interfaces that are user-friendly.

5 Comments

Join the conversation! Your thoughts help the community grow.

NIZAMUDEEN ABDUL JABBAR9y ago
Hi Riza,if i have output in productid like Riza/123 in this case how to apply font style color e.g Red for first four digit (Riza) , your help is highly appreciated.
opasid vilayvone13y ago
Hi Riza Kaftan Thank you for sharing it.
Abhishek Dubey14y ago
Hi Riza thanks for sharing it.
Arjun Panwar14y ago
Thanks for this great work.
Maria Johnson14y ago
Great what a presentation.