Tile View

• Aug 18, 2025
• 14 minutes to read

TileView displays data records as tiles. Each tile can contain multiple UI elements arranged in a custom layout. Tile elements can be bound to data source fields.

Run Demo: TileView

Getting Started

Create a TileView

1. Drop the GridControl from the Toolbox onto a Form.
2. Bind the GridControl to a data source and create columns.

3. Select the default View (GridView) and convert it to TileView.

   

Create a Tile Template

TileView uses templates to generate tiles. A tile template defines the layout and appearance of UI elements within a tile.

Standard Tile Template

The standard tile template divides the design surface into logical rows and columns. Each element is positioned in a specific cell.

Use the Data Grid Designer to create and modify the tile template at design time.

You can customize the tile template in the following ways:

• Drag columns from the “Columns” list to template cells (which creates bound tile elements - TileViewItemElement).
• Move elements between cells.
• Place multiple elements in one cell (use alignment settings to prevent overlap).
• Merge and unmerge cells.
• Resize individual cells or the entire template.
• Add or remove rows and columns.
• Select tile elements or cells and specify their properties (size, padding, type) in the Properties window.
• Save the tile template.

The code snippet creates the following tile template:

C#

using DevExpress.XtraEditors.TableLayout;
using DevExpress.XtraEditors;
using DevExpress.XtraGrid;
using DevExpress.XtraGrid.Views.Tile;
using System.Data;
using System.Drawing;
using System.Windows.Forms;

namespace DXTileViewDemo {
    public partial class Form1 : XtraForm {
        GridControl grid;
        TileView tileView1;
        public Form1() {
            InitializeComponent();

            grid = new GridControl(){ Dock = DockStyle.Fill, DataSource = Data.GetData() };
            Controls.Add(grid);

            tileView1 = new TileView(grid);
            grid.MainView = tileView1;

            InitTileTemplate();
        }

        void CreateTileTemplate() {
            tileView1.OptionsTiles.ItemSize = new Size(300, 160);

            TableColumnDefinition tableColumn1 = new TableColumnDefinition();
            TableColumnDefinition tableColumn2 = new TableColumnDefinition();

            tableColumn1.Length.Value = 120;
            tableColumn1.Length.Type = TableDefinitionLengthType.Pixel;
            tableColumn2.Length.Value = 180;
            tableColumn2.Length.Type = TableDefinitionLengthType.Pixel;

            tileView1.TileColumns.Add(tableColumn1);
            tileView1.TileColumns.Add(tableColumn2);

            TableRowDefinition tableRow1 = new TableRowDefinition();
            TableRowDefinition talbeRow2 = new TableRowDefinition();

            tileView1.TileRows.Add(tableRow1);
            tileView1.TileRows.Add(talbeRow2);

            TableSpan tableSpan1 = new TableSpan(){ RowIndex = 0, ColumnIndex = 0, RowSpan = 2};
            tileView1.TileSpans.Add(tableSpan1);

            TileViewItemElement tileElementFirstName = new TileViewItemElement() {
                Column = tileView1.Columns["FirstName"],
                ColumnIndex = 1,
                RowIndex = 0,
                TextAlignment = TileItemContentAlignment.MiddleCenter
            };
            TileViewItemElement tileElementCity = new TileViewItemElement() {
                Column = tileView1.Columns["City"],
                ColumnIndex = 1,
                RowIndex = 1,
                TextAlignment = TileItemContentAlignment.MiddleCenter
            };
            TileViewItemElement tileElementPhoto = new TileViewItemElement() {
                Column = tileView1.Columns["Photo"],
                ColumnIndex = 0,
                RowIndex = 0
            };

            tileElementFirstName.ImageOptions.ImageAlignment = TileItemContentAlignment.MiddleCenter;
            tileElementFirstName.ImageOptions.ImageScaleMode = TileItemImageScaleMode.Squeeze;

            tileElementCity.ImageOptions.Assign(tileElementFirstName.ImageOptions);
            tileElementPhoto.ImageOptions.Assign(tileElementFirstName.ImageOptions);

            tileView1.TileTemplate.Add(tileElementFirstName);
            tileView1.TileTemplate.Add(tileElementCity);
            tileView1.TileTemplate.Add(tileElementPhoto);
        }

    }
    public class Data {
        public static DataTable GetData() {
            DataTable dt = new DataTable();
            dt.Columns.Add("FirstName", typeof(string));
            dt.Columns.Add("City", typeof(string));
            dt.Columns.Add("Photo", typeof(Image));
            //dt.Rows.Add("John", "NY", Image.FromFile(@"c:\media\photo.png"));
            return dt;
        }
    }
}

