Visual Studio Adding Controls to Windows Form

Visual Studio Adding Controls

In this tutorial let's discuss about Adding Controls to a Windows Form, Adding Controls using Windows Forms Designer, Adding Controls Dynamically and Setting properties of Controls. Sample source codes used in this tutorial are included.

Forms are containers for control objects. All controls have properties, methods and events that can be used to customize their functionality. Controls can be manipulated in the designer mode and code can be added to dynamically add controls at run time.

Adding Controls to a Windows Form

Controls are basically groups of classes that help the Visual Basic developer create interfaces for his applications. All controls are members of an object collection called System.Windows.Forms.Control.ControlCollection . These control objects are assigned to the property System.Windows.forms.Control.Controls. These controls can be manipulated by using methods available in the class named System.Windows.Forms.Control.ControlCollection.

Controls are of two kinds in Visual Basic.NET

1. Controls defined in the .NET Framework

2. Derived Controls.

ButtonBase, ListControl, ScrollableControl, Menu,TextBoxBase, ScrollBar are some of the controls defined in the .NET Framework. Contorls like Button, TextBox are some of the derived controls.

Adding Controls using Windows Forms Designer

The Visual Studio IDE displays the forms that are designed in Visual Basic.NET. The programmer can modify all the editable properties exposed by the Form class. Controls can then be dragged from the toolbar and dropped and arranged on the form. The form itself can be physically resized using the mouse. The form is generally displayed at the center of the window of the IDE, while the properties window is displayed to the right and the tool box on the left of the form. Please see the screenshot below.

To add controls you have to just drag and drop them in the window form. To visually arrange just drag the controls, the Visual studio provides guide lines. The guideline is shown as the blue vertical line in the following screenshot:

Controls can also be resized and aligned as a group by selecting them altogether. This helps the designer align and resize the controls uniformly. In instances where controls are stacked one over another, the designer can push the controls into position by using the options available in the format menu. The space between the controls can also be set using these options.

Adding Controls Dynamically

As stated above, controls can be added at runtime dynamically. The form’s Control Collections methods are used to perform these operations. ADD method adds a control while REMOVE removes the control.

A sample of the code used to add or remove a control is given below for your understanding. The example below adds label controls to the form. If radio button 1 is checked and Add control button is clicked then label 1 is added else label 2 is added. If the labels are displayed, then the REMOVE method is used to remove the controls depending on whether radio button 1 or 2 is checked.

Click here for Sample Code

The screen shots for this example are given below. Add this code to your form and create the radio buttons and the buttons1, 3 and 3 with the captions as ADD Control, Remove Control and Exit and see what happens.

Setting properties of Controls

All controls have default property values or no values assigned to them. However designers would like to customize controls to tailor them to their specific needs. In this section we shall see how a control’s property value can be altered or user defined at design time or reset dynamically at runtime.

Property values can be set at design time by editing their value directly in the property dialog box. The property value displayed in the property window may be inherited from a base class or may be declared in the instant class.

However, design time settings do not give the designer granular control over the object. Runtime settings of property values enable the designer to manipulate the objects more dynamically and effectively. Moreover, in instances where it is not possible to judge which property is to be edited or what value is to be given at design time, it is better to use the runtime resetting to manipulate the object. To understand this better, let us work on at a small sample application:

1. Open a new project and add a form Form11.
2. From the tool box drag and drop a OpenFileDialog and a PictureBox
3. Drag two button controls and one label control also

In the respective property sheet change the do the property editing as given below

1. OpenFileDialog
   1. Change the name to fd1
   2. Set the initialDirectory to a directory where you have
   3. Stored pictures (Optional)
2. PictureBox Change the name to pb1
3. Command Button Change the text to “Add Picture”
4. Command Button 2 Change the text to “Exit”
5. Label1 Change the text to “Choose a picture to display”
6. and optionally change the font style and color

Your form will look like the screenshot given below:

Now double click on the button “Add Picture” to add following codes to the click event to the button

Click here for Sample Code

You can also add codes to filter the files and choose some default extensions. Now you are ready to test the application. Press F5 to execute the program. You will see the dialog box as shown below:

Choose any of the picture file that you want and click open. The image will be added to the Windows form. The text in the label will change color and content. See the screenshot below.