VCL Tile Controls

• Jun 27, 2023
• 2 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

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.