Sizer Based Layouts
Layouts that use sizers can scale better when changing the size of the application window.
Users will have different screen sizes / font sizes / display scaling settings. The set of possibilities has become more diverse in recent times with high pixel density displays (e.g. 4K screens).
Creating Sizer Based Layouts
Drag-select multiple items and select a layout action from the right-click Layout menu. e.g. Layout | Layout Vertically.
If there are no items selected then the layout commands apply to all top-level items on the current page and the layout shall be stretched to fit the whole area.
Editing sizer-based layouts requires the use of the Layout Hierarchy and Properties tool windows.
Use the Layout Hierarchy window to move items into/out of sizers.
Use the Properties window to change the Layout settings (e.g. Preferred Height / Grow Factor).
Style Property Units
Length based ‘Layout’ properties can specify units. These are similar to css e.g., 1dp specifies that a length is 1 ‘density independent pixel’ in size. The actual number of pixels will then depend on the pixel density of the display connected to the computer.
Available Units
| Unit | Description |
|---|---|
| px | Physical pixels. |
| dp | Density independent pixels. This depends upon the Windows display scaling setting. If display scaling is set to 100% then dp is equivalent to px. However, if display scaling is set to something else such as 150% then 1dp is equivalent to 1.5 physical pixels. Using dp instead of px can make layouts work on a wider range of displays. It may be better to relate view sizes to the selected font size (e.g. ch, em or rem). |
| ch | Character height for current font. 1ch is equivalent to the height of the current font. |
| em | ’emdash’ character width, relative to the font size of the parent element. |
| rem | Root emdash - width of the current font on the root work page. |
| vw | Fraction of the total view width, in percent. 100 being 100% of the view width. |
| vh | Fraction of the total view height in percent. 100 being 100% of the view height. |
| vmin | Fraction of the minimum of the view height / width. |
| vmax | Fraction of the maximum of the view height / width. |
| % | Percentage of parent container size. |
Sizing Algorithm
The sizing algorithm is similar to CSS ‘flexbox’.
Some user interface elements define some defaults for preferred sizes / grow factors. For example buttons prefer to be at their ideal height and not grow or shrink in the Y axis.