How to Add Controls and Event Handlers Dynamically ?
This article explains how to add a picture box control dynamically (means at runtime) on a panel control. It further explains how we can associate an event handler to a dynamically added control using delegates. This tutorial will be helpful in developing nice, interactive reservation/booking softwares.
Introduction
In most of the Reservation/Booking applications like Railway Reservation System, Bus Booking System, Theater Ticket Booking System or the Exam Center Seat Booking system there is always a requirement where we need to show number of seats diagrammatically and user will book a particular seat by selecting it with a click. Hence the need becomes generating number of picture boxes equal to the number of seats in that particular category dynamically then changing the picture of a particular seat selected by user to booked and then making appropriate entry into the database.
Today, We will be learning how to add Picture boxes dynamically with a delegate and an event to achieve the above described functionality.Getting Started
Before starting with the tutorial let's make some definitions clear in simple terms.Event
An event is an action performed by user. E.g. Mouse Click, Double Click, Key Press etc.Delegate
A delegate is like a middle man who tells the application that a particular event has been performed and in return it has to execute a particular code.Event Handler
The code executed by the application when a particular event occurs is called as Event Handler. Event handlers can be considered as special type of functions.Dynamically Adding a Picture Box With Event Handler
Step 1
Take a new Windows C# Application, name it (DynamicPictureBox) - OK.
Step 2
Take a text box (txtNum), a button (btnOK) and a panel (pnlMain). We will enter some number in the text box and will write code on button's click event which will dynamically add picture boxes in the panel. The design of the form will look like this,
Step 3
Add two small images in the project resource as Img1 and Img2.
Step 4
Now the code on button's click. Here we will make a loop run from 0 to one less than the number given as input in the text box (in live scenarios this value will mostly come from the database) to make picture boxes.
private void btnOK_Click(object sender, EventArgs e)
{
pnlMain.Controls.Clear();
int max = Convert.ToInt32(txtNum.Text);
for (int i = 0, x = 0, y = 0; i < max; i++)
{
PictureBox pb = new PictureBox();
pb.Image = global::DynamicPictureBox.Properties.Resources.Img1;
pb.Location = new System.Drawing.Point((75 * x), y);
pb.Name = "pictureBox" + i.ToString();
pb.Size = new System.Drawing.Size(120, 120);
pb.SizeMode = System.Windows.Forms.PictureBoxSizeMode.AutoSize;
pb.TabStop = false;
pb.Click += new System.EventHandler(this.pictureBox_Click);
pnlMain.Controls.Add(pb);
x++;
if (x == 6)
{
x = 0;
y = y + 80;
}
}
}
Step 5
In the above code we have declared an event handler pictureBox_Click. This event handler is the action to be performed when the user clicks on any of the dynamically created picture box. The following code of event handler will change the img of the picture box cliced by the user to Img2.
private void pictureBox_Click(object sender, EventArgs e)
{
((PictureBox)(sender)).Image = global::DynamicPictureBox.Properties.Resources.Img2;
}
Yes! We are done with the application. Now execute the application and test it.
Enter some number in the text box and click the OK button. Then click on the dynamically generated picture boxes. This will change their image.
The demo application is also attached with this article. Kindly download it for your reference.Conclusion
Today, we learned how to add a control with event handler dynamically at runtime. The practical application of this tutorial can be easily done in various reservation-cum-booking softwares.
I hope that this article will add value to your knowledge and you like the simple and clean explanation.
(Don't forget to rate the content and leave your responses.)
Thanks 'n Regards,
Sibtain Masih