windowsforms-devexpress-dot-xtragrid-dot-views-dot-tile-dot-tileview-0f819045.md
Allows you to draw tiles manually.
Namespace : DevExpress.XtraGrid.Views.Tile
Assembly : DevExpress.XtraGrid.v25.2.dll
NuGet Packages : DevExpress.Win.Grid, DevExpress.Win.Navigation
[DXCategory("CustomDraw")]
public event EventHandler<TileViewItemCustomDrawEventArgs> CustomDrawTile
<DXCategory("CustomDraw")>
Public Event CustomDrawTile As EventHandler(Of TileViewItemCustomDrawEventArgs)
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. |
The following code snippet demonstrates the default drawing algorithm:
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;
}
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;
}
See Also