PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview
  • How to proceed?
  • Aligning several controls in a window, in a page or in a report
  • The different options in details
  • Position
  • Inside/Outside
  • Size
  • Centering and distribution
  • Custom alignment in a window or in a page
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview
To optimize the alignment of controls in a window, page or report, you have the ability to use the alignment options. These options are used to align several controls found in the window or in the report.
To align the controls, you can:
  • select "Control .. Alignment".
  • use the alignment toolbar.
You have the ability to align the controls via the "Alignment" pane of the editor ribbon.
The options are grouped according to several themes:
  • Position:
  • Inside and outside alignment:
  • Size:
  • Centering and distribution:
  • Other:
How to proceed?

Aligning several controls in a window, in a page or in a report

To align several controls in a window, in a page or in a report:
  1. Select the controls to align.
  2. Perform:
    • A preset alignment (via "Control .. Alignment..." or in the toolbar for control alignment).A preset alignment: on the "Alignment" pane, select the alignment characteristics in the "Position", "Inside and outside", "Size" and "Centering and distribution" groups.
    • A custom alignment ("Control .. Alignment .. Custom alignment"). The custom alignment allows you to use specific alignment properties. This mode is available for the controls found in a window or in a page.A custom alignment: on the "Alignment" pane, in the "Other alignments" group, click "Custom alignment". The custom alignment allows you to use specific alignment properties. This mode is available for the controls found in a window or in a page.
Versions 17 and later
Note: Viewing the alignment before application
If several controls are selected, hovering an alignment icon is used to view in real time the result of a click performed on the icon. This allows you to see the effect of different available options.
A click on the icon applies the selected alignment.
The window, the page or the report remains in its initial status when the hovering is over.
New in version 17
Note: Viewing the alignment before application
If several controls are selected, hovering an alignment icon is used to view in real time the result of a click performed on the icon. This allows you to see the effect of different available options.
A click on the icon applies the selected alignment.
The window, the page or the report remains in its initial status when the hovering is over.
Note: Viewing the alignment before application
If several controls are selected, hovering an alignment icon is used to view in real time the result of a click performed on the icon. This allows you to see the effect of different available options.
A click on the icon applies the selected alignment.
The window, the page or the report remains in its initial status when the hovering is over.
The different options in details

Position

The options found in the "Position" group are used to manage the positions of controls in relation to the other ones.
Versions 18 and later
The option Swap the positions is used to swap the position of 2 controls or to cyclically swap the position of 3 controls (or more).
  • Example 1: Swapping two controls: All you have to do is select 2 controls: their positions are swapped.
  • Example 2: Cyclical swap of position: To position the "SMTP server" control after the "Email address" control, all you have to do is select the "SMTP server" control first then "Password" and "Confirm password".
New in version 18
The option Swap the positions is used to swap the position of 2 controls or to cyclically swap the position of 3 controls (or more).
  • Example 1: Swapping two controls: All you have to do is select 2 controls: their positions are swapped.
  • Example 2: Cyclical swap of position: To position the "SMTP server" control after the "Email address" control, all you have to do is select the "SMTP server" control first then "Password" and "Confirm password".
The option Swap the positions is used to swap the position of 2 controls or to cyclically swap the position of 3 controls (or more).
  • Example 1: Swapping two controls: All you have to do is select 2 controls: their positions are swapped.
  • Example 2: Cyclical swap of position: To position the "SMTP server" control after the "Email address" control, all you have to do is select the "SMTP server" control first then "Password" and "Confirm password".
The alignment options of positions are used to align several controls (the control used as reference for the alignment being the first selected control). You can:
  • align the controls according to the left or right outside border.
  • align the controls according to the top or bottom border.
  • align the centers of controls horizontally or vertically.
Versions 20 and later
Positioning options in relation to the window are used to quickly position a control or a group of controls. You can:
  • Position the controls as much as possible on the left then at the top: The controls are moved as much as possible to the left (in relation to the existing controls) then they are moved as much as possible to the top (in relation to the existing controls).
  • Position the controls as much as possible on the left: The controls are moved as much as possible to the left (in relation to the existing controls).
  • Position the controls as much as possible at the top: The controls are moved as much as possible to the top (in relation to the existing controls).
Similarly, you have the ability to:
  • Position the controls as much as possible at the bottom.
  • Position the controls as much as possible on the right.
  • Position the controls as much as possible on the right then at the bottom.
Notes:
  • During the positioning, the anchors are taken into account.
  • If the control is found in a Parent control (supercontrol for example), the positioning is performed in relation to the parent.
New in version 20
Positioning options in relation to the window are used to quickly position a control or a group of controls. You can:
  • Position the controls as much as possible on the left then at the top: The controls are moved as much as possible to the left (in relation to the existing controls) then they are moved as much as possible to the top (in relation to the existing controls).
  • Position the controls as much as possible on the left: The controls are moved as much as possible to the left (in relation to the existing controls).
  • Position the controls as much as possible at the top: The controls are moved as much as possible to the top (in relation to the existing controls).
Similarly, you have the ability to:
  • Position the controls as much as possible at the bottom.
  • Position the controls as much as possible on the right.
  • Position the controls as much as possible on the right then at the bottom.
Notes:
  • During the positioning, the anchors are taken into account.
  • If the control is found in a Parent control (supercontrol for example), the positioning is performed in relation to the parent.
Positioning options in relation to the window are used to quickly position a control or a group of controls. You can:
  • Position the controls as much as possible on the left then at the top: The controls are moved as much as possible to the left (in relation to the existing controls) then they are moved as much as possible to the top (in relation to the existing controls).
  • Position the controls as much as possible on the left: The controls are moved as much as possible to the left (in relation to the existing controls).
  • Position the controls as much as possible at the top: The controls are moved as much as possible to the top (in relation to the existing controls).
Similarly, you have the ability to:
  • Position the controls as much as possible at the bottom.
  • Position the controls as much as possible on the right.
  • Position the controls as much as possible on the right then at the bottom.
Notes:
  • During the positioning, the anchors are taken into account.
  • If the control is found in a Parent control (supercontrol for example), the positioning is performed in relation to the parent.

Inside/Outside

The options found in the "Inside and outside" group are used to manage the inside and outside borders of controls. These options are very useful to perform an alignment of controls with captions: edit controls, combo boxes, ...

Size

The options found in the "Size" group are used to:
  • standardize the size of controls (the reference size is the one of the first selected control): same width, same height.
  • Versions 20 and later
    extend the controls in the window according to the existing controls. The options "Extend in width", "Extend in height" and "Extend in width and height" calculate the maximum size that can be occupied by the control in the interface in relation to the other controls. The resize operation is immediately performed.
    For example, a Map control positioned in a window can occupy the entire available space while taking into account the controls already found in the window.
    Notes:
    • the anchors are taken into account.
    • the size of the parent control is taken into account.
    New in version 20
    extend the controls in the window according to the existing controls. The options "Extend in width", "Extend in height" and "Extend in width and height" calculate the maximum size that can be occupied by the control in the interface in relation to the other controls. The resize operation is immediately performed.
    For example, a Map control positioned in a window can occupy the entire available space while taking into account the controls already found in the window.
    Notes:
    • the anchors are taken into account.
    • the size of the parent control is taken into account.
    extend the controls in the window according to the existing controls. The options "Extend in width", "Extend in height" and "Extend in width and height" calculate the maximum size that can be occupied by the control in the interface in relation to the other controls. The resize operation is immediately performed.
    For example, a Map control positioned in a window can occupy the entire available space while taking into account the controls already found in the window.
    Notes:
    • the anchors are taken into account.
    • the size of the parent control is taken into account.

Centering and distribution

The options found in the "Centering and distribution" group are used to:
  • center the selected element in the parent (horizontally and vertically).
  • define the vertical and horizontal spacing between controls.

Custom alignment in a window or in a page

When using the custom alignment, you have the ability to define:
  • The horizontal or vertical alignment: the controls can be aligned to the left or to the right according to the beginning of the control or according to the beginning of the input area.
    Versions 15 and later
    They can also be aligned by the center.
    New in version 15
    They can also be aligned by the center.
    They can also be aligned by the center.
  • The regular spacing: the spacing between controls is adapted in order to be the same between each control (horizontally or vertically).
  • The size: the size of selected controls is automatically adapted in order for the controls to have the same height and/or the same width.
  • The reference control: for the alignment and the size of controls, the reference control can be:
    • the first selected control (the one with the white handles)
    • the last selected control
    • the largest selected control
    • the control found in the most top left position of selected controls
Minimum required version
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment