This tutorial will show you how to use the ListView control, and how to add items to it as well as remove. C# version.
This tutorial will show how we can use the ListView control to display a list of items on a Windows Form, under different headers. The ListView control is very flexible, and is similar to the Windows File Explorer. We are able to use the ListView to output information to the user under several headings.
In this example, we will add a ListView to our form and use buttons to add and then manipulate the data we add - removing and clearing. We will also show how we can change the view of the ListView.
To start, we add a ListView control, four buttons, and a group of 5 Radio Buttons. Our Windows Form Designer generated code looks like this:
#region Windows Form Designer generated code
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.listView1 = new System.Windows.Forms.ListView();
this.columnHeader1 = new System.Windows.Forms.ColumnHeader();
this.columnHeader2 = new System.Windows.Forms.ColumnHeader();
this.columnHeader3 = new System.Windows.Forms.ColumnHeader();
this.butAdd = new System.Windows.Forms.Button();
this.butClear = new System.Windows.Forms.Button();
this.label1 = new System.Windows.Forms.Label();
this.butRemove = new System.Windows.Forms.Button();
this.groupBox1 = new System.Windows.Forms.GroupBox();
this.radioButton1 = new System.Windows.Forms.RadioButton();
this.radioButton2 = new System.Windows.Forms.RadioButton();
this.radioButton3 = new System.Windows.Forms.RadioButton();
this.radioButton4 = new System.Windows.Forms.RadioButton();
this.radioButton5 = new System.Windows.Forms.RadioButton();
this.button1 = new System.Windows.Forms.Button();
this.groupBox1.SuspendLayout();
this.SuspendLayout();
//
// listView1
//
this.listView1.Columns.AddRange(new System.Windows.Forms.ColumnHeader[] {
this.columnHeader1,
this.columnHeader2,
this.columnHeader3});
this.listView1.Location = new System.Drawing.Point(12, 12);
this.listView1.Name = "listView1";
this.listView1.Size = new System.Drawing.Size(193, 108);
this.listView1.TabIndex = 0;
this.listView1.UseCompatibleStateImageBehavior = false;
this.listView1.View = System.Windows.Forms.View.Details;
//
// columnHeader1
//
this.columnHeader1.Text = "Name";
//
// columnHeader2
//
this.columnHeader2.Text = "Age";
//
// columnHeader3
//
this.columnHeader3.Text = "City";
//
// butAdd
//
this.butAdd.Location = new System.Drawing.Point(12, 126);
this.butAdd.Name = "butAdd";
this.butAdd.Size = new System.Drawing.Size(75, 23);
this.butAdd.TabIndex = 1;
this.butAdd.Text = "Add New";
this.butAdd.UseVisualStyleBackColor = true;
this.butAdd.Click += new System.EventHandler(this.button1_Click);
//
// butClear
//
this.butClear.Location = new System.Drawing.Point(130, 126);
this.butClear.Name = "butClear";
this.butClear.Size = new System.Drawing.Size(75, 23);
this.butClear.TabIndex = 2;
this.butClear.Text = "Clear";
this.butClear.UseVisualStyleBackColor = true;
this.butClear.Click += new System.EventHandler(this.butClear_Click);
//
// label1
//
this.label1.AutoSize = true;
this.label1.Location = new System.Drawing.Point(8, 242);
this.label1.Name = "label1";
this.label1.Size = new System.Drawing.Size(296, 13);
this.label1.TabIndex = 3;
this.label1.Text = "For more .NET Tutorials, please visit www.dotnettutorials.com";
//
// butRemove
//
this.butRemove.Location = new System.Drawing.Point(12, 155);
this.butRemove.Name = "butRemove";
this.butRemove.Size = new System.Drawing.Size(75, 23);
this.butRemove.TabIndex = 4;
this.butRemove.Text = "Remove";
this.butRemove.UseVisualStyleBackColor = true;
this.butRemove.Click += new System.EventHandler(this.butRemove_Click);
//
// groupBox1
//
this.groupBox1.Controls.Add(this.radioButton5);
this.groupBox1.Controls.Add(this.radioButton4);
this.groupBox1.Controls.Add(this.radioButton3);
this.groupBox1.Controls.Add(this.radioButton2);
this.groupBox1.Controls.Add(this.radioButton1);
this.groupBox1.Location = new System.Drawing.Point(211, 12);
this.groupBox1.Name = "groupBox1";
this.groupBox1.Size = new System.Drawing.Size(93, 137);
this.groupBox1.TabIndex = 5;
this.groupBox1.TabStop = false;
this.groupBox1.Text = "Change View";
//
// radioButton1
//
this.radioButton1.AutoSize = true;
this.radioButton1.Location = new System.Drawing.Point(12, 20);
this.radioButton1.Name = "radioButton1";
this.radioButton1.Size = new System.Drawing.Size(81, 17);
this.radioButton1.TabIndex = 0;
this.radioButton1.TabStop = true;
this.radioButton1.Text = "Large Icons";
this.radioButton1.UseVisualStyleBackColor = true;
this.radioButton1.CheckedChanged += new System.EventHandler(this.radioButton1_CheckedChanged);
//
// radioButton2
//
this.radioButton2.AutoSize = true;
this.radioButton2.Location = new System.Drawing.Point(12, 43);
this.radioButton2.Name = "radioButton2";
this.radioButton2.Size = new System.Drawing.Size(79, 17);
this.radioButton2.TabIndex = 1;
this.radioButton2.TabStop = true;
this.radioButton2.Text = "Small Icons";
this.radioButton2.UseVisualStyleBackColor = true;
this.radioButton2.CheckedChanged += new System.EventHandler(this.radioButton2_CheckedChanged);
//
// radioButton3
//
this.radioButton3.AutoSize = true;
this.radioButton3.Location = new System.Drawing.Point(12, 66);
this.radioButton3.Name = "radioButton3";
this.radioButton3.Size = new System.Drawing.Size(41, 17);
this.radioButton3.TabIndex = 2;
this.radioButton3.TabStop = true;
this.radioButton3.Text = "List";
this.radioButton3.UseVisualStyleBackColor = true;
this.radioButton3.CheckedChanged += new System.EventHandler(this.radioButton3_CheckedChanged);
//
// radioButton4
//
this.radioButton4.AutoSize = true;
this.radioButton4.Location = new System.Drawing.Point(12, 89);
this.radioButton4.Name = "radioButton4";
this.radioButton4.Size = new System.Drawing.Size(42, 17);
this.radioButton4.TabIndex = 3;
this.radioButton4.TabStop = true;
this.radioButton4.Text = "Tile";
this.radioButton4.UseVisualStyleBackColor = true;
this.radioButton4.CheckedChanged += new System.EventHandler(this.radioButton4_CheckedChanged);
//
// radioButton5
//
this.radioButton5.AutoSize = true;
this.radioButton5.Location = new System.Drawing.Point(12, 112);
this.radioButton5.Name = "radioButton5";
this.radioButton5.Size = new System.Drawing.Size(57, 17);
this.radioButton5.TabIndex = 4;
this.radioButton5.TabStop = true;
this.radioButton5.Text = "Details";
this.radioButton5.UseVisualStyleBackColor = true;
this.radioButton5.CheckedChanged += new System.EventHandler(this.radioButton5_CheckedChanged);
//
// button1
//
this.button1.Location = new System.Drawing.Point(229, 216);
this.button1.Name = "button1";
this.button1.Size = new System.Drawing.Size(75, 23);
this.button1.TabIndex = 6;
this.button1.Text = "Exit";
this.button1.UseVisualStyleBackColor = true;
this.button1.Click += new System.EventHandler(this.button1_Click_1);
//
// Form1
//
this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.ClientSize = new System.Drawing.Size(319, 264);
this.Controls.Add(this.button1);
this.Controls.Add(this.groupBox1);
this.Controls.Add(this.butRemove);
this.Controls.Add(this.label1);
this.Controls.Add(this.butClear);
this.Controls.Add(this.butAdd);
this.Controls.Add(this.listView1);
this.Name = "Form1";
this.Text = "Windows Form ListView Control";
this.groupBox1.ResumeLayout(false);
this.groupBox1.PerformLayout();
this.ResumeLayout(false);
this.PerformLayout(); }
#endregion |
This is the code that is generated by Visual Studio when we design our form. Yours may look different.
Once we have added all of our controls to the form, we want to click on the Smart Tag of the ListView and choose Edit Columns. For this example, we are going to use Name, Age, and City.
If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.
Once we have done this, we can start with the code-behind. Although the first thing we want to code is our Add button. Choose one of the buttons and set the text to Add, then double-click it to create the event handler. Before we write any code, we first need to add a reference to our project. We are wanting to make use of a popup box that will ask the user for input, just like VB's InputBox. Unfortunately C# does not have an equivalent, but we can reference the Visual Basic DLL and use that one. Right-click the References folder in the Solution Explorer, and choose Microsoft.VisualBasic from the .NET tab. Then we can use the following code:
private void button1_Click(object sender, EventArgs e)
{
ListViewItem newItem = listView1.Items.Add(Microsoft.VisualBasic.Interaction.InputBox("Name:", "Please enter name","name",200,200));
newItem.SubItems.Add(Microsoft.VisualBasic.Interaction.InputBox("Age:", "Please enter age","age",200,200));
newItem.SubItems.Add(Microsoft.VisualBasic.Interaction.InputBox("City:", "Please enter city","city",200,200)); } |
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.
This code is for the Add button. We are simply adding to the ListView columns - Name is the main element, and Age and City are the SubItems of that element. For each item, we use the InputBox to gather information from the user.
Next, we can add code to the other buttons. One will be used to remove all items from the ListView, another to remove the selected item(s) from the ListView, and the third button will be the Exit button:
private void butClear_Click(object sender, EventArgs e)
{
listView1.Items.Clear(); }
private void butRemove_Click(object sender, EventArgs e)
{
foreach (ListViewItem toDelete in listView1.SelectedItems) {
toDelete.Remove(); }
private void button1_Click_1(object sender, EventArgs e)
{
Close(); } |
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
Note that these are very simple methods, but can be powerful tools.
Finally, we want to add code to our RadioButtons. We will use them to change the view of the ListView. The ListView control has 5 built-in views, which we will use to switch between:
private void radioButton1_CheckedChanged(object sender, EventArgs e)
{
listView1.View = View.LargeIcon; }
private void radioButton2_CheckedChanged(object sender, EventArgs e)
{
listView1.View = View.SmallIcon; }
private void radioButton3_CheckedChanged(object sender, EventArgs e)
{
listView1.View = View.List; }
private void radioButton4_CheckedChanged(object sender, EventArgs e)
{
listView1.View = View.Tile; }
private void radioButton5_CheckedChanged(object sender, EventArgs e)
{
listView1.View = View.Details; } |
Looking for the VB.NET 2008 Version? Click Here!
Looking for more .NET Tutorials? Click Here!