VB.NET

Imports DevExpress.XtraEditors.TableLayout
Imports DevExpress.XtraEditors
Imports DevExpress.XtraGrid
Imports DevExpress.XtraGrid.Views.Tile
Imports System.Data
Imports System.Drawing
Imports System.Windows.Forms

Namespace DXTileViewDemo
    Public Partial Class Form1
        Inherits XtraForm

        Private grid As GridControl
        Private tileView1 As TileView

        Public Sub New()
            InitializeComponent()

            grid = New GridControl() With {.Dock = DockStyle.Fill, .DataSource = Data.GetData()}
            Controls.Add(grid)

            tileView1 = New TileView(grid)
            grid.MainView = tileView1

            InitTileTemplate()
        End Sub

        Private Sub CreateTileTemplate()
            tileView1.OptionsTiles.ItemSize = New Size(300, 160)

            Dim tableColumn1 As New TableColumnDefinition()
            Dim tableColumn2 As New TableColumnDefinition()

            tableColumn1.Length.Value = 120
            tableColumn1.Length.Type = TableDefinitionLengthType.Pixel
            tableColumn2.Length.Value = 180
            tableColumn2.Length.Type = TableDefinitionLengthType.Pixel

            tileView1.TileColumns.Add(tableColumn1)
            tileView1.TileColumns.Add(tableColumn2)

            Dim tableRow1 As New TableRowDefinition()
            Dim tableRow2 As New TableRowDefinition()

            tileView1.TileRows.Add(tableRow1)
            tileView1.TileRows.Add(tableRow2)

            Dim tableSpan1 As New TableSpan() With {.RowIndex = 0, .ColumnIndex = 0, .RowSpan = 2}
            tileView1.TileSpans.Add(tableSpan1)

            Dim tileElementFirstName As New TileViewItemElement() With {
                .Column = tileView1.Columns("FirstName"),
                .ColumnIndex = 1,
                .RowIndex = 0,
                .TextAlignment = TileItemContentAlignment.MiddleCenter
            }
            Dim tileElementCity As New TileViewItemElement() With {
                .Column = tileView1.Columns("City"),
                .ColumnIndex = 1,
                .RowIndex = 1,
                .TextAlignment = TileItemContentAlignment.MiddleCenter
            }
            Dim tileElementPhoto As New TileViewItemElement() With {
                .Column = tileView1.Columns("Photo"),
                .ColumnIndex = 0,
                .RowIndex = 0
            }

            tileElementFirstName.ImageOptions.ImageAlignment = TileItemContentAlignment.MiddleCenter
            tileElementFirstName.ImageOptions.ImageScaleMode = TileItemImageScaleMode.Squeeze

            tileElementCity.ImageOptions.Assign(tileElementFirstName.ImageOptions)
            tileElementPhoto.ImageOptions.Assign(tileElementFirstName.ImageOptions)

            tileView1.TileTemplate.Add(tileElementFirstName)
            tileView1.TileTemplate.Add(tileElementCity)
            tileView1.TileTemplate.Add(tileElementPhoto)
        End Sub

    End Class

    Public Class Data
        Public Shared Function GetData() As DataTable
            Dim dt As New DataTable()
            dt.Columns.Add("FirstName", GetType(String))
            dt.Columns.Add("City", GetType(String))
            dt.Columns.Add("Photo", GetType(Image))
            'dt.Rows.Add("John", "NY", Image.FromFile("c:\media\photo.png"))
            Return dt
        End Function
    End Class
End Namespace

HTML & CSS-based Template

