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 be moved to the left and/or down, be stretched horizontally or vertically, etc.
  • The anchor rate: this parameter sets the percentage by which the control is moved or stretched. This parameter allows you to:
    • center a control horizontally regardless of the size of the window,
    • 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. Set the "height" anchor rate to define how much a control stretches relative to the window
    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.
You can set anchors to make a control resize vertically and horizontally to fit its content. Therefore, if you anchor a multiline Edit control vertically, it will be resized if the control content changes and contains more lines. This type of anchor is very useful for the controls found in a Layout control.
You can set anchors on the following controls: Static control, Edit control, Looper, Check Box or Radio Button.
To make a control resize to fit its content:
  1. Select the controls you want to anchor: Static control, Edit control, Looper, Table, Check Box or Radio Button.
  2. Define the anchoring options of the controls:
    • in the "UI" tab of the control description window ("Description" in the context menu),
    • via "Anchor" in the control context menu.
  3. In the anchoring window, select the type of anchor to content:
  4. If the anchors are set to "Height":
    • The controls will be enlarged vertically according to their content.
    • You must specify the horizontal anchors:
      • 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 anchors are set to "Width":
    • The controls will be enlarged horizontally according to their content.
    • You must specify the vertical anchors:
      • 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 sets the anchors of a control in a window, page or report.
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.
AnchorRateHeightThe AnchorRateHeight property is used to:
  • Find out the vertical anchor rate of a control.
  • Modify the vertical anchor rate of a control.
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.
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.
AnchorToContentThe AnchorToContent property determines and changes how the control adapts to its content.
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