|
|
|
|
|
|
|
|
|
|
- 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
Anchoring applied to window controls
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.
Anchoring a control in a window To anchor a control in a window: - Select the controls you want to anchor.
- 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.
- In the window that appears, select the type of anchors to be applied. The most common options are represented by different icons:
| | | | No anchors | The control does not change when the window is resized. No anchoring option is selected. | | Width | The 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. | | Right | The control moves to the right when the window is enlarged. Set the "right" anchor rate to define how much the control moves. | | Horizontally centered | The control remains centered horizontally regardless of the width of the window. | | Height | The 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 Height | The 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 Right | The 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 Distribution | This option is available only when multiple controls are selected. The selected controls stretch downward and are distributed proportionally when the window is enlarged vertically. | | Bottom | The control moves down when the window is enlarged downward. Set the "bottom" anchor rate to define how much the control moves. | | Width and Bottom | The 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 Bottom | The 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 bottom | The 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 centered | The control remains centered vertically regardless of the height of the window. | | Horizontal Distribution | This 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 right | The 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. | | Centered | The control remains centered vertically and horizontally regardless of the size of the window. |
- Define (if necessary) the different anchor rates.
- 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: - Select the controls you want to anchor: Static control, Edit control, Looper, Table, Check Box or Radio Button.
- 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.
- In the anchoring window, select the type of anchor to content:
- 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.
- 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.
- Validate.
Configuring anchors through programming The anchors of the controls can be set programmatically using different WLanguage properties:
| | | Anchor | The Anchor property sets the anchors of a control in a window, page or report. | | 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.
| | AnchorRateHeight | The AnchorRateHeight property is used to:- Find out the vertical anchor rate of a control.
- Modify the vertical anchor rate of a control.
| | 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.
| | 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.
| | AnchorToContent | The AnchorToContent property determines and changes how the control adapts to its content. |
This page is also available for…
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|