TileView.TileTemplate Property

Specifies the default template from which tiles are generated.

Namespace: DevExpress.XtraGrid.Views.Tile

Assembly: DevExpress.XtraGrid.v21.1.dll

NuGet Packages: DevExpress.Win.Design, DevExpress.Win.Grid

Declaration

C#

[Browsable(false)]
[DXCategory("Properties")]
public TileItemElementCollection TileTemplate { get; }

VB.NET

<Browsable(False)>
<DXCategory("Properties")>
Public ReadOnly Property TileTemplate As TileItemElementCollection

Property Value

Type	Description
TileItemElementCollection	A TileItemElementCollection object that is the template applied to all TileViewItems in this TileView.

Remarks

All tiles within a TileView are generated from a template specified by the TileTemplate property. Handle the TileView.CustomItemTemplate event to generate individual tiles from other templates.

To create a tile template at design time, use the Data Grid Designer’s Tile Template page.

See Create Tile Template for more information.

Handle the TileView.ItemCustomize event to dynamically customize the appearance of individual tiles.

Example

The following code sets up the default tile template that consists of two rows and two columns. The first column’s cells are merged. Three tile elements are positioned within cells to form the following layout:

C#

using DevExpress.XtraEditors;
using DevExpress.XtraEditors.TableLayout;
using DevExpress.XtraGrid.Views.Tile;

private void InitTileTemplate() {
    // Set the tile size.
    tileView1.OptionsTiles.ItemSize = new System.Drawing.Size(196, 70);

    // Create a table layout (columns and rows) for the Tile Template.
    TableColumnDefinition tableColumn1 = new TableColumnDefinition();
    TableColumnDefinition tableColumn2 = new TableColumnDefinition();
    TableRowDefinition tableRow1 = new TableRowDefinition();
    TableRowDefinition talbeRow2 = new TableRowDefinition();
    tableColumn1.Length.Value = 82;
    tableColumn2.Length.Value = 132;
    tileView1.TileColumns.Add(tableColumn1);
    tileView1.TileColumns.Add(tableColumn2);
    tileView1.TileRows.Add(tableRow1);
    tileView1.TileRows.Add(talbeRow2);
    // Create a TableSpan object to merge cells.
    TableSpan tableSpan1 = new TableSpan();
    tableSpan1.RowIndex = 0;
    tableSpan1.ColumnIndex = 0;
    tableSpan1.RowSpan = 2;
    tileView1.TileSpans.Add(tableSpan1);

    // Create the Tile Template's elements.
    TileViewItemElement tileElementFirstName = new TileViewItemElement();
    TileViewItemElement tileElementCity = new TileViewItemElement();
    TileViewItemElement tileElementPhoto = new TileViewItemElement();

    tileElementFirstName.Column = tileView1.Columns["FirstName"];
    tileElementFirstName.ColumnIndex = 1;
    tileElementFirstName.ImageOptions.ImageAlignment = TileItemContentAlignment.MiddleCenter;
    tileElementFirstName.ImageOptions.ImageScaleMode = TileItemImageScaleMode.Squeeze;
    tileElementFirstName.TextAlignment = DevExpress.XtraEditors.TileItemContentAlignment.MiddleCenter;
    tileElementCity.Column = tileView1.Columns["City"];
    tileElementCity.ColumnIndex = 1;
    tileElementCity.ImageOptions.ImageAlignment = TileItemContentAlignment.MiddleCenter;
    tileElementCity.ImageOptions.ImageScaleMode = TileItemImageScaleMode.Squeeze;
    tileElementCity.RowIndex = 1;
    tileElementCity.TextAlignment = DevExpress.XtraEditors.TileItemContentAlignment.MiddleCenter;
    tileElementPhoto.Column = tileView1.Columns["Photo"];
    tileElementPhoto.ImageOptions.ImageAlignment = TileItemContentAlignment.MiddleCenter;
    tileElementPhoto.ImageOptions.ImageScaleMode = TileItemImageScaleMode.Squeeze;
    tileElementPhoto.TextAlignment = TileItemContentAlignment.MiddleCenter;
    tileView1.TileTemplate.Add(tileElementFirstName);
    tileView1.TileTemplate.Add(tileElementCity);
    tileView1.TileTemplate.Add(tileElementPhoto);
}

VB.NET

Imports DevExpress.XtraEditors
Imports DevExpress.XtraEditors.TableLayout
Imports DevExpress.XtraGrid.Views.Tile

Private Sub InitTileTemplate()
    ' Set the tile size.
    tileView1.OptionsTiles.ItemSize = New System.Drawing.Size(196, 70)

    ' Create a table layout (columns and rows) for the Tile Template.
    Dim tableColumn1 As TableColumnDefinition = New TableColumnDefinition()
    Dim tableColumn2 As TableColumnDefinition = New TableColumnDefinition()
    Dim tableRow1 As TableRowDefinition = New TableRowDefinition()
    Dim talbeRow2 As TableRowDefinition = New TableRowDefinition()
    tableColumn1.Length.Value = 82
    tableColumn2.Length.Value = 132
    tileView1.TileColumns.Add(tableColumn1)
    tileView1.TileColumns.Add(tableColumn2)
    tileView1.TileRows.Add(tableRow1)
    tileView1.TileRows.Add(talbeRow2)
    ' Create a TableSpan object to merge cells.
    Dim tableSpan1 As TableSpan = New TableSpan()
    tableSpan1.RowIndex = 0
    tableSpan1.ColumnIndex = 0
    tableSpan1.RowSpan = 2
    tileView1.TileSpans.Add(tableSpan1)

    ' Create the Tile Template's elements.
    Dim tileElementFirstName As TileViewItemElement = New TileViewItemElement()
    Dim tileElementCity As TileViewItemElement = New TileViewItemElement()
    Dim tileElementPhoto As TileViewItemElement = New TileViewItemElement()

    tileElementFirstName.Column = tileView1.Columns("FirstName")
    tileElementFirstName.ColumnIndex = 1
    tileElementFirstName.ImageOptions.ImageAlignment = TileItemContentAlignment.MiddleCenter
    tileElementFirstName.ImageOptions.ImageScaleMode = TileItemImageScaleMode.Squeeze
    tileElementFirstName.TextAlignment = DevExpress.XtraEditors.TileItemContentAlignment.MiddleCenter
    tileElementCity.Column = tileView1.Columns("City")
    tileElementCity.ColumnIndex = 1
    tileElementCity.ImageOptions.ImageAlignment = TileItemContentAlignment.MiddleCenter
    tileElementCity.ImageOptions.ImageScaleMode = TileItemImageScaleMode.Squeeze
    tileElementCity.RowIndex = 1
    tileElementCity.TextAlignment = DevExpress.XtraEditors.TileItemContentAlignment.MiddleCenter
    tileElementPhoto.Column = tileView1.Columns("Photo")
    tileElementPhoto.ImageOptions.ImageAlignment = TileItemContentAlignment.MiddleCenter
    tileElementPhoto.ImageOptions.ImageScaleMode = TileItemImageScaleMode.Squeeze
    tileElementPhoto.TextAlignment = TileItemContentAlignment.MiddleCenter
    tileView1.TileTemplate.Add(tileElementFirstName)
    tileView1.TileTemplate.Add(tileElementCity)
    tileView1.TileTemplate.Add(tileElementPhoto)
End Sub