ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Editors / Window editor and page editor / Window editor
  • 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: re. 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.

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:
AnchorThe Anchor property is used to set the anchors of a control in a window, page or report.
AnchorToContentThe AnchorToContent property is used to determine and change how the control adapts to its content.
AnchorRateBottomThe 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.
AnchorRateRightThe 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.
AnchorRateHeightThe AnchorRateHeight property is used to:
  • Find out the vertical anchor rate of a control.
  • Modify the vertical anchor rate of a control.
AnchorRateWidthThe 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

Last update: 01/08/2024

Send a report | Local help