windowsforms-114728-controls-and-libraries-data-grid-views-tile-view.md
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.
GridControl from the Toolbox onto a Form.GridControl to a data source and create columns.GridView) and convert it to TileView.TileView uses templates to generate tiles. A tile template defines the layout and appearance of UI elements within a tile.
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:
The code snippet creates the following tile template:
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;
}
}
}
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
TileView supports HTML/CSS templates.
Use the TileHtmlTemplate property to assign an HTML 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.
ImagesUse the `` tag to display images. See the following help topic for more information: HTML-CSS Templates - Images.ButtonsUse 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:
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:
TileViewItemElement tileElementID = new TileViewItemElement() {
ColumnIndex = 1,
RowIndex = 0,
Text = "ID",
TextAlignment = TileItemContentAlignment.MiddleCenter
};
tileView1.TileTemplate.Add(tileElementID);
Dim tileElementID As TileViewItemElement = New TileViewItemElement()
tileElementID.ColumnIndex = 1
tileElementID.RowIndex = 0
tileElementID.Text = "ID"
tileElementID.TextAlignment = TileItemContentAlignment.MiddleCenter
tileView1.TileTemplate.Add(tileElementID)
Tile elements are centered both vertically and horizontally within their cells.
Use the following properties to align tile elements:
Align within a cellUse the TileItemElement.TextAlignment property for text and the TileItemElement.ImageAlignment property for images.Align relative to another tile elementUse TileItemElement.AnchorElement and TileItemElement.AnchorAlignment properties.
To align text relative to an image within the same element, use the TileItemElement.ImageOptions.ImageToTextAlignment property.
Tile View supports three layout modes:
DefaultTiles 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.
ListTiles 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:
tileView1.OptionsTiles.LayoutMode = TileViewLayoutMode.Kanban;
tileView1.ColumnSet.GroupColumn = tileView1.Columns["Country"];
TileView1.OptionsTiles.LayoutMode = TileViewLayoutMode.Kanban
TileView1.ColumnSet.GroupColumn = TileView1.Columns("Country")
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.
| |
|
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.
|
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.
Note
Automatic tile height calculation is not supported in Server Mode.
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.
tileView1.ColumnSet.CheckedColumn = tileView1.Columns["IsSelected"];
TileView1.ColumnSet.CheckedColumn = TileView1.Columns("IsSelected")
Users can right-click tiles to toggle their checked state. Handle the following events in response:
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:
tileView1.ColumnSet.EnabledColumn = tileView1.Columns["IsEnabled"];
TileView1.ColumnSet.EnabledColumn = TileView1.Columns("IsEnabled")
TileView can display background images for individual tiles. Assign a grid column that contains images to the TileView.ColumnSet.BackgroundImageColumn property:
tileView1.ColumnSet.BackgroundImageColumn = tileView1.Columns["BackgroundImage"];
TileView1.ColumnSet.BackgroundImageColumn = TileView1.Columns("BackgroundImage")
Use the following properties to customize image layout:
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”:
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"];
}
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.
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:
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";
}
}
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:
TileView supports the following editing options:
<input> tags to enable in-place editing in tiles.See the following help topic for more information: Tile Editing.
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:
tileView1.ColumnSet.GroupColumn = tileView1.Columns["Country"];
TileView1.ColumnSet.GroupColumn = TileView1.Columns("Country")
Related API
Set the TileView.OptionsSelection.MultiSelect property to true to enable multiple tile selection.
tileView1.OptionsSelection.MultiSelect = true;
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.
tileView1.OptionsSelection.AllowMarqueeSelection = true;
TileView1.OptionsSelection.AllowMarqueeSelection = True
Related API
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:
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.
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:
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);
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.
Use the TileView.Appearance property to specify appearance settings for all tiles and tile elements.
Handle the TileView.ItemCustomize event to override default settings for specific tiles. Use the e.Item.AppearanceItem property to modify tile item appearance settings.
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.
Handle the TileView.CustomDrawTile event to take full control over tile rendering.
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:
To create conditional formats at design time:
+ button to add a new format rule.The following code snippet creates a conditional formatting rule to highlight products that are out of stock (UnitStock = 0):
// 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);
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)
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.
TileView Layout & Appearance
See how to add items to tiles, arrange them freely, and configure their appearance.
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.
See Also
Get Started With Data Grid and Views
Tutorial: Tile View - Element Layout and Appearance
Tutorial: Tile View - Service Columns and Dynamic Tile Customization
How to avoid data conflicts when users drag cards of a TileView connected to a SQL source