TileView supports HTML/CSS templates.

Run Demo: HTML-CSS Templates

Use the TileHtmlTemplate property to assign an HTML template:

• Click the ellipsis button in the Properties window to open the HTML Template Editor.
• Add HTML markup and CSS styles.
• Save the template.

HTML-CSS template features:

Bind to Data

Use ${FieldName} syntax to insert values from the data source. See the following help topic for more information: HTML-CSS Templates - Bind to Data.

Note

TileView automatically creates columns for all fields in a data source if its TileView.Columns collection is empty.

Images

Use the <img> tag to display images. See the following help topic for more information: HTML-CSS Templates - Images.

Buttons

Use the <div> tag to emulate button behavior. See the following help topic for more information: HTML-CSS Templates - Buttons.

Data Editors

Use the <input> tag to embed editors. These editors map to repository items by name.

<input name="repositoryItemButtonEdit1" value="${Price}" class="editor"/>

Use the In-place Editor Repository page in the Grid Designer to create and configure repository items for HTML templates.

See the following help topic for more information: HTML-CSS Templates - Data Editors.

TileView raises the following events to handle interactions with HTML elements:

• HtmlElementMouseClick
• HtmlElementMouseDown
• HtmlElementMouseOut
• HtmlElementMouseOver
• HtmlElementMouseUp

Tile Customization

Tile Elements and Alignment

Bound and Unbound (Static) Elements

Bound tile elements display values from their assigned columns. TileView automatically selects a display mode (text or image) based on the column’s data type.

Use TileItemElement.Text and TileItemElement.ImageOptions properties to display static content (such as labels or images). Static content is not bound to a data source.

The following code snippet creates a label:

C#

TileViewItemElement tileElementID = new TileViewItemElement() {
    ColumnIndex = 1,
    RowIndex = 0,
    Text = "ID",
    TextAlignment = TileItemContentAlignment.MiddleCenter
};
tileView1.TileTemplate.Add(tileElementID);

VB.NET

Dim tileElementID As TileViewItemElement = New TileViewItemElement()
tileElementID.ColumnIndex = 1
tileElementID.RowIndex = 0
tileElementID.Text = "ID"
tileElementID.TextAlignment = TileItemContentAlignment.MiddleCenter
tileView1.TileTemplate.Add(tileElementID)

Alignment Options

Tile elements are centered both vertically and horizontally within their cells.

Use the following properties to align tile elements:

Align within a cell

Use the TileItemElement.TextAlignment property for text and the TileItemElement.ImageAlignment property for images.

Align relative to another tile element

Use TileItemElement.AnchorElement and TileItemElement.AnchorAlignment properties.

To align text relative to an image within the same element, use the TileItemElement.ImageOptions.ImageToTextAlignment property.

Tile Size and Layout

Layout Modes

Tile View supports three layout modes:

Default

Tiles wrap across rows or columns, depending on layout orientation. Orientation and row count determine layout direction (down-then-across or across-then-down).

Kanban

Tiles are grouped by a data field. Tile wrapping is disabled.

See the following help topic for more information: Kanban Board.

List

Tiles stretch to fill available space in a single column or row.

Tile View - LayoutMode: Default
Orientation: Horizontal, RowCount: 3

Tile View - LayoutMode: Default
Orientation: Vertical, ColumnCount: 3

Tile View - LayoutMode: Kanban
Orientation: Horizontal

Tile View - LayoutMode: Kanban
Orientation: Vertical

Tile View - LayoutMode: List
Orientation: Horizontal

Tile View - LayoutMode: List
Orientation: Vertical

Open the Grid Designer’s Layout page to specify the layout mode and customize layout settings at design time:

Use the TileView.OptionsTiles.LayoutMode property to specify the layout mode.

The following code snippet activates the Kanban mode and groups tiles by the “Country” column:

C#

tileView1.OptionsTiles.LayoutMode = TileViewLayoutMode.Kanban;
tileView1.ColumnSet.GroupColumn = tileView1.Columns["Country"];

VB.NET

TileView1.OptionsTiles.LayoutMode = TileViewLayoutMode.Kanban
TileView1.ColumnSet.GroupColumn = TileView1.Columns("Country")

Tile Options

Use the TileView.OptionsTiles property to access tile settings.

Property	Description
TileView.OptionsTiles.Orientation	Gets or sets the way tiles are arranged, horizontally or vertically.
TileView.OptionsTiles.RowCount	Specifies the row count in the horizontal orientation in List layout mode. In Default layout mode, this property specifies the maximum number of rows.
TileView.OptionsTiles.ColumnCount	Specifies the column count in the vertical orientation in List layout mode. In Default layout mode, this property specifies the maximum number of columns.
TileView.OptionsTiles.ItemSize	Gets or sets the size of tiles within this TileView.
TileView.OptionsTiles.StretchItems	Gets or sets whether tiles are stretched to fit the View’s width/height (depending on the Orientation setting). The property is ignored in List layout mode.
TileView.OptionsTiles.Padding	Gets or sets the current TileView padding.
TileView.OptionsTiles.IndentBetweenGroups	Gets or sets the distance between neighboring tile groups.
TileView.OptionsTiles.IndentBetweenItems	Gets or sets the distance between neighboring tiles within this TileView.
TileViewItemOptions.GroupTextPadding	Gets or sets the amount of empty space around a group header text (see TileViewColumns.GroupColumn).
TileView.OptionsTiles.ItemPadding	Gets or sets the padding for all tiles within the TileView.

Auto Height

Tiles can have different heights when automatic height calculation is enabled. Set the TableRowDefinition.AutoHeight property to true to enable auto height for a template row. When this option is activated, each tile’s height adapts to the content of its rows.

Run Demo: Office Compact View

Note

Automatic tile height calculation is not supported in Server Mode.

Check State

TileView can display a check mark in the top-right corner of tiles.

Use the TileView.ColumnSet.CheckedColumn property to specify a Boolean column that determines whether a tile is checked.

C#

tileView1.ColumnSet.CheckedColumn = tileView1.Columns["IsSelected"];

VB.NET

TileView1.ColumnSet.CheckedColumn = TileView1.Columns("IsSelected")

Users can right-click tiles to toggle their checked state. Handle the following events in response:

• TileView.ItemRightClick
• TileView.ItemCheckedChanged

Enable/Disable Tiles

TileView disables individual tiles based on a Boolean data field. Disabled tiles do not respond to mouse actions.

Assign a Boolean column to the TileView.ColumnSet.EnabledColumn property to control each tile’s enabled state:

C#

tileView1.ColumnSet.EnabledColumn = tileView1.Columns["IsEnabled"];

VB.NET

TileView1.ColumnSet.EnabledColumn = TileView1.Columns("IsEnabled")

Tile Background Image

TileView can display background images for individual tiles. Assign a grid column that contains images to the TileView.ColumnSet.BackgroundImageColumn property:

C#

tileView1.ColumnSet.BackgroundImageColumn = tileView1.Columns["BackgroundImage"];

VB.NET

TileView1.ColumnSet.BackgroundImageColumn = TileView1.Columns("BackgroundImage")

Use the following properties to customize image layout:

• TileViewItemOptions.ItemBackgroundImageAlignment - Specifies background image alignment within the tile.
• TileViewItemOptions.ItemBackgroundImageScaleMode - Controls how the background image is scaled.

Customize Individual Tiles

Custom Tile Template

Handle the CustomItemTemplate event to assign a specific template to individual tiles based on custom logic.

The following code snippet applies a custom template to tiles where the Country field contains “UK”:

C#

void tileView1_CustomItemTemplate(object sender, TileViewCustomItemTemplateEventArgs e) {
    TileView tileView = sender as TileView;
    string country = tileView1.GetRowCellDisplayText(e.RowHandle, "Country");
    if (country == "UK")
        e.Template = e.Templates["CustomTemplate"];
}

VB.NET

