Home

Application Design
 

Resizing the Controls
 
 

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:

Button Name Format
Make Same Width Make Same Width Make Same Size -> Width

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:

The top control is used as reference
A form with some controls selected using a fake rectangle => A form where a group of controls has been configured to have the same width with controls selected using a fake rectangle
The middle control is used as reference
=> A form where a group of controls has been configured to have the same width with controls selected at random
The bottom control is used as reference
A form with controls selected at random

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:

Button Name Format
Make Same Height Make Same Height Make Same Size -> Height

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
A form with some controls selected using a fake rectangle =>
The middle control is used as reference
A form with controls selected at random =>
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:

Button Name Format
Make Same Size Make Same Size Make Same Size -> Both

Result: The Form Designer will calculate the sum of the heights of all controls and find their average height (AvgHeight). It will also calculate the sum of the widths of all controls and find their average width (AvgWidth). These averages will be applied to the height and the width respectively of each control:

=>
=>
=>
 

Practical LearningPractical Learning: Setting the Locations and Sizes of Controls
  1. To create a new application, on the main menu, click File -> New -> Project...
  2. In the Templates list, click Windows Application
  3. In the Name box, replace the content with Rectangle2 and press Enter
  4. From the Toolbox and from what we learned in the previous lesson, add four labels, four text boxes, and two buttons to the form
  5. Based on what we have reviewed so far, design the form as follows:
     
    The Calculate Form
  6. To test the application, on the Standard toolbar, click the Start Without Debugging button Start Without Debugging
     
    The Calculate Application
  7. While the form is displaying, drag its right border to widen it. Also drag its bottom border to heighten it
     
    The form resized by the user
  8. Close the form and return to your programming environment
  9. Save all
 
Previous Copyright © 2008 FunctionX, Inc. Home