Skip to main content
A newer version of this page is available. .

Tile View

  • 12 minutes to read

Tile View (the TileView class) presents data records as read-only tiles, which can arrange multiple elements (bound and unbound) in any custom manner. The tile editing feature is available using a separate Edit Form.

The supported tile layout modes (TileViewItemOptions.LayoutMode) include:

  • Default - Tiles are arranged in multiple columns and rows. Automatic tile wrapping is enabled.
  • Kanban - This mode is tailored to group tiles by a column, and access each group content independent of other groups (using independent group scrolling). Tile wrapping is disabled.
  • List - Tiles are arranged in column(s)/row(s) with the tile stretching feature enabled.

The following are main Tile View features:

  • A tile template from which all tiles are generated by default.
  • Setting up a tile template in the Data Grid’s Designer
  • Dynamic tile template substitution at runtime, using the TileView.CustomItemTemplate event.
  • Bound and unbound elements in the tile template. Unbound elements are used to display static text and images. Using bound elements, you can display data from underlying data source fields.
  • Multiple tile element alignment options, including alignment relative to other elements, and specifying absolute or relative element size.
  • Tile grouping by a column.
  • Support for tile checking.
  • Data editing feature (using a separate Edit Form).

Online Videos

  • Tile View - Basics

    This video shows you how to switch the usual grid data layout to the Tile View that displays data records as tiles. You will learn the basics of tile template configuration, such as adding data bound and unbound elements and positioning them within the template.

    Watch on YouTube…

  • Tile View - Layout & Appearance

    Learn how to add items to tiles, custom arrange these items and set up item appearance.

    Watch on YouTube…

  • Tile View - Service Columns & Dynamic Tile Customization

    In this video, you will learn how to apply data grouping to the Tile View, how to control the enabled state or check the status of tiles depending on a field value and how to customize tile items using a specially designed event.

    Watch on YouTube…

Create Tile View, Bind It to Data and Populate Column Collection

When you create a GridControl, by default, it contains a Grid View, which displays data in the column and row format. To convert this View to a TileView at design time, use the Data Grid’s Level Designer.

TileView - Smart-Tag

To provide data for the Tile View, bind the Data Grid to a data source using the GridControl.DataSource and GridControl.DataMember properties. At design time, you can use the grid control’s smart tag.


Once the data grid is bound to data, the Tile View (as any other View) automatically creates columns (GridColumn objects) for all data source fields.


The column collection (ColumnView.Columns) is not automatically populated if a View already contains any column.

You can check the contents of the created column collection using the Data Grid’s main Designer. Click the Run Designer button and then switch to the Columns Page.


This Designer page allows you to manipulate the column collection. For instance, you can manually create columns and bind them to certain data source fields with the GridColumn.FieldName property. It is also possible to create unbound columns, for which data is provided using a custom expression or a dedicated event.

Note that if you run the application now, you may see empty tiles (each tile represents a data source record). The created columns are not visible, as they have not yet been added to a tile template.


Create Tile Template

The Tile Template specifies the layout of elements within a tile. Below is a sample tile template that contains bound and unbound elements.


Bound tile elements are those that are linked to and obtain data from certain grid columns (TileViewItemElement.Column). Unbound tile elements are typically used to display static text and images.


Data for any tile element (bound and unbound) can be customized dynamically for each individual tile with the TileView.ItemCustomize event.

Below is a sample Tile View whose tiles are generated from the template above.


To create a tile template, switch to the Designer’s Tile Template page.


Setting up the tile template is based on the common Table Layout concept, in which the design surface is divided into logical columns and rows, and the contents are placed in corresponding cells (which can be merged if required).


The supported tile template customization actions include:

  • Drag-and-drop of grid columns from the Columns list onto the table cells.

    When you drop a column onto a cell, a bound tile element (TileViewItemElement) is automatically created.

  • Drag-and-drop of created elements between cells.
  • Placing multiple elements in the same cell and then providing different alignment options for these elements to prevent overlapping.
  • Merging cells by selecting them with the mouse and then clicking the Merge button.
  • Unmerging previously merged cells using the Unmerge button.
  • Resizing cells with the mouse
  • Resizing the tile template with the mouse by dragging its edges.
  • Adding/removing columns and rows using the Designer-TileTemplatePage-AddRowsButtons buttons and context menu.


  • Selecting a cell (by clicking it) and customizing the cell’s size, size type (absolute or relative) and padding in the Property Grid.


  • Accessing a dropped element (by clicking it) and customizing its settings in the Property Grid.


  • Manipulating the element collection via the Elements list. For instance, you can add unbound elements. When an element is created, it is automatically added to the template.
  • Saving the current template with a different name using the Save As button, and thus creating multiple templates. Multiple templates come in handy if you use the TileView.CustomItemTemplate event to dynamically provide different templates for tiles.

Tile Element Contents and Alignment

A bound tile element obtains a display value from the linked column. The column’s data type is automatically determined, and thus the tile element automatically chooses the information to display: either text or image.

If you need to display an additional label or image next to a tile element, add a new unbound tile element.

