Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [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]TileNav 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]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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.

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

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

How would you rate this topic?​​​​​​​