Sub TileView1_CustomItemTemplate(sender As Object, e As DevExpress.XtraGrid.Views.Tile.TileViewCustomItemTemplateEventArgs) Handles TileView1.CustomItemTemplate
    Dim tileView As TileView = TryCast(sender, TileView)
    Dim country As String = TileView1.GetRowCellDisplayText(e.RowHandle, "Country")
    If country = "UK" Then
        e.Template = e.Templates("CustomTemplate")
    End If
End Sub

Tip: Create Custom Tile Templates at Design Time

Open the Data Grid Designer’s Tile Template page to create predefined tile templates at design time. TileView stores custom templates in the TileView.Templates collection.

Custom Content and Appearance

Handle the ItemCustomize event to modify element content, appearance, or layout for individual tiles.

The following code snippet modifies the text and image of tile elements based on the “Price” and “Sold” fields:

C#

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";
    }
}

VB.NET

Sub tileView1_ItemCustomize(ByVal sender As Object, ByVal e As DevExpress.XtraGrid.Views.Tile.TileViewItemCustomizeEventArgs)
    e.Item.Elements(6).Text = String.Format("${0}M", (CDec(CInt((tileView1.GetRowCellValue(e.RowHandle, colPrice)))) / 1000000).ToString("0.0"))
    If CBool(tileView1.GetRowCellValue(e.RowHandle, colSold)) = True Then
        e.Item.Elements(1).Image = Global.TileViewHomes.Properties.Resources.gray_element
        e.Item.Elements(6).Text = "SOLD"
    End If
End Sub

The following screenshot shows the result:

Data Editing

TileView supports the following editing options:

• Display a modal Edit Form to edit tile data.
• Use HTML-CSS templates with <input> tags to enable in-place editing in tiles.

See the following help topic for more information: Tile Editing.

Group Tiles

TileView supports grouping tiles by a single data column (tiles cannot be grouped by multiple columns). Tiles with the same group value are placed into a TileViewGroup.

Assign a column to the TileView.ColumnSet.GroupColumn property to enable grouping:

C#

tileView1.ColumnSet.GroupColumn = tileView1.Columns["Country"];

VB.NET

TileView1.ColumnSet.GroupColumn = TileView1.Columns("Country")

Related API

• TileView.Appearance.Group
• TileViewItemOptions.GroupTextPadding
• TileViewItemOptions.IndentBetweenGroups
• TileViewItemOptions.ShowGroupText

Select Tiles

Set the TileView.OptionsSelection.MultiSelect property to true to enable multiple tile selection.

C#

tileView1.OptionsSelection.MultiSelect = true;

VB.NET

TileView1.OptionsSelection.MultiSelect = True

Set the TileView.OptionsSelection.AllowMarqueeSelection property to true to enable marquee selection. Marquee selection selects all tiles within the dragged rectangle.

C#

tileView1.OptionsSelection.AllowMarqueeSelection = true;

VB.NET

TileView1.OptionsSelection.AllowMarqueeSelection = True

Related API

• TileView.Appearance.ItemSelected — Specifies appearance settings used to paint selected tiles.
• ColumnView.GetSelectedRows() — Returns handles of selected tiles.
• ColumnView.SelectedRowsCount — Gets the number of selected tiles.
• ColumnView.SelectRow(Int32) — Selects the specified tile.
• ColumnView.SelectAll() — Selects all tiles.
• ColumnView.SelectRange(Int32, Int32) — Selects multiple tiles.

Drag & Drop Tiles

TileView supports built-in drag & drop operations. Set the TileViewOptionsDragDrop.AllowDrag property to true to enable drag & drop.

tileView1.OptionsDragDrop.AllowDrag = true;

Use the following events to handle drag & drop operations:

• TileView.BeforeItemDrag
• TileView.BeforeItemDrop
• TileView.ItemDrop

Set the TileView.OptionsDragDrop.ShowDropIndicators property to true to display visual drop indicators during the operation.

To enable drag & drop between different grid controls, attach a drag & drop behavior from the BehaviorManager component.

Context Buttons

TileView supports context buttons (interactive icons displayed on tiles). Context buttons can perform custom actions, open dialogs, or reflect state changes when clicked.

To display context buttons, create and add them to the TileView.ContextButtons collection:

C#

tileView1.ContextButtonOptions.TopPanelColor = Color.FromArgb(160, 0, 0, 0);
tileView1.ContextButtonOptions.BottomPanelColor = Color.FromArgb(160, 0, 0, 0);

ContextButton cb_delete = new ContextButton();
cb_delete.AlignmentOptions.Panel = ContextItemPanel.Center;
cb_delete.AlignmentOptions.Position = ContextItemPosition.Center;
cb_delete.ImageOptionsCollection.ItemNormal.Image = Image.FromFile(".\\cross.png");
cb_delete.Click += (o, e) =>
{
    if (XtraMessageBox.Show("Delete the item?", "Warning", MessageBoxButtons.YesNo) == DialogResult.Yes)
        tileView1.DeleteSelectedRows();
};
tileView1.ContextButtons.Add(cb_delete);

TrackBarContextButton cb_track = new TrackBarContextButton();
cb_track.AlignmentOptions.Panel = ContextItemPanel.Top;
tileView1.ContextButtons.Add(cb_track);

RatingContextButton cb_rate = new RatingContextButton();
cb_rate.ImageOptionsCollection.ItemNormal.Image = Image.FromFile(".\\Stars3_1.png");
cb_rate.ImageOptionsCollection.ItemChecked.Image = Image.FromFile(".\\Stars3_3.png");
cb_rate.Visibility = ContextItemVisibility.Visible;
cb_rate.AlignmentOptions.Panel = ContextItemPanel.Bottom;
tileView1.ContextButtons.Add(cb_rate);

VB.NET

tileView1.ContextButtonOptions.TopPanelColor = Color.FromArgb(160, 0, 0, 0)
tileView1.ContextButtonOptions.BottomPanelColor = Color.FromArgb(160, 0, 0, 0)

Dim cb_delete As New ContextButton()
cb_delete.AlignmentOptions.Panel = ContextItemPanel.Center
cb_delete.AlignmentOptions.Position = ContextItemPosition.Center
cb_delete.ImageOptionsCollection.ItemNormal.Image = Image.FromFile(".\cross.png")
AddHandler cb_delete.Click, Sub(o, e)
    If XtraMessageBox.Show("Delete the item?", "Warning", MessageBoxButtons.YesNo) = DialogResult.Yes Then
        tileView1.DeleteSelectedRows()
    End If
End Sub
tileView1.ContextButtons.Add(cb_delete)

Dim cb_track As New TrackBarContextButton()
cb_track.AlignmentOptions.Panel = ContextItemPanel.Top
tileView1.ContextButtons.Add(cb_track)

Dim cb_rate As New RatingContextButton()
cb_rate.ImageOptionsCollection.ItemNormal.Image = Image.FromFile(".\Stars3_1.png")
cb_rate.ImageOptionsCollection.ItemChecked.Image = Image.FromFile(".\Stars3_3.png")
cb_rate.Visibility = ContextItemVisibility.Visible
cb_rate.AlignmentOptions.Panel = ContextItemPanel.Bottom
tileView1.ContextButtons.Add(cb_rate)

To conditionally display, hide, or customize buttons for individual tiles, handle the ContextButtonCustomize event.

Appearance and Conditional Formatting

Tile View Appearance

Use the TileView.Appearance property to specify appearance settings for all tiles and tile elements.

Tile Appearance

Handle the TileView.ItemCustomize event to override default settings for specific tiles. Use the e.Item.AppearanceItem property to modify tile item appearance settings.

Tile Element Appearance

To override appearance settings for individual elements within a tile, use the element’s TileItemElement.Appearance property.

Handle the TileView.ItemCustomize event to customize tile element appearance settings based on a specific condition.

Custom Draw Tiles

Handle the TileView.CustomDrawTile event to take full control over tile rendering.

Run Demo: Custom Draw Tiles

Conditional Formatting

TileView supports conditional formatting. You can modify the appearance of tiles or tile elements based on cell values.

You can apply the following types of format rules:

• Modify appearance settings of tile elements that meet specific conditions.
• Highlight minimum, maximum, duplicate, unique, or average-related values.
• Display icons based on value ranges.
• Use two- or three-color scales to visualize value distribution.

To create conditional formats at design time:

1. Open the Grid Designer.
2. Switch to the Appearance → Format Rules page.
3. Click the + button to add a new format rule.
4. Configure the rule type, appearance settings, and conditions.

The following code snippet creates a conditional formatting rule to highlight products that are out of stock (UnitStock = 0):

• Tiles are rendered with gray text.
• The “Price” field is displayed with a strikethrough effect.

C#

// Create a format rule.
DevExpress.XtraGrid.GridFormatRule formatRule1 = new DevExpress.XtraGrid.GridFormatRule();
formatRule1.ApplyToRow = true;
formatRule1.Column = colInStock;
// Define a format condition.
DevExpress.XtraEditors.FormatConditionRuleValue ruleGrayOutText = new DevExpress.XtraEditors.FormatConditionRuleValue();
ruleGrayOutText.Appearance.ForeColor = System.Drawing.Color.Silver;
ruleGrayOutText.Condition = DevExpress.XtraEditors.FormatCondition.Expression;
ruleGrayOutText.Expression = "[InStock] = False";
// Apply the rule to the tile.
formatRule1.Rule = ruleGrayOutText;
tileView1.FormatRules.Add(formatRule1);

DevExpress.XtraGrid.GridFormatRule formatRule2 = new DevExpress.XtraGrid.GridFormatRule();
formatRule2.Column = colInStock;
formatRule2.ColumnApplyTo = colPrice;
DevExpress.XtraEditors.FormatConditionRuleValue ruleStrikethroughText = new DevExpress.XtraEditors.FormatConditionRuleValue();
ruleStrikethroughText.Appearance.FontStyleDelta = FontStyle.Strikeout;
ruleStrikethroughText.Condition = DevExpress.XtraEditors.FormatCondition.Expression;
ruleStrikethroughText.Expression = "[InStock] = False";
formatRule2.Rule = ruleStrikethroughText;
tileView1.FormatRules.Add(formatRule2);

VB.NET

Dim formatRule1 As DevExpress.XtraGrid.GridFormatRule = New DevExpress.XtraGrid.GridFormatRule()
formatRule1.ApplyToRow = True
formatRule1.Column = colInStock
Dim ruleGrayOutText As DevExpress.XtraEditors.FormatConditionRuleValue = New DevExpress.XtraEditors.FormatConditionRuleValue()
ruleGrayOutText.Appearance.ForeColor = System.Drawing.Color.Silver
ruleGrayOutText.Condition = DevExpress.XtraEditors.FormatCondition.Expression
ruleGrayOutText.Expression = "[InStock] = False"
formatRule1.Rule = ruleGrayOutText
tileView1.FormatRules.Add(formatRule1)

Dim formatRule2 As DevExpress.XtraGrid.GridFormatRule = New DevExpress.XtraGrid.GridFormatRule()
formatRule2.Column = colInStock
formatRule2.ColumnApplyTo = colPrice
Dim ruleStrikethroughText As DevExpress.XtraEditors.FormatConditionRuleValue = New DevExpress.XtraEditors.FormatConditionRuleValue()
ruleStrikethroughText.Appearance.FontStyleDelta = FontStyle.Strikeout
ruleStrikethroughText.Condition = DevExpress.XtraEditors.FormatCondition.Expression
ruleStrikethroughText.Expression = "[InStock] = False"
formatRule2.Rule = ruleStrikethroughText
tileView1.FormatRules.Add(formatRule2)

Demos

Run Demo: TileView

Run Demo: Kanban Board

Run Demo: Office Compact View

Online Videos

TileView Basics

See how to switch from the standard grid layout to TileView. This video explains tile template configuration, including how to add bound and unbound elements and position them within the template.

Watch on YouTube

TileView Layout & Appearance

See how to add items to tiles, arrange them freely, and configure their appearance.

Watch on YouTube

Service Columns & Tile Customization

See how to group data in TileView, enable or disable tiles based on field values, and handle events to customize tiles.

Watch on YouTube