PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
  • Overview
  • How to?
  • Anchoring a control in a window
  • Anchoring a control in a tab
  • Anchoring a selection of controls
  • Anchoring to content
  • Configuring anchors through programming
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview
The windows of a WINDEV application can be resized at runtime. In a mobile application (Android or iOS), windows can be displayed on devices with different screen sizes (phones, tablets, etc.). With the anchoring mechanism, controls are automatically resized and positioned when the window is resized.
You can set the anchors of a control using two parameters:
  • The control anchoring: this parameter defines the modification that must be applied to the control when the window is resized. The control can move to the left and/or to the bottom, it can be enlarged in width and/or in height.
  • The anchor rate: this parameter sets the percentage by which the control is moved or stretched. This parameter allows you to:
    • keep a control centered in width in the window regardless of its size,
    • proportionally enlarge some controls.
These settings can be defined:
  • In the window editor.
  • Through programming with the WLanguage properties.
How to?

Anchoring a control in a window

To anchor a control in a window:
  1. Select the controls you want to anchor.
  2. Define the anchoring of controls:
    • in the "UI" tab of the control description window ("Description" in the context menu),
    • via the "Anchor" option in the context menu of the control.
  3. In the window that appears, select the type of anchors to be applied. The most common options are represented by different icons:
    No anchorsThe control does not change when the window is resized. No anchoring option is selected.
    WidthThe control stretches to the right when the window is enlarged. Set the "width" anchor rate to define how much a control stretches relative to the window.
    RightThe control moves to the right when the window is enlarged. Set the "right" anchor rate to define how much the control moves.
    Horizontally centeredThe control remains centered horizontally regardless of the width of the window.
    HeightThe control stretches downward when the window is vertically enlarged. To change the speed at which a control stretches in relation to the window, use the anchor rate in height
    Width and HeightThe control stretches to the right and downward when the window is enlarged. Set the "width" and "height" anchor rates to define how much a control stretches relative to the window.
    Height and RightThe control stretches downward and moves to the right when the window is enlarged.
    Set the "right" anchor rate to define how much the control moves.
    Set the "height" anchor rate to define how much a control stretches relative to the window.
    Vertical DistributionThis option is available only when multiple controls are selected. The selected controls stretch downward and are distributed proportionally when the window is enlarged vertically.
    BottomThe control moves down when the window is enlarged downward. Set the "bottom" anchor rate to define how much the control moves.
    Width and BottomThe control stretches to the right and moves downward when the window is enlarged.
    Set the "bottom" anchor rate to define how much the control moves.
    Set the "width" anchor rate to define how much a control stretches relative to the window.
    Right and BottomThe control moves to the right and down when the window is enlarged. Set the "bottom" and "right" anchor rates to define how much the control moves.
    Horizontally centered at bottomThe control remains centered horizontally regardless of the width of the window. However, the control is anchored to right and it moves to right when the window is enlarged.
    Set the "bottom" anchor rate to define how much the control moves.
    Vertically centeredThe control remains centered vertically regardless of the height of the window.
    Horizontal DistributionThis option is available only when multiple controls are selected. The selected controls stretch to the right and are distributed horizontally when the window is enlarged.
    Vertically centered to rightThe control remains centered vertically regardless of the height of the window. However, the control is anchored to right and it moves to right when the window is enlarged.
    Set the "right" anchor rate to define how much the control moves.
    CenteredThe control remains centered vertically and horizontally regardless of the size of the window.
  4. Define (if necessary) the different anchor rates.
  5. Validate.
To display the anchoring markers in the control (red arrows) go to the "Display" tab, "Show (all controls)" group and check "Anchors".

Anchoring a control in a tab

A control displayed in a tab is anchored in relation to the tab and not to the window.

Anchoring a selection of controls

To anchor a selection of controls, select "Anchor" in the context menu (right mouse click) of selection.
Versions 23 and later

Anchoring to content

An additional anchor is available for some types of controls: the anchor to content.
The anchor to content, available in height or in width, is used to adapt the control size according to its content. Therefore, a multiline edit control adapted to content in height will be enlarged in height if the control content changes and contains more lines. This type of anchor is very useful for the controls found in a Layout control.
The anchor to content is available for the following controls: Static control, Edit control, Looper, Check Box or Radio Button.
To anchor a control to content:
  1. Select the controls you want to anchor: Static control, Edit control, Looper, Table, Check Box or Radio Button.
  2. Define the anchoring of controls:
    • in the "UI" tab of the control description window ("Description" in the context menu),
    • via "Anchor" in the control popup menu.
  3. In the anchoring window, select the type of anchor to content:
  4. If the anchor to content is defined in height:
    • The controls will be enlarged in height according to their content.
    • You must specify the anchor of the control in width:
      • None. In this case, the control stretches to the bottom according to its content.
      • The control stretches to the right. In this case, the control stretches to the bottom according to its content and to the right.
      • Right: In this case, the control stretches to the bottom according to its content and it moves to the right.
  5. If the anchor to content is defined in width:
    • The controls will be enlarged in width according to their content.
    • You must specify the anchor of the control in height:
      • None. In this case, the control stretches to the right according to its content.
      • The control stretches to the bottom. In this case, the control stretches to the right according to its content and to the bottom.
      • Bottom: In this case, the control stretches to the right according to its content and it moves to the bottom.
  6. Validate.
