Home

Introduction to Application Design

 

Visual Control Addition

 

Introduction

To add a control to your application, you can select it from the Toolbox and click the desired area on the form. Once added, the control is positioned where your mouse landed. In the same way, you can add other controls as you judge them necessary for your application. Here is an example of a few controls added to a form:

Form1

Alternatively, to add a control, you can also double-click it from the Toolbox and it would be added to the top-left section of the form.

If you want to add a certain control many times, before selecting it on the Toolbox, press and hold Ctrl. Then click it in the Toolbox. This permanently selects the control. Every time you click the form, the control would be added. Once you have added the desired number of this control, on the Toolbox, click the Pointer button to dismiss the control.

Practical LearningPractical Learning: Using the Toolbox

  1. Start Microsoft Visual C#
  2. To create a new application, on the main menu, click File -> New Project...
  3. In the Templates list, click Windows Application
  4. Set the Name to DesignPractice1 and click OK
  5. On the main menu, click View -> Toolbox.
    Position the mouse on the Toolbox word and wait for the Toolbox to expand
  6. Click the Label button Label and position the mouse on the form
     
    Form Design
  7. Click the form
  8. Click the middle of the form to select it (the form)
  9. To add another control, position the mouse again on the Toolbox word until the Toolbox has expanded
  10. Find and double-click the TextBox button TextBox
  11. To use a hidden area of the form, position the mouse on the Toolbox word. When the Toolbox has expanded, click the Auto Hide button AutoHide
  12. On the Toolbox, click the TreeView button TreeView and click the left section of the form
  13. After using the Toolbox, to hide it, click the Auto Hide button AutoHide
  14. To execute the application, on the main menu, click Debug -> Start Without Debugging
  15. After using it, close the form and return to your programming environment

Copying a Control

We mentioned earlier 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:
     
    Copy

    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.

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.

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:

Design

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 click or 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.

Moving a Control

 

Introduction

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 it until the cursor changes into a cross:
     
    Moving a Control
    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

Locking a Control

After adding a control to a form, you can move the control to change its position, as we will learn in the next few sections. In the next lesson, we will learn how you can change the size of a control. The availability of these two operations is controlled by a Boolean property named Locked. The default value of this property is False. Therefore, to prevent the control from being moved or resized, access its Properties window and set the Locked property to True.

Control Alignment

 

Introduction

Microsoft Visual Studio 2005 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:

Control Design

Once you have a control on your form, you can add another control as we saw in the previous lesson. 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 fine, 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.

Control Centering Towards the Center of the Form

If you have a certain control on the form and want to position it exactly at equal distance between the left and the right borders of the form, select the control, then click the Center Horizontally button on the Layout toolbar Center Horizontally:

=>
 

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:

Button Name Format Menu Description
Align Lefts Align Lefts Align -> Lefts All selected controls will have their left border coincide with the left border of the base control
Align Centers Align Centers Align -> Centers The middle handles of the selected controls will coincide with the middle handles of the base control
Align Rights Align Rights Align -> Rights All selected controls will have their right border coincide with the right border of the base control
 

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:

Button Name Format Menu Description
Align Tops Align Tops Align -> Tops All selected controls will have their top border coincide with the top border of the base control but their left border would have the same distance with the left border of the parent
Align Middles Align Middles Align -> Middles The top handles of the selected controls will align vertically with the top handle of the base control
Align Bottoms Align Bottoms Align -> Bottoms All selected controls will have their bottom border coincide with the bottom border of the base control but their left border would have the same distance with the left border of the parent

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

Control Centering Towards the Middle of the Form

You can also position one or more controls in the middle of the form. To do that, select the control, then click the Center Vertically button on the Layout toolbar Center Vertically:

Control Centering =>
 

Horizontal Spacing and Alignment

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

Align

Obviously the buttons on this form are not enjoying the most professional alignment. For one thing, the distance between the Continue and the Submit buttons is longer than the distance between the Submit and the Deny 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:

Button Name Format
Make Horizontal Spacing Equal Make Horizontal Spacing Equal Horizontal Spacing -> Make Equal

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:

The left control is used as reference
Aligned Controls
Increase Horizontal Spacing
 
Button Name Format
Increase Horizontal Spacing Increase Horizontal Spacing Horizontal Spacing -> Increase

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:

The left control is used as reference
Selected Controls - Left Reference
Increase Horizontal Spacing
The middle control is used as reference
Selected Controls - Center Rerefence
The right control is used as reference
Selected Controls - Right Reference
 
Button Name Format
Decrease Horizontal Spacing Decrease Horizontal Spacing 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:

The left control is used as reference
Selected Controls - Left Reference
The middle control is used as reference
Selected Controls - Center Rerefence
The right control is used as reference
Selected Controls - Right Reference
 
Button Name Format
Remove Horizontal Spacing Remove Horizontal Spacing Horizontal Spacing -> Remove

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:

The left control is used as reference
Selected Controls - Left Reference
Remove Horizontal Spacing
 

Vertical Spacing and Alignment

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

Center

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:

Button Name Format
Make Vertical Spacing Equal Make Vertical Spacing Equal Vertical Spacing -> Make Equal

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:

The top control is used as reference
=>
 
Button Name Format
Increase Vertical Spacing Increase Vertical Spacing Vertical Spacing -> Increase

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:

The top control is used as reference
Selected Control - Top Reference => Increase Vertical Spacing
The middle control is used as reference
Selected Controls - Center Reference =>
The bottom control is used as reference
Selected Controls - Bottom Reference =>
 
Button Name Format
Decrease Vertical Spacing Vertical Spacing -> Decrease

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:

The top control is used as reference
Selected Control - Top Reference =>
The middle control is used as reference
Selected Controls - Center Reference =>
The bottom control is used as reference
Selected Controls - Bottom Reference =>
 
Button Name Format
Remove Horizontal Spacing Remove Vertical Spacing 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
Selected Control - Top Reference =>
 
 

Home Copyright 2008-2009, yevol.com