Adaptive Layout Mode
- 2 minutes to read
In traditional layout mode each tile group arranges its tiles into a grid of columns and rows. A cell in this table fits one medium or four small tiles (see the TileItem.ItemSize property). Wide and large tiles occupy two or four cells respectively.
Starting with version 16.1, the Tile Control supports adaptive layout mode. The list below briefly describes how this mode differs from others.
- Fixed tile sizes (the TileItem.ItemSize property) are ignored.
- Both TileControl.ColumnCount and TileControl.RowCount properties are ignored.
- Tiles arrange themselves one by one in a column or a row, starting a new line as they reach the edge of a control client area.
- All tiles have the same size that changes dynamically if the Tile Control is resized.
- The TileControl.IndentBetweenGroups property is ignored. The distance between any neighboring tiles is managed by the TileControl.IndentBetweenItems property alone.
To enable adaptive layout mode, switch the TileControl.LayoutMode from Standard to Adaptive. Then, you can launch the application and play around with form sizes to see how tiles react to these actions.
Resize Behavior
Tiles can shrink only until they reach their minimal size (see the animation below). Should the container resize any further, tiles from the last visible column\row will collapse. Remaining tiles will automatically enlarge to occupy the released space.
Show the animation
Vice versa, when a Tile Control enlarges, tiles grow accordingly. A new line of tiles appears when the control’s size allows it to.
Show the animation
To sum up, when in adaptive layout mode, the Tile Control tends to fit as many tiles in the its client area as it is possible without exceeding the minimal tile size.
Tip
Since in adaptive layout mode tiles have no predefined size, avoid complex content and content blocks positioned manually to specific coordinates. Instead, use alignment to tile sides and anchoring to other tile content blocks (see the Tile Item Structure article to learn more).
Additional Settings
To set the minimal tile size, go for the TileControl.OptionsAdaptiveLayout property group and specify the ItemMinSize property. In the same TileControl.OptionsAdaptiveLayout group, you can also specify the ScrollMode property. This property manages whether end-users are allowed to scroll through the Tile Control pixel-by-pixel (traditional pixel scrolling) or by entire items only (item scrolling). In the latter case the control does not allow partly visible tiles (see the animation below).