New in version 23

Anchoring to content

An additional anchor is available for some types of controls: the anchor to content.
The anchor to content, available in height or in width, is used to adapt the control size according to its content. Therefore, a multiline edit control adapted to content in height will be enlarged in height if the control content changes and contains more lines. This type of anchor is very useful for the controls found in a Layout control.
The anchor to content is available for the following controls: Static control, Edit control, Looper, Check Box or Radio Button.
To anchor a control to content:
  1. Select the controls you want to anchor: Static control, Edit control, Looper, Table, Check Box or Radio Button.
  2. Define the anchoring of controls:
    • in the "UI" tab of the control description window ("Description" in the context menu),
    • via "Anchor" in the control popup menu.
  3. In the anchoring window, select the type of anchor to content:
  4. If the anchor to content is defined in height:
    • The controls will be enlarged in height according to their content.
    • You must specify the anchor of the control in width:
      • None. In this case, the control stretches to the bottom according to its content.
      • The control stretches to the right. In this case, the control stretches to the bottom according to its content and to the right.
      • Right: In this case, the control stretches to the bottom according to its content and it moves to the right.
  5. If the anchor to content is defined in width:
    • The controls will be enlarged in width according to their content.
    • You must specify the anchor of the control in height:
      • None. In this case, the control stretches to the right according to its content.
      • The control stretches to the bottom. In this case, the control stretches to the right according to its content and to the bottom.
      • Bottom: In this case, the control stretches to the right according to its content and it moves to the bottom.
  6. Validate.

Anchoring to content

An additional anchor is available for some types of controls: the anchor to content.
The anchor to content, available in height or in width, is used to adapt the control size according to its content. Therefore, a multiline edit control adapted to content in height will be enlarged in height if the control content changes and contains more lines. This type of anchor is very useful for the controls found in a Layout control.
The anchor to content is available for the following controls: Static control, Edit control, Looper, Check Box or Radio Button.
To anchor a control to content:
  1. Select the controls you want to anchor: Static control, Edit control, Looper, Table, Check Box or Radio Button.
  2. Define the anchoring of controls:
    • in the "UI" tab of the control description window ("Description" in the context menu),
    • via "Anchor" in the control popup menu.
  3. In the anchoring window, select the type of anchor to content:
  4. If the anchor to content is defined in height:
    • The controls will be enlarged in height according to their content.
    • You must specify the anchor of the control in width:
      • None. In this case, the control stretches to the bottom according to its content.
      • The control stretches to the right. In this case, the control stretches to the bottom according to its content and to the right.
      • Right: In this case, the control stretches to the bottom according to its content and it moves to the right.
  5. If the anchor to content is defined in width:
    • The controls will be enlarged in width according to their content.
    • You must specify the anchor of the control in height:
      • None. In this case, the control stretches to the right according to its content.
      • The control stretches to the bottom. In this case, the control stretches to the right according to its content and to the bottom.
      • Bottom: In this case, the control stretches to the right according to its content and it moves to the bottom.
  6. Validate.
Configuring anchors through programming
The anchors of the controls can be set programmatically using different WLanguage properties:
Versions 09 and later
Anchor
New in version 09
Anchor
Anchor
The Anchor property is used to set the anchors of a control in a window, page or report.
Versions 23 and later
AnchorToContent
New in version 23
AnchorToContent
AnchorToContent
The AnchorToContent property is used to determine and change how the control adapts to its content.
Versions 09 and later
AnchorRateBottom
New in version 09
AnchorRateBottom
AnchorRateBottom
The AnchorRateBottom property is used to:
  • Find out the anchor rate when a control moves on the vertical axis.
  • Modify the anchor rate when a control moves on the vertical axis.
Versions 09 and later
AnchorRateRight
New in version 09
AnchorRateRight
AnchorRateRight
The AnchorRateRight property is used to:
  • Find out the anchor rate when a control moves on the horizontal axis.
  • Modify the anchor rate when a control moves on the horizontal axis.
Versions 09 and later
AnchorRateHeight
New in version 09
AnchorRateHeight
AnchorRateHeight
The AnchorRateHeight property is used to:
  • Find out the vertical anchor rate of a control.
  • Modify the vertical anchor rate of a control.
Versions 09 and later
AnchorRateWidth
New in version 09
AnchorRateWidth
AnchorRateWidth
The AnchorRateWidth property is used to:
  • Find out the anchor rate when a control (or a table column) stretches on the horizontal axis.
  • Modify the anchor rate when a control (or a table column) stretches on the horizontal axis.
Minimum version required
  • Version 10
This page is also available for…
Comments
Click [Add] to post a comment