VCL Tile Controls

• Nov 19, 2024
• 3 minutes to read

VCL Tile and Tile Bar controls allow you to create touch-friendly user interfaces inspired by Microsoft Windows® 8.

Tile Control

The Tile Control can display interactive information boxes (tiles) arranged in groups.

Refer to the following topics for general information on the Tile Control:

• Tile Control
• Tile Action Bars
• Tile Control Title

Get Started

The following tutorial steps describe how to create an application with a tile-based UI:

• Create the Main Page Layout
• Customize Individual Tiles
• Add a Simple Functionality to a Tile
• Create Multiple Tile Frames from a Dataset
• Create a Detail Page
• Create a Tile Gallery and Populate it from a Dataset
• Add an Image Slider to the Detail Page
• Add Action Bar Items

Tiles and Groups

The Tile Control allows users to drag and drop tiles within or between groups.

Refer to the following topic for details: Tile Groups and Items.

Detail Pages

Users can click on a tile to activate one of a few associated detail pages. For example, different pages may appear depending on the tile’s active frame. To specify detail page content, use any TWinControl descendant.

Tile Bar Control

The Tile Bar Control is a scrollable row or column of tiles designed as a main application menu. You can align the Tile Bar to any edge of a form or other container. The active detail page occupies the remaining client area.

Pop-up Controls

The Tile Bar control’s tiles can display a control as a pop-up window in addition to a detail page. For example, you can invoke a menu associated with a particular detail page’s content.

Refer to the following topic for details: Pop-up Controls.

Supported Render Modes

VCL Tile and Tile Bar controls use a universal rendering technique and support all render modes available for DevExpress VCL products:

DirectX Mode

A Tile or Tile Bar control in DirectX render mode creates a Direct3D device context and uses a Direct2D-based canvas to draw content and UI elements. This mode is the most beneficial on a client machine with a discrete graphics card and high-DPI (4K+) displays, since calculation load shifts from CPU to GPU.

Note

The DirectX render mode imposes a number of requirements and limitations, such as the minimum operating system version. Refer to the mode description for details.

GDI+ Mode

A Tile or Tile Bar control in GDI+ render mode uses only GDI+ API-based canvases to draw content and UI elements with higher quality compared to the basic GDI render mode.

You can enable this mode instead of DirectX if you cannot use hardware acceleration due to its limitations.

GDI Mode

Default. The basic render mode available for all VCL DevExpress controls. A Chart control in GDI mode uses a combination of GDI and GDI+ API-based canvases to draw content and UI elements.

A Tile or Tile Bar control uses GDI as a fallback render mode if a device context-related error occurs in DirectX mode.