Skip to main content

VCL Tile Controls

  • 2 minutes to read

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

Tile UI Example

Tile Control

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

Tile Control Example

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

Get Started

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

Tiles and Groups

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

Tile Drag and Drop Example

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.

Detail Page Example

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.

Tile Bar Detail Page

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.

Tile Bar Control Example

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

Supported Render Modes

Tile and Tile Bar controls support all render modes available for DevExpress VCL products:

DirectX Render Mode
This render mode uses parallel calculations and utilizes a client machine’s integrated or discrete GPU to render content. This mode gives the most significant performance boost for graphics-rich applications in high-DPI environments but has a number of limitations, such as incompatibility with the GDI Scaled mode. Refer to the DirectX mode description for detailed information.
GDI+ Render Mode
This render mode is designed for graphics-intense controls that display multiple semitransparent shapes, images, and inscriptions. Use this render mode for the Gantt control if DirectX® render mode limitations prevent you from using it in your project.
GDI Render Mode
The basic render mode available for all VCL DevExpress controls.