How are Windows Forms Controls Created and Rendered Onto a Form?

In order to answer this question, I will use a project that I created in a previous demo. This demo is available here https://win-forms.com/2020/08/16/shapes-objects-and-lists-with-windows-forms/. You may clone the repository or download the code from here https://github.com/dwarwick/Shapes.

This post will cover how Windows Forms, or winforms for short, handles drawing controls on the forms. Examples of controls are text boxes, labels, list boxes, combo boxes, etc.

When you create a winforms project, a single windows form is created. The name of the form is Form1 by default, but you can, and should, rename it. You can also add as many additional forms to your project as you need.

Form Files

Each form consists of 3 files by default. For the purposes of this discussion, we will assume the name of the form is MainForm.

MainForm.cs is a file that normally contains all of the logic code behind the form. This file contains code that interacts with the controls on the form and the algorithms that make the program do what it is supposed to do.

MainForm.Designer.cs is a file that actually creates the controls, sets the initial property values of the controls, and renders the controls onto the form. This is what we will be diving into for this post.

MainForm.resx contains resources that are used by the form. We will not be discussing this today.

Identifying the 3 Files that Are a Form

We can browse to our solution folder to view these files on our hard drive as well. With MainForm.cs selected, you can view the path to the file in the properties window.

Finding File Location Using Properties Window

Lets open our File Explorer and navigate to the folder to view the form files.

File Explorer View of Project Files

In the File Explorer view, you can see 3 distinct files named MainForm.cs, MainForm.Designer.cs, and MainForm.resx. Close the File Explorer window and go back to Visual Studio.

Design View of Form

In the Solution Explorer, double click MainForm.cs. You will see the form open in Design View.

Form Open in Design View

This form was created by dragging and dropping each control onto the form and setting properties on each control using the properties window. See the Shapes Demo for more details on this.

Designer File Code

Open the MainForm.Designer.cs file to view the code that is used to create all of these controls and set the property values for each control.

Designer File Control Variables

In the image above, you can see that there are several variables that are declared. Each variable is named for one of the controls that are being used on our form. There are variables of type TextBox, Button, and Label. Each variable has of course been declared and given a Name such as txtBox_X. Each time a new control is dragged onto the form, Visual Studio creates a new variable in the designer file for you.

Now expand the plus sign next to the words Windows Form Designer generated code if you have not already expanded it.

You may see other plus signs that need to be expanded to view the full code in this file.

Plus Sign

The code in the image above simply declares a variable that represents a control. It does not actually create the control or define any properties.

InitializeComponent Method

Notice that there is a method named InitalizeComponent. This method is responsible for initializing all new controls and setting the properties on those controls.

As I stated before, when you drop a control on the form, a new variable is created for the control. At the same time, Visual Studio adds a new line of code to create a new instance of the control and sets some default property values for the control such as Name and TabIndex. And depending on where you drop the control and what size you make it, it sets the Location and Size properties as well.

Scroll down to the bottom of the InitializeComponent method.

Form Properties

Here you can see that our textboxes, labels, and button are actually added to the Controls Collection of the form. The controls are not actually associated with the form until they are part of the form Controls Collection. Next the Layout is performed and the form will be loaded with the controls positioned according to their assigned properties. This is the end of the InitializeComponent method.

The InitializeComponent method is called from the constructor of the MainForm class. Right click MainForm.cs and select View Code.

Initialize Component Method Called from Form Constructor

When we start debugging a form, the constructor runs before any other code in the MainForm class. The constructor runs the InitializeComponent method to load and position the controls onto the form.

Any changes that are made to a control on the form in design view are automatically updated in the designer file. If you change the color of a text box, or resize it, or set it to disabled, or make any other changes to it, those properties are updated automatically in the designer file.

Events

Events are also associated with their methods in the designer file. Have a look at the button properties in the designer file.

Button Click Event in Designer File

Here you can see that btnDraw Click event is associated with a method named btnDraw_Click. This line is added when you either double click a button in the form design view, or double click the click row for the button in the property window, or when you use the property window to browse to a button event method that has already been created in MainForm.cs.

If you enjoyed this post, please Like it so that you will be notified of new posts as I create them. I also have several other posts about Windows Forms available on my blog home page at https://win-forms.com.

If you have questions, comments, or suggestions, please leave a comment below.

Powered by WordPress.com.

Up ↑

%d bloggers like this: