Skip to main content

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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.

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

TileControl - Adaptive Layout - Shrink 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

TileControl - Adaptive Layout - Grow 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).

TileControl - Adaptive Layout - Item Scrolling Animation