The ListBox Control provides us a user interface that will display the List of the items. From there, the users can select one or more items from the List. We can use the ListBox to show the multiple columns, and these columns can contain images and other controls.
For creating the ListBox, we will follow the two approaches in Windows Form. To create the ListBox control, either we can use the Forms Designer at the time of the designing, or we can use the ListBox class for creating control at the run time.
In our first approach, we will create the ListBox control at the time of the designing using the Windows Forms.
To create the ListBox control, we simply drag the ListBox control from the toolbox and will drop it to the Form. After the drag and drop of Listbox, the Form will look like as below figure. When the ListBox is shown on the Form, now we will resize its size by using the mouse and will set its property and events.
ListBox class shows the ListBox control in Windows form. For the run time execution to create the ListBox, firstly, we will create the instance of the ListBox class and set its properties and will add the ListtBox object to the Form Control.
Step 1. To create the Dynamic ListBox in the first, we will create the instance of the ListBox class.
To create the object of the ListBox, we will write the below code:
ListBox List1 = new ListBox();
Step 2. In the next step, we will set the properties of the ListBox control. For this we will write the following code. In the property we will set the Location, width, height, background color, foreground color, name and font properties of the ListBox, as shown below:
ListBox box = new ListBox(); box.Location = new Point(300, 110); box.Size = new Size(160, 103); box.ForeColor = Color.Purple; box.Items.Add(765); box.Items.Add(875); box.Items.Add(345);
Step 3. When the properties are set with the ListBox control, in the next step we will add the ListBox to the Form. For this we will use the Form.Controls.Add method which will add the ListBox control to the Form control and will display it on the Form according to their location, and size.
// Now we will add ListBox control
// to the form
this.Controls.Add(box);Now we will write a code to add the item in the ListBox control and to show them in the List.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace WindowsFormsApp2
{
public partial class Form1: Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
ListBox box = new ListBox();
box.Location = new Point(300, 110);
box.Size = new Size(160, 103);
box.ForeColor = Color.Purple;
box.Items.Add(765);
box.Items.Add(875);
box.Items.Add(345);
// Now we will add ListBox control
// to the form
this.Controls.Add(box);
}
}
}Output:
Now we will take another example of the creation of the ListBox item at the run time.
For this, as will follow the same steps as per the above code.
Step 1. In the first, we will create an object of the ListBox. For this, we will write the below code:
ListBox ListItem = new ListBox();
Step 2. In the next step, we will set the properties of the ListBox control. We will write the code for the location, width, height, etc.
ListItem.Location = new System.Drawing.Point(15, 15); ListItem.Name = "ListItem"; ListItem.Size = new System.Drawing.Size(350, 400); ListItem.BackColor = System.Drawing.Color.Orange; ListItem.ForeColor = System.Drawing.Color.Black;
Step 3. Now we will add the item in the ListBox at the run-time by using the below code.
ListItem.Items.Add("Vaishali Tyagi");
ListItem.Items.Add("Samlesh Tyagi");
ListItem.Items.Add("Preeti Tyagi");
ListItem.Items.Add("Priyanka Tyagi");Step 4. In the next step, we will add the ListBox to the Form. For this we will use the Forms.Controls.Add method which helps us to add the ListBox controls to the Forms control and displays it on the Form which is based on the location and size of the control.
this.Controls.Add(ListItem);
Now we will write a code in C# to create the ListBox control in Windows Form.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace WindowsFormsApp2
{
public partial class Form1: Form
{
public Form1()
{
InitializeComponent();
}
ListBox ListItem = new ListBox();
private void Form1_Load(object sender, EventArgs e)
{
ListItem.Location = new System.Drawing.Point(15, 15);
ListItem.Name = "ListItem";
ListItem.Size = new System.Drawing.Size(350, 400);
ListItem.BackColor = System.Drawing.Color.Orange;
ListItem.ForeColor = System.Drawing.Color.Black;
ListItem.Items.Add("Vaishali Tyagi");
ListItem.Items.Add("Samlesh Tyagi");
ListItem.Items.Add("Preeti Tyagi");
ListItem.Items.Add("Priyanka Tyagi");
this.Controls.Add(ListItem);
}
}
}OutPut:
The name property represents the unique name of the ListBox controls. We used this name in the code to access the controls. The below code sets and gets the name of the text of the ListBox control.
ListItem.Name = "ListItem";
Location: The Location property contains a point that shows the starting position of the ListBox on the Form. We can also use the Left and Top properties to show the location of the control from the top-left corner of the Form.
Size: The size property shows the size of the control. We can also use the width and height properties instead of the size property. For this, we will write the following code to set the location, height, and width properties of the ListBox control.
ListItem.Location = new System.Drawing.Point(15, 15); ListItem.Size = new System.Drawing.Size(350, 400);
Font property shows the font of the text of ListBox control. When we click on the font property in the properties window there, we can see the name of the Font, Size, and other option of the font. For this, we will write the following code, which sets the Font property at the run time.
ListItem.Font = new Font("Georgia", 16);To set the background and foreground color of the ListBox, we used the BackColor and Forecolor properties. After clicking on these properties in the property window, there will appear a color-dialog.
For this, we will write the following code:
ListItem.BackColor = System.Drawing.Color.Orange; ListItem.ForeColor = System.Drawing.Color.Black;
Here we are going to add the element in the ListBox, Remove the element and will show them in the GridView.
For the application creation, we will design a User Interface where the interface contains the two listboxes(listbox1 and listbox2), five buttons which includes the different functionality i.e., Add the data from the first Listbox to the second Listbox, Remove data, Add All, Remove All, Finalize and a GridView where we will show the Finalize data.
To design the Graphical User Interface, we will follow the following steps:
Step1. In the first, we will create a new project for the creation of the project; we will follow the next steps:
Click on New->Project, as shown in the below screenshot.
Step 2. After this, a new window will display, where we select the Visual C#->Windows Form Application->Name of the project(AddRemoveCreation) and click ok, as shown in the below screenshot.
Step 3. After this, a Form will create as shown in the below screenshot:
Step 4. In the next step, we will Drag and Drop the ListBox from the toolbox. Here we are going to take two ListBox(ListBox1 and ListBox2) and Five buttons(Add, Remove, Add All, Remove All and Finalize).
Step 5. In the next step, we will change the text and name of the button by right-clicking on the button->choose properties->change the text name as shown in the below screenshot:
Step 6. After clicking on the properties, the property window will open where we will change the name of the button and the text on the button as shown in the below screenshot:
Step 7. After this, we are going to show the data after clicking on the finalize button in the GridView. For this, we will click on the Data->GridView.
After this, the page will look like, as shown below:
For this, we will do the below code:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace AddRemoveCreation
{
public partial class Form1: Form
{
//create an object dtCourse of the DataTable.
private DataTable dtCourse = new DataTable();
//create an object dtSelectedCourse of the DataTable.
private DataTable dtSelectedCourse = new DataTable();
public Form1()
{
//InitializeComponent() is used to initialize the form.
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//call the function at the form loading
FillCouseTable();
SelectedCourseTable();
//Add the value in the DataSource of the ListBox1
listBox1.DataSource = dtCourse;
//listbox1.DisplayMember is used to decide which column we want to show in the final output
listBox1.DisplayMember = "CourseName";
//dtSelectedCourse datatable add the value in the listbox2 datasource
listBox2.DataSource = dtSelectedCourse;
listBox2.DisplayMember = "CourseName";
}
//FillCourseTable() function is declare to add the data in the datatable with the help of the data object
private void FillCouseTable()
{
//adding the column name
dtCourse.Columns.Add("CourseID", typeof(int));
dtCourse.Columns.Add("CourseName");
dtCourse.Columns.Add("CourseDuration");
//add the data in the dtCourse table
dtCourse.Rows.Add(1, "Advance OOPS", "4 Months");
dtCourse.Rows.Add(2, "Data Structure", "5 Months");
dtCourse.Rows.Add(3, "Java", "6 Months");
dtCourse.Rows.Add(4, "C++", "3 Months");
dtCourse.Rows.Add(5, "C", "2 Months");
}
//SelectedCourseTable() function is declare which contain the column name of the data table.
private void SelectedCourseTable()
{
dtSelectedCourse.Columns.Add("CourseID", typeof(int));
dtSelectedCourse.Columns.Add("CourseName");
dtSelectedCourse.Columns.Add("CourseDuration");
}
//After clicking on the add button function Addbtn_Click() is create which contain the functionality of Add button
private void Addbtn_Click(object sender, EventArgs e)
{
//if the condition applies if the listbox1 contain the item greater than zero then this will import the data in the listbox2 and delete the data from the listbox1
if(listBox1.Items.Count>0)
{
//Here we are improting the data to the dtSelectedCourse datatable from the dtcourse datatable
dtSelectedCourse.ImportRow(dtCourse.Rows[listBox1.SelectedIndex]);
dtCourse.Rows[listBox1.SelectedIndex].Delete();
}
}Here we are going to show that the listbox1 containing the data.
After clicking on the Add button, data will be added to the listbox2 and gets deleted from the listbox1.
Here we are going to show how to remove the data from the listbox2.
For this, we will write the below code:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace AddRemoveCreation
{
public partial class Form1: Form
{
//create an object dtCourse of the DataTable.
private DataTable dtCourse = new DataTable();
//create an object dtSelectedCourse of the DataTable.
private DataTable dtSelectedCourse = new DataTable();
public Form1()
{
//InitializeComponent() is used to initialize the form.
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//call the function at the form loading
FillCouseTable();
SelectedCourseTable();
//Add the value in the DataSource of the ListBox1
listBox1.DataSource = dtCourse;
//listbox1.DisplayMember is used to decide which column we want to show in the final output
listBox1.DisplayMember = "CourseName";
//dtSelectedCourse datatable add the value in the listbox2 datasource
listBox2.DataSource = dtSelectedCourse;
listBox2.DisplayMember = "CourseName";
}
//FillCourseTable() function is declare to add the data in the datatable with the help of the data object
private void FillCouseTable()
{
//adding the column name
dtCourse.Columns.Add("CourseID", typeof(int));
dtCourse.Columns.Add("CourseName");
dtCourse.Columns.Add("CourseDuration");
//add the data in the dtCourse table
dtCourse.Rows.Add(1, "Advance OOPS", "4 Months");
dtCourse.Rows.Add(2, "Data Structure", "5 Months");
dtCourse.Rows.Add(3, "Java", "6 Months");
dtCourse.Rows.Add(4, "C++", "3 Months");
dtCourse.Rows.Add(5, "C", "2 Months");
}
//SelectedCourseTable() function is declare which contain the column name of the data table.
private void SelectedCourseTable()
{
dtSelectedCourse.Columns.Add("CourseID", typeof(int));
dtSelectedCourse.Columns.Add("CourseName");
dtSelectedCourse.Columns.Add("CourseDuration");
}
//After clicking on the Remove button Removebtn_Click() function is created where we remove the element from the listbox2 and import the data in the data table.
private void Removebtn_Click(object sender, EventArgs e)
{
//for removing the element we apply condition if listbox contain the element greater than zero
if (listBox2.Items.Count > 0)
{
//here the data will be import to the datatable dtcourse from the dtSelected Database.
dtCourse.ImportRow(dtSelectedCourse.Rows[listBox2.SelectedIndex]);
//All data will be deleted from the datatable dtSelectedCourse
dtSelectedCourse.Rows[listBox2.SelectedIndex].Delete();
}
}
}
}Before removing the data, the whole data is in the listbox2 and the listbox1 does not contain any value. The output will look like as shown below:
After clicking on the remove button, data is going to be deleted from the listbox 2 and added to the listbox1, as shown in the below screenshot:
To add the complete data from listbox1 to listbox2, we will write the following code as shown below:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace AddRemoveCreation
{
public partial class Form1: Form
{
//create an object dtCourse of the DataTable.
private DataTable dtCourse = new DataTable();
//create an object dtSelectedCourse of the DataTable.
private DataTable dtSelectedCourse = new DataTable();
public Form1()
{
//InitializeComponent() is used to initialize the form.
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//call the function at the form loading
FillCouseTable();
SelectedCourseTable();
//Add the value in the DataSource of the ListBox1
listBox1.DataSource = dtCourse;
//listbox1.DisplayMember is used to decide which column we want to show in the final output
listBox1.DisplayMember = "CourseName";
//dtSelectedCourse datatable add the value in the listbox2 datasource
listBox2.DataSource = dtSelectedCourse;
listBox2.DisplayMember = "CourseName";
}
//FillCourseTable() function is declare to add the data in the datatable with the help of the data object
private void FillCouseTable()
{
//adding the column name
dtCourse.Columns.Add("CourseID", typeof(int));
dtCourse.Columns.Add("CourseName");
dtCourse.Columns.Add("CourseDuration");
//add the data in the dtCourse table
dtCourse.Rows.Add(1, "Advance OOPS", "4 Months");
dtCourse.Rows.Add(2, "Data Structure", "5 Months");
dtCourse.Rows.Add(3, "Java", "6 Months");
dtCourse.Rows.Add(4, "C++", "3 Months");
dtCourse.Rows.Add(5, "C", "2 Months");
}
//SelectedCourseTable() function is declare which contain the column name of the data table.
private void SelectedCourseTable()
{
dtSelectedCourse.Columns.Add("CourseID", typeof(int));
dtSelectedCourse.Columns.Add("CourseName");
dtSelectedCourse.Columns.Add("CourseDuration");
}
//After clicking on the AddAll button AddAllbtn_Click() function is create.
private void AddAllbtn_Click(object sender, EventArgs e)
{
//if condition is apply this will check if the listbox contain the element greater than zero.
if(listBox1.Items.Count>0)
{
//dtCourse.Rows.Count will count the element and assign the value in the count variable.
int count = dtCourse.Rows.Count;
//for condition is apply this will going upto the count
for(int i=count-1;i>=0;i--)
{
//dtCourse.Rows[listbox1.SelectedIndex] with the help of this data will be import to the dtSelected datatable.
dtSelectedCourse.ImportRow(dtCourse.Rows[listBox1.SelectedIndex]);
//with this code data eill be delete from the dtCourse datatable.
dtCourse.Rows[listBox1.SelectedIndex].Delete();
}
}
}
}
}Data in the listbox1 is shown as below:
After writing this code, the AddAll button will work, as shown below:
Here we will remove all the data from the listbox2 and add all the data in the listbox1.
To remove all the data from the Listbox, we will write the following code as shown below:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System. Data;
using System. Drawing;
using System. Linq;
using System. Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace AddRemoveCreation
{
public partial class Form1: Form
{
//create an object dtCourse of the DataTable.
private DataTable dtCourse = new DataTable();
//create an object dtSelectedCourse of the DataTable.
private DataTable dtSelectedCourse = new DataTable();
public Form1()
{
//InitializeComponent() is used to initialize the form.
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//call the function at the form loading
FillCouseTable();
SelectedCourseTable();
//Add the value in the DataSource of the ListBox1
listBox1.DataSource = dtCourse;
//listbox1.DisplayMember is used to decide which column we want to show in the final output
listBox1.DisplayMember = "CourseName";
//dtSelectedCourse datatable add the value in the listbox2 datasource
listBox2.DataSource = dtSelectedCourse;
listBox2.DisplayMember = "CourseName";
}
//FillCourseTable() function is declare to add the data in the datatable with the help of the data object
private void FillCouseTable()
{
//adding the column name
dtCourse.Columns.Add("CourseID", typeof(int));
dtCourse.Columns.Add("CourseName");
dtCourse.Columns.Add("CourseDuration");
//add the data in the dtCourse table
dtCourse.Rows.Add(1, "Advance OOPS", "4 Months");
dtCourse.Rows.Add(2, "Data Structure", "5 Months");
dtCourse.Rows.Add(3, "Java", "6 Months");
dtCourse.Rows.Add(4, "C++", "3 Months");
dtCourse.Rows.Add(5, "C", "2 Months");
}
//SelectedCourseTable() function is declare which contain the column name of the data table.
private void SelectedCourseTable()
{
dtSelectedCourse.Columns.Add("CourseID", typeof(int));
dtSelectedCourse.Columns.Add("CourseName");
dtSelectedCourse.Columns.Add("CourseDuration");
}
//After clicking on the Remove button RemoveAllbtn_Click() function is create.
private void RemoveAllbtn_Click(object sender, EventArgs e)
{
//if the condition is applied, this will count the listbox2 containing the value.
if (listBox2.Items.Count > 0)
{
int count = dtSelectedCourse.Rows.Count;
//for loop is apply which will go upto the greater than zero
for (int i = count - 1; i >= 0; i--)
{
//dtCourse datatable import the data from the dtSelectedCourse datatable.
dtCourse.ImportRow(dtSelectedCourse.Rows[listBox2.SelectedIndex]);
//data will be deleted from the dtSelectedCourse datatable.
dtSelectedCourse.Rows[listBox2.SelectedIndex].Delete();
}
}
}
}
}
Here we will use GridView to show all the data of the ListBox2 after clicking on the finalize button.
To show the data in the GridView, we will write the following code:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System. Data;
using System. Drawing;
using System. Linq;
using System. Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace AddRemoveCreation
{
public partial class Form1: Form
{
//create an object dtCourse of the DataTable.
private DataTable dtCourse = new DataTable();
//create an object dtSelectedCourse of the DataTable.
private DataTable dtSelectedCourse = new DataTable();
public Form1()
{
//InitializeComponent() is used to initialize the form.
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//call the function at the form loading
FillCouseTable();
SelectedCourseTable();
//Add the value in the DataSource of the ListBox1
listBox1.DataSource = dtCourse;
//listbox1.DisplayMember is used to decide which column we want to show in the final output
listBox1.DisplayMember = "CourseName";
//dtSelectedCourse datatable add the value in the listbox2 datasource
listBox2.DataSource = dtSelectedCourse;
listBox2.DisplayMember = "CourseName";
}
//FillCourseTable() function is declare to add the data in the datatable with the help of the data object
private void FillCouseTable()
{
//adding the column name
dtCourse.Columns.Add("CourseID", typeof(int));
dtCourse.Columns.Add("CourseName");
dtCourse.Columns.Add("CourseDuration");
//add the data in the dtCourse table
dtCourse.Rows.Add(1, "Advance OOPS", "4 Months");
dtCourse.Rows.Add(2, "Data Structure", "5 Months");
dtCourse.Rows.Add(3, "Java", "6 Months");
dtCourse.Rows.Add(4, "C++", "3 Months");
dtCourse.Rows.Add(5, "C", "2 Months");
}
//SelectedCourseTable() function is declare which contain the column name of the data table.
private void SelectedCourseTable()
{
dtSelectedCourse.Columns.Add("CourseID", typeof(int));
dtSelectedCourse.Columns.Add("CourseName");
dtSelectedCourse.Columns.Add("CourseDuration");
}
//Clicking on the Finalize button Finalizebtn_Click() function is create
private void Finalizebtn_Click(object sender, EventArgs e)
{
// create an object of the DialoResult where we will show the message with the help of the MessageBox.Show() function.
DialogResult dialog=MessageBox.Show("Are you sure you want to finalize the selected course", "Confirmation Message", MessageBoxButtons.YesNo, MessageBoxIcon.Question);
//Condition is apply if the result is yes.
if(dialog==DialogResult.Yes)
{
//Shows the result of the dtSelectedCourse datatable to GridView.
dataGridView1.DataSource = dtSelectedCourse;
//to stop the editing we enable the datagridview to false.
dataGridView1.Enabled = false;
//With this code we apply the visiblity of the column index 0 to false.
dataGridView1.Columns[0].Visible = false;
//hide the header value of the row
dataGridView1.RowHeadersVisible = false;
}
else
{
//If the result no, then shows the message with the help of the MessageBox.Show().
MessageBox.Show("Please Select Atleast one course","Information Message", MessageBoxButtons.YesNo, MessageBoxIcon.Information);
}
}
}
}After clicking on the Finalize button, confirmation message will display.
After clicking on yes, the aggregate data is displayed in the GridView as shown in the below screenshot:
