TileView.CustomDrawTile Event

Allows you to draw tiles manually.

Namespace: DevExpress.XtraGrid.Views.Tile

Assembly: DevExpress.XtraGrid.v24.2.dll

Declaration

C#

[DXCategory("CustomDraw")]
public event EventHandler<TileViewItemCustomDrawEventArgs> CustomDrawTile

VB.NET

<DXCategory("CustomDraw")>
Public Event CustomDrawTile As EventHandler(Of TileViewItemCustomDrawEventArgs)

Event Data

The CustomDrawTile event's data class is TileViewItemCustomDrawEventArgs. The following properties provide information specific to this event:

Property	Description
Appearance	Gets appearance settings for the painted tile. Inherited from TileCustomDrawEventArgs.
Bounds	Gets or sets tile bounds. Inherited from TileCustomDrawEventArgs.
Cache	Gets an object that stores the most used pens, fonts, and brushes. Inherited from TileCustomDrawEventArgs.
DefaultSelectionBounds	Gets the default bounds of the selection rectangle. Inherited from TileCustomDrawEventArgs.
DefaultSelectionColor	Gets the default color of the selection rectangle. Inherited from TileCustomDrawEventArgs.
DefaultSelectionWidth	Gets the default thickness of the selection rectangle. Inherited from TileCustomDrawEventArgs.
DrawingProcess	Gets the stage of the drawing process.
Handled	Gets or sets whether to skip the default painting. Inherited from TileCustomDrawEventArgs.
IsDisabled	Gets the disabled state of the processed tile. Inherited from TileCustomDrawEventArgs.
IsFocused	Gets the focused state of the processed tile.
IsHovered	Gets the hovered state of the processed tile. Inherited from TileCustomDrawEventArgs.
IsSelected	Gets the selection state of the processed tile. Inherited from TileCustomDrawEventArgs.
Item	Gets the processed tile.
RowHandle	Gets the row handle of the processed tile.
ShouldDrawBackground	Gets whether the tile should display a background. Inherited from TileCustomDrawEventArgs.
ShouldDrawBorder	Gets whether the tile should display a border. Inherited from TileCustomDrawEventArgs.
ShouldDrawCheckMark	Gets whether the tile should display a check mark. Inherited from TileCustomDrawEventArgs.
ShouldDrawContent	Gets whether the tile should display content. Inherited from TileCustomDrawEventArgs.
ShouldDrawDisabledOverlay	Gets whether the tile should display a disabled overlay. Inherited from TileCustomDrawEventArgs.
ShouldDrawHoveredOverlay	Gets whether the tile should display a hovered overlay. Inherited from TileCustomDrawEventArgs.
TileViewEmptySpaceBackColor	Gets the Tile View background.

The event data class exposes the following methods:

Method	Description
DefaultDraw()	Draws the processed tile element in its default appearance. Inherited from TileCustomDrawEventArgs.
DrawBackground()	Draws the tile background in its default appearance. Inherited from TileCustomDrawEventArgs.
DrawBorder()	Draws the tile border in its default appearance. Inherited from TileCustomDrawEventArgs.
DrawCheckMark()	Draws the tile check mark in its default appearance. Inherited from TileCustomDrawEventArgs.
DrawContent()	Draws tile content in its default appearance. Inherited from TileCustomDrawEventArgs.
DrawDisabledOverlay()	Draws the overlay for the disabled state in its default appearance. Inherited from TileCustomDrawEventArgs.
DrawHoveredOverlay()	Draws the overlay for the hovered state in its default appearance. Inherited from TileCustomDrawEventArgs.
DrawHtml(HtmlTemplate, DxHtmlPainterContext, Action<DxHtmlPainterArgs>)	Paints the specified HTML template inside the processed tile element. The context parameter allows you to assign an object that transfers mouse events to template elements. Inherited from TileCustomDrawEventArgs.
DrawHtml(HtmlTemplate, Action<DxHtmlPainterArgs>)	Paints the specified HTML template inside the processed tile element. Inherited from TileCustomDrawEventArgs.

Remarks

The following code snippet demonstrates the default drawing algorithm:

C#

void tileView1_CustomDrawTile(object sender, TileViewItemCustomDrawEventArgs e) {
    switch (e.DrawingProcess) {
        case TileViewItemCustomDrawProcess.DrawTile:
            if (e.ShouldDrawBackground)
                e.DrawBackground();
            if (e.ShouldDrawContent)
                e.DrawContent();
            if (e.ShouldDrawHoveredOverlay)
                e.DrawHoveredOverlay();
            if (e.ShouldDrawDisabledOverlay)
                e.DrawDisabledOverlay();
            if (e.ShouldDrawBorder)
                e.DrawBorder();
            if (e.ShouldDrawCheckMark)
                e.DrawCheckMark();
            break;
        case TileViewItemCustomDrawProcess.DrawCheckMark:
            e.DefaultDraw();
            break;
        case TileViewItemCustomDrawProcess.DrawSelection:
            e.DefaultDraw();
            break;
    }
    e.Handled = true;
}

VB.NET

Private Sub tileView1_CustomDrawTile(ByVal sender As Object, ByVal e As TileViewItemCustomDrawEventArgs)
    Select Case e.DrawingProcess
        Case TileViewItemCustomDrawProcess.DrawTile
            If e.ShouldDrawBackground Then e.DrawBackground()
            If e.ShouldDrawContent Then e.DrawContent()
            If e.ShouldDrawHoveredOverlay Then e.DrawHoveredOverlay()
            If e.ShouldDrawDisabledOverlay Then e.DrawDisabledOverlay()
            If e.ShouldDrawBorder Then e.DrawBorder()
            If e.ShouldDrawCheckMark Then e.DrawCheckMark()
        Case TileViewItemCustomDrawProcess.DrawCheckMark
            e.DefaultDraw()
        Case TileViewItemCustomDrawProcess.DrawSelection
            e.DefaultDraw()
    End Select

    e.Handled = True
End Sub

ShouldDraw... conditions allow you to modify specific tile elements.

The following demo uses the CustomDrawTile event to render HTML and CSS templates inside tiles:

Run Demo: Tile View - CustomDrawTile Event

DxHtmlPainterContext context = new DxHtmlPainterContext();

tileView1.CustomDrawTile += (s, e) => {
    SampleData obj = tileView1.GetRow(e.RowHandle) as SampleData;
    if (obj.Hidden) {
        if (e.DrawingProcess == TileViewItemCustomDrawProcess.DrawTile) {
            e.DrawBackground();
            e.DrawHtml(htmlTemplate, context, (args) => args.InteractivityKey = obj.ID);
            e.DrawBorder();
            e.Handled = true;
        }
    }
};

<div class="tile">
    <div class="text"><strong>Content of this tile is hidden</strong></div>
    <div class="show-action">Show content</div>
</div>

.tile {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.show-action {
    color: deepskyblue;
    text-decoration: underline;
    cursor: pointer;
}
    .show-action:hover {
        color: lightskyblue;
    }