Windows Forms allows you to create desktop applications visually, by dragging user interface elements onto the drawing board. These user interface elements include tools such as buttons, panels, or checkboxes.
Each UI element receives certain events. For example, you could have a click event for buttons, a changed event for checkboxes, or a drag and drop event for panels.
Events use event handlers or functions, which are executed only when that specific event occurs.
Event types used for different UI elements
Each UI element contains a list of events. There are many courses where you can learn about important UX or UI theories and practices to help you decide which UI elements to use. Here are some examples of events used by UI elements.
Key Down, Key Up, or Key Press Events
User interface elements that allow the user to enter text, such as a text box, can use these events. These events are triggered each time the user presses a key on the keyboard.
These can be useful in scenarios where you have a search function, and you may need to constantly check the value of a text box.
private void textBox1_KeyUp(object sender, KeyEventArgs e)
{
TextBox textbox = (TextBox)sender;
string currentTextBoxValue = textbox.Text;
}
Loading event
The load event occurs when the form or widget is displayed on the screen. You can use this event when you want a specific function to occur in the form or control initialization phase.
One scenario in which this might be useful is if you want to add controls to the form programmatically while it is still loading.
private void Form1_Load(object sender, EventArgs e)
{
ToolTip toolTip1 = new ToolTip();
toolTip1.AutoPopDelay = 5000;
toolTip1.InitialDelay = 1000;
toolTip1.ReshowDelay = 500;
toolTip1.ShowAlways = true;
toolTip1.SetToolTip(this.button1, "My button1");
toolTip1.Popup += this.ToolTip1_Popup;
}
The popup tip event occurs when you hover over a widget in the app, and a tooltip appears. The arguments passed to the event handler allow you to access data about the hint, such as its text or its size.
private void ToolTip1_Popup(object sender, PopupEventArgs e)
{
ToolTip tooltip = (ToolTip)sender;
string tooltipText = tooltip.GetToolTip(button1);
var tooltipSize = e.ToolTipSize;
}
Drag and drop event
Many UI elements can use the drag and drop event, including panel, button, image box, group box, and more. This event is fired when the user drags a file into the widget.
private void panel1_DragDrop(object sender, DragEventArgs e)
{
string[] files = (string[])e.Data.GetData(DataFormats.FileDrop, false);
}
Mouse over events and let go of the mouse
The mouse over event is fired when the mouse is hovered over the widget. As soon as the mouse leaves and stops hovering over the element, the mouse leave event is triggered.
private void button1_MouseLeave(object sender, EventArgs e)
{
Button button = (Button)sender;
var buttonText = button.Text;
}
Variable event has been defined
User interface elements that allow the user to select the option to use the selected and changed event can be used. This includes radio buttons and check boxes. The function is triggered when the check box is selected or cleared.
private void checkBox1_CheckedChanged(object sender, EventArgs e)
{
CheckBox checkbox = (CheckBox)sender;
CheckState state = checkbox.CheckState;
bool isChecked = checkbox.Checked;
}
The value has been changed, the specified value has been changed, or the date of events has been changed
The value change event is available in widgets that allow you to select an option to change the value. This includes combo boxes and a date and time picker or calendar. The function is fired when the user chooses a new value.
private void monthCalendar1_DateChanged(object sender, DateRangeEventArgs e)
{
MonthCalendar calendar = (MonthCalendar)sender;
var today = calendar.TodayDate;
var selectedDatesStart = e.Start;
var selectedDatesEnd = e.End;
}
Click event button
The click event handler function is fired when the button is clicked.
private void button1_Click(object sender, EventArgs e)
{
Button button = (Button)sender;
string textValue = button.Text;
}
The structure of the event handler
Event handlers have two basic parameters: the sender and the event object.
The dispatcher is a reference to the user interface element or object that triggered the event, such as a button, checkbox, or panel. For example, in a checkbox-changed event, the sender will be the checkbox the user clicked.
The event parameter contains an object that stores data about the event that occurred. This can include the X and Y coordinates of the button click, or the location of the mouse at the moment the event starts.
private void panel1_DragDrop(object sender, DragEventArgs e)
{
Panel panel = (Panel)sender;
panel.Enabled = false;
var eventData = e.Data;
}
How to create and use event handlers
First, create a new Winforms Forms application in Visual Studio. If you are new to Windows Forms, there are many transcription applications that you can create while learning Windows Forms.
Canvas event handlers
You can create event handlers from the properties window on the right side of the panel. Once you create a new Windows Forms application, create an event handler for the checkbox widget. This will start when the user checks or clears the checkbox.
- Open the Toolbox menu to the left of Visual Studio. Drag and drop the checkbox widget onto the panel.
- Mark the checkbox on the canvas.
- In the properties window on the left panel, click on the yellow lightning icon to display the list of events. Scroll down to File changed Event.
- Click the empty space next to File changed Event. This will automatically create a new function to handle the event. The function will be created at the back of the application code, in the cs file.
private void checkBox1_CheckedChanged(object sender, EventArgs e)
{
}
Event handlers that use the code behind
Create a new function in the code behind it and link it to the widget on the panel.
- On the canvas, click and drag the button widget. By default, the name of the new button will be “button1”.
- Open
.cs. If you leave the default Windows Form application name “Form1”, this will be Form1.cs. - Inside the Form1 class, create a new function. Make sure that it follows the structure of the event handler, and contains two parameters for the sender and the event object.
private void button1_MouseHoverEvent(object sender, EventArgs e)
{
} - Bind the event handler to the mouseover event of button1. You can do this in the constructor.
public Form1()
{
InitializeComponent();
this.button1.MouseHover += button1_MouseHoverEvent;
} - Alternatively, you can also associate the function with the event using the properties window on the panel. Open the properties window, and enter the name of the event handler in the MouseHover field. This will be button1_MouseHoverEvent.
How to use the same event handler across multiple events
You can associate the same function with multiple events. In this case, if there is one function called MouseEvent, you can add an event handler to both the mouse and mouse click event. This will handle both events using the same function.
this.button1.MouseHover += button1_MouseEvent;
this.button1.MouseClick += button1_MouseEvent;
Using events in a Windows Form application
The Windows Forms application allows you to drag and drop various user interface elements such as buttons, panels, or text boxes onto the canvas. You can add event handlers to these UI elements, based on the different events that can occur within the application.
If you are creating a Windows application, you may also want to add images or graphics as part of your user interface. You can use different C# classes like the Draw, Pen or Color class, which will allow you to draw different types of shapes on the canvas.