[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Collapse]Navigation Controls
   [Expand]Navigation Bar
   [Expand]Accordion Control
    Navigation Frame and Tab Pane
    Navigation Pane
    Tile Bar
   [Expand]Tile Nav Pane
    WindowsUI Button Panel
   [Expand]Office Navigation Bar
   [Collapse]Tile Control
    [Expand]Groups and Items
    [Collapse]Adaptive Layout Mode
      Adaptive Layout Mode
    [Expand]Working with the Tile Control
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Adaptive Layout Mode

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.

Expanded 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.

Expanded 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.

Expanded 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.


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).

Expanded 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).

Is this topic helpful?​​​​​​​