For an unbound tile element, you can provide data with the TileItemElement.Text and TileItemElement.Image/TileItemElement.ImageUri properties. To specify the alignment of an element’s text data relative to the image, see TileItemElement.ImageToTextAlignment.

Tile elements are centered vertically and horizontally within cells by default. There are two options to align elements:

Tile Size and Layout

The arrangement of tiles depends on the currently selected layout mode and orientation. The layout mode also specifies element indents, whether tiles are stretched and how an end-user will scroll through tiles.

The following image shows the supported layout modes when data grouping is enabled and demonstrates tile scrolling and response to resize operations.

At design time, you can customize the main layout settings from the Data Grid Designer’s Layout page. This designer page allows you to apply one of the predefined layouts and then tune the layout settings, if needed.


You can also access these and other layout settings from the TileView.OptionsTiles object:

Data Grouping

The Tile View can group its tiles by any one column (grouping by multiple columns is not supported). All tiles with identical group column values will be combined into the same tile group (a TileViewGroup object). The following image shows a sample Tile View, whose data is grouped by the Country column.


To enable data grouping, assign a group-by-column to the TileView.ColumnSet.GroupColumn property (TileViewColumns.GroupColumn).

TileView - Group Column

The following properties affect the display of group captions.

Tile Check State

Any Boolean column can control the checked state of tiles. Checked tiles are displayed with a check mark at their top right corner, as the figure below illustrates.

TileView - Checked Column

To specify the column that will determine the tile check state, set the TileView.ColumnSet.CheckedColumn property (TileViewColumns.CheckedColumn).

If the check column is specified, end-users will be able to toggle the tile check state by right-clicking tiles. This action will fire the TileView.ItemRightClick and TileView.ItemCheckedChanged events.

Tile Enabled State

Similar to the checked column, you can specify a Boolean column that will control the enabled state of each tile. Assign this column to the TileView.ColumnSet.EnabledColumn property (TileViewColumns.EnabledColumn).

The figure below illustrates the visual difference between enabled and disabled tiles. End-users are not able to interact with disabled tiles (for instance, they cannot change the tile check state by right-clicking).

TileView - Enabled Column

Tile Background Image

You can set images from a specific grid column as tile background images, by assigning this column to the TileView.ColumnSet.BackgroundImageColumn property (TileViewColumns.BackgroundImageColumn).

To custom align background images and modify their scale mode, use the TileViewItemOptions.ItemBackgroundImageAlignment or TileViewItemOptions.ItemBackgroundImageScaleMode properties respectively.

Customizing Individual Tiles

By default, all tiles are generated from a template specified by the TileView.TileTemplate property. By handling the TileView.CustomItemTemplate event, you can dynamically replace the default template with another one for individual or all tiles based on custom logic. You can create predefined tile templates beforehand using the Data Grid Designer’s Tile Template page. These templates will be stored in the TileView.Templates collection.

Another event that helps you customize the contents of individual tiles is TileView.ItemCustomize. By handling this event, you can dynamically modify the contents and appearance of tile elements in any tile.

When handling this event, read the Item event parameter to identify the currently processed tile (TileItem). To access and modify the tile’s elements, use the TileItem.Elements collection.

The code below demonstrates the use of the TileView.ItemCustomize event to change the contents and background color of tile elements.

private void tileView1_ItemCustomize(object sender, DevExpress.XtraGrid.Views.Tile.TileViewItemCustomizeEventArgs e) {
    e.Item.Elements[6].Text = String.Format("${0}M", ((Decimal)(Int32)tileView1.GetRowCellValue(e.RowHandle, colPrice) / 1000000).ToString("0.0"));
    if ((bool)tileView1.GetRowCellValue(e.RowHandle, colSold) == true) {
        e.Item.Elements[1].Image = global::TileViewHomes.Properties.Resources.gray_element;
        e.Item.Elements[6].Text = "SOLD";

The following figure illustrates the result.

TileView - Houses with SOLD label

Context Buttons

Tile View can display context buttons for its tiles.

TileView - Context Buttons

The TileView.ContextButtons property allows you to specify one set of context buttons, which will be applied to each tile by default. If required, you can dynamically modify the availability of context buttons for certain tiles by handling a dedicated event. See TileView.ContextButtons to learn more.


Appearance settings for tiles and their elements can be adjusted at three levels:

  • Appearance settings provided by the Tile View (TileView.Appearance) - These are the default appearance settings for all tiles and tile elements.
  • Appearance settings provided by tiles (TileItem.Appearance) - These override the default appearance settings. You can customize the tile appearance settings by handling the TileView.ItemCustomize event.
  • Appearance settings provided by tile elements (TileItemElement.Appearance) - These settings, which override the default settings and tile settings, can be customized by handling the TileView.ItemCustomize event, and at design time using the Data Grid Designer’s Tile Template page (see the image below).


The figure below demonstrates a tile with all tile elements (except one) painted using the blue color which is set as default. The MPG Highway element overrides this setting to display a red foreground color.

TileView - Appearance Single Element

The appearance of group captions can be customized with the TileView.Appearance.GroupText property. All tile groups use the same appearance settings.

TileView - Appearance Group Text

See Also