Control Selection

Introduction

When designing an application, you will manipulate the windows controls on a form. After adding a control to a form, before performing any operation on that control, you must first select it. You can also manipulate many controls at the same time. To do that, you will have to select all those controls.

Practical Learning: Introducing Graphical Applications

1. Start Microsoft Visual Studio 2022
2. In the Visual Studio 2022 dialog box, click Create a New Project
3. In the Create a New Project wizard page, in the languages combo box, select C#
4. In the list of the projects templates, click Windows Forms App
5. Click Next
6. In the Configure Your New Project dialog box, change the project Name to Exercise2
   Accept or change the project Location
7. Click Next
8. In the Framework combo box, select the highest version: .NET 7.0 (Standard Term Support)
9. Click Create
10. To execute, on the main menu, click Debug -> Start Without Debugging:

    

11. Close the form and return to your programming environment

Author Note If you want, using the form of the application you created, you can apply the descriptions in the following sections to experiment with, and get, the same results.

Single Control Selection

To select one control on the form, you can simply click it. A control that is selected indicates this by displaying 8 small squares, also called handles, around it. Between these handles, the control is surrounded by dotted rectangles. In the following picture, the selected rectangle displays 8 small squares around its shape:

After selecting a control, you can manipulate it or change its characteristics, also called properties.

Multiple Control Selection

To select more than one control on the form, click the first. Press and hold either Shift or Ctrl. Then click each of the desired controls on the form. If you click a control that should not be selected, click it again. After selecting the group of controls, release either Shift or Ctrl that you were holding.

When a group of controls is selected, the last selected control displays 8 square handles around but its handles are white while the others are black. Another technique you can use to select various controls consists of clicking on an unoccupied area on the form, holding the mouse down, drawing a fake rectangle, and releasing the mouse:

Every control touched by the fake rectangle or included in it would be selected:

Control Deletion

If there is a control on your form but you don't need it, you can remove it from the application. To delete a control, first select it and then press Delete. You can also right-click a control and click Cut. To remove a group of controls, first select them, then click or press Delete or right-click the selection and click Cut.

Copying a Control

We mentioned how you could add a control many times. An alternative is to copy a control. To do this, on the form:

• Right-click the control and click Copy. Right-click another area of the form and click Paste
• Click (once) the control you want to copy

  

  Press and hold Ctrl. Then drag the selected control to another area of the form. The mouse cursor would display a + plus indicating that the control is being duplicated:

  

  Once you get to another area of the form, release the mouse and Ctrl

You can use these two techniques to copy a group of controls.

Introduction to Application Design

Introduction to Moving a Control

When adding a control to a form, it assumes a position based on where the mouse landed when you clicked the form. Most of the time, that position will not be convenient. Moving a control consists of specifying its position by changing its previous left and top values. You can do this either graphically or programmatically.

To move a control graphically:

• Position the mouse on the control until the cursor changes into a cross:
  

  

  Then click and drag left, right, up or down, until you get to the desired location
• Click the control (once) to select it. Using your keyboard, press either the left, the up, the right, or the down arrow keys to move the control until you get the desired position

Moving Various Controls

You can also move various controls at the same time. To do this, first select the controls:

• Position the mouse on one of the selected controls:

  

  Then click and drag left, right, up, down, or diagonally, until you get the desired position
• Press the left, the up, the right, or the down arrow keys to move the control until you get the desired position

Control Alignment

Introduction

Microsoft Visual Studio provides various tools to assist you with aligning your controls on a form. You can first add a control to a form and position the control the way you want. Here is an example:

Once you have a control on your form, you can add another control. To position the other control, you can use the previous one as a reference. To assist you with this, when moving the new control to position it, a guiding vertical line would show you the alignment to follow with regards to an existing control. Here is an example:

Using this approach, once the control is aligned well, you can release the mouse. As another technique, after positioning one or a few controls, to align a control with reference to another, press and hold Ctrl. Then press the left, the up, the right, or the down arrow key. When you press one of these keys, the control would move to align itself with the next control in that direction. Once the alignment is to your liking, release Ctrl.

There are various other techniques you can use to align the controls. We will review them.

Horizontal Alignment

Horizontal alignment affects controls whose distance from the left border of the parent must be the same. To perform this type of alignment, the Layout toolbar provides the necessary buttons. The same actions can be performed using menu items of the Format group on the main menu. The options are as follows:

Vertical Alignment

As seen above, the horizontal-oriented buttons allow moving controls left or right. Another option you have consists of moving controls up or down for better alignment. Once again you must first select the controls. Then on the Layout toolbar or the Format group of the main menu, use the following options:

Another valuable option you have consists of controlling the alignment of objects with regards to the extreme borders of controls of the selected group.

Horizontal Spacing and Alignment

Suppose you have a group of horizontally aligned controls as follows:

On this form, the distance between the button1 and the button2 buttons is longer than the distance between the button2 and the button3 buttons. The Layout toolbar and the Format group of the main menu allow you to specify a better horizontal alignment of controls with regards to each other. The options available are:

Result: The Forms Designer will calculate the horizontal distances that separate each combination of two controls and find their average. This average is applied to the horizontal distance of each combination of two controls:

Result: The Forms Designer will move each control horizontally, except the base control (the control that has white squares) by one unit away from the base control. This will be done every time you click the Increase Horizontal Spacing button or the Format -> Horizontal Spacing -> Increase menu item:

Format

Horizontal Spacing -> Decrease

Result: The Forms Designer will move each control horizontally, except the base control (the control that has darker handles) by one unit towards the base control. This will be done every time you click the Decrease Horizontal Spacing button or the Format -> Horizontal Spacing -> Decrease menu item:

 

Result: The Forms Designer will move all controls (horizontally), except for the left control, to the left so that the left border of a control touches the right border of the next control:

Vertical Spacing and Alignment

Suppose you have a group of horizontally positioned controls as follows:

The buttons on this form are not professionally aligned with regards to each other. Once again, the Layout toolbar and the Format group of the main menu allow you to specify a better vertical alignment of controls relative to each other. The options available are:

Result: The Forms Designer will calculate the total vertical distances that separate each combination of two controls and find their average. This average is applied to the vertical distance of each combination of two controls:

Result: The Forms Designer will move each control vertically, except the base control (the control that has darker handles) by one unit away from the base control. This will be done every time you click the Increase Horizontal Spacing button or the Format -> Horizontal Spacing -> Increase menu item:

Result: The Forms Designer will move each control, except the base control (the control that has darker handles) by one unit towards the base control. This will be done every time you click the Decrease Horizontal Spacing button or the Format -> Horizontal Spacing -> Decrease menu item:

Format

Vertical Spacing -> Remove

Result: The Forms Designer will move all controls vertically, except for the top control, to the top so that the top border of a control touches the bottom border of the next control towards the top:

The top control is used as reference
	=>

Techniques of Visually Resizing a Control

Introduction

All graphical controls, including the form, can be resized using guiding mouse cursors or the keyboard. To resize a control, first select it. Except for the form, whenever a control is selected, there are eight handles around it. To resize the control, position your mouse on one of the handles. The mouse pointer will change, indicating in what direction you can move to resize the control.

Cursor	Role
	Moves the seized border in the North-West <-> South-East direction
	Shrinks or heightens the control
	Moves the seized border in the North-East <-> South-West direction
	Narrows or enlarges the control

Before resizing a control, as mentioned already, first select it. To enlarge a control:

• Position the mouse on the right (or the left) handle. Then click and drag in right (or left) direction. Once you get the desired width, release the mouse
• Press and hold Shift. Then press the right arrow key as many times as you want. Once you get the desired width, release Shift

To narrow a control:

• Position the mouse on its right (or its left) handle. Then click and drag in the left (or the right) direction. Once you get the desired width, release the mouse
• Press and hold Shift. Then press the left arrow key as many times as you want. Once you get the desired width, release Shift

To heighten a control:

• Position the mouse on its top (or its bottom) handle. Then click and drag in the top (or the bottom) direction. Once you get the desired width, release the mouse
• Press and hold Shift. Then press the up arrow key as many times as you want. Once you get the desired width, release Shift

To shrink a control:

• Position the mouse on its top (or its bottom) handle. Then click and drag in the bottom (or the top) direction. Once you get the desired width, release the mouse
• Press and hold Shift. Then press the down arrow key as many times as you want. Once you get the desired width, release Shift

The Width and Height of a Control

Imagine you have added three controls to your form and, after spending some time designing them, they appear as follows:

The dimensions of the controls are not set professionally. As seen above, you can resize by dragging their borders but this might take a while if you want them to have the same width, the same height, or both the same height and width. The dimensions of a control or a group of controls are carried by a Size value.

At design time, to change the dimensions of a control, first click it. Then, in the Properties window, change the values of its Size property.

To change the dimensions of a group of controls, first select them. Then, in the Properties window, change the values of the Size field. The new value would be applied to all selected controls. Alternatively, the Form Designer provides tools to automatically do this for you.

To synchronize the widths of a group of controls, first select them. Then, on the Layout toolbar or on the Format group of the main menu, select:

Result: All controls, except for the base control (the control that has the dark handles), will be resized horizontally so they have the same width as the base control:

To set the same height to a group of controls, first select them. Then, on the Layout toolbar or on the Format group of the main menu, select:

Result: All controls, except for the base control (the control that has the dark handles), will be resized vertically so they have the same height as the base control:

The top control is used as reference
	=>
The middle control is used as reference
	=>
The bottom control is used as reference
	=>

To set the same width and the same height to a group of controls, first select them. Then, on the Layout toolbar or on the Format group of the main menu, select:

Practical Learning: Ending the Lesson

• Close your programming environment

Previous	Copyright © 2001-2023, C# Key	Thursday 09 June 2022	Next