Custom Painting Samples

Apr 11, 2022
5 minutes to read

The elements in the vertical grids (VGridControl and PropertyGridControl) can be manually painted by handling custom draw events. This topic provides examples which demonstrate how to use these events. For general information on custom painting, see the Custom Painting Overview topic. Elements that can be custom painted are listed in the Elements that can be Custom Painted topic.

There are two main scenarios for which custom draw events are normally used:

To paint elements in their entirety using the drawing methods of the Graphics object.
The information (appearance, contents, bounds) used to draw an element can be modified . This forces the control to paint the element in the default manner but with modified settings.

The subsections below provide examples for each of these cases.

Manual Painting

As mentioned above, the vertical grid’s elements can be painted manually without invoking the default painting mechanism. The event parameter’s CustomDrawEventArgs.Graphics property represents the graphic surface and this provides the drawing methods which you can use to render the grid’s element. To prevent the element’s default painting from being performed set the CustomDrawEventArgs.Handled property to true. This indicates that the event was handled and that no default actions are required. If this property is set to false , the element will be painted using the default drawing mechanism after your event handler has been executed.

The following sample code shows how to handle the VGridControlBase.CustomDrawTreeButton event to custom paint tree buttons. In this example, custom painting is not applied to category expand buttons and they are painted in the default manner. The result is shown in the image below:

C#
VB.NET

csharp

using DevExpress.XtraVerticalGrid;
using DevExpress.XtraVerticalGrid.Events;
// ...

private void vGridControl1_CustomDrawTreeButton(object sender, CustomDrawTreeButtonEventArgs e) {
    VGridControl vGrid = sender as VGridControl;
    if(e.TreeButtonType == TreeButtonType.ExplorerBarButton) return;

    Color bkColor = e.Row == vGrid.FocusedRow ? Color.White : Color.Blue;
    if(e.Expanded)
        e.Cache.FillPolygon(new Point[] { e.Bounds.Location,
        new Point(e.Bounds.Right, e.Bounds.Y),
        new Point(e.Bounds.X + e.Bounds.Width / 2, e.Bounds.Bottom)}, bkColor);
    else
        e.Cache.FillPolygon(new Point[] { e.Bounds.Location,
        new Point(e.Bounds.Right, e.Bounds.Y + e.Bounds.Height / 2),
        new Point(e.Bounds.X, e.Bounds.Bottom)}, bkColor);

    e.Handled = true;
}

Imports DevExpress.XtraVerticalGrid
Imports DevExpress.XtraVerticalGrid.Events
' ...

Private Sub VGridControl1_CustomDrawTreeButton(ByVal sender As Object, ByVal e As _
CustomDrawTreeButtonEventArgs) Handles VGridControl1.CustomDrawTreeButton
   Dim vGrid As VGridControl = TryCast(sender, VGridControl)
    If e.TreeButtonType = TreeButtonType.ExplorerBarButton Then
        Return
    End If

    Dim bkColor As Color = If(e.Row = vGrid.FocusedRow, Color.White, Color.Blue)
    If e.Expanded Then
        e.Cache.FillPolygon(New Point() { e.Bounds.Location, New Point(e.Bounds.Right, e.Bounds.Y), New Point(e.Bounds.X + e.Bounds.Width \ 2, e.Bounds.Bottom)}, bkColor)
    Else
        e.Cache.FillPolygon(New Point() { e.Bounds.Location, New Point(e.Bounds.Right, e.Bounds.Y + e.Bounds.Height \ 2), New Point(e.Bounds.X, e.Bounds.Bottom)}, bkColor)
    End If

    e.Handled = True
End Sub

The next example demonstrates how to draw the currently focused cell. The VGridControlBase.CustomDrawRowValueCell event is handled for this purpose.

The image below shows the result:

C#
VB.NET

csharp

using System.Drawing.Drawing2D;
// ...

private void vGridControl1_CustomDrawRowValueCell(object sender, 
DevExpress.XtraVerticalGrid.Events.CustomDrawRowValueCellEventArgs e) {
    VGridControl vGrid = sender as VGridControl;
    if(e.Row == vGrid.FocusedRow)
        if(e.RecordIndex == vGrid.FocusedRecord &&
                e.CellIndex == vGrid.FocusedRecordCellIndex) {
            e.Cache.DrawRectangle(e.Bounds.X,
                e.Bounds.Y, e.Bounds.Width - 1, e.Bounds.Height - 1, Color.Black, 1);
            using(var backBrush = new LinearGradientBrush(e.Bounds, Color.Yellow, Color.Orange,
                    LinearGradientMode.Vertical))
                e.Cache.FillRectangle(backBrush, e.Bounds.X + 1, e.Bounds.Y + 1, e.Bounds.Width - 2, e.Bounds.Height - 2);
            e.Cache.DrawString(e.CellText, e.Appearance.Font, e.Appearance.GetForeBrush(e.Cache), e.Bounds);
            e.Handled = true;
        }
}

Imports System.Drawing.Drawing2D
' ...

Private Sub VGridControl1_CustomDrawRowValueCell(ByVal sender As Object, _
ByVal e As DevExpress.XtraVerticalGrid.Events.CustomDrawRowValueCellEventArgs) _
Handles VGridControl1.CustomDrawRowValueCell
    Dim vGrid As VGridControl = TryCast(sender, VGridControl)
    If e.Row = vGrid.FocusedRow Then
        If e.RecordIndex = vGrid.FocusedRecord AndAlso e.CellIndex = vGrid.FocusedRecordCellIndex Then
            e.Cache.DrawRectangle(e.Bounds.X, e.Bounds.Y, e.Bounds.Width - 1, e.Bounds.Height - 1, Color.Black, 1)
            Using backBrush = New LinearGradientBrush(e.Bounds, Color.Yellow, Color.Orange, LinearGradientMode.Vertical)
                e.Cache.FillRectangle(backBrush, e.Bounds.X + 1, e.Bounds.Y + 1, e.Bounds.Width - 2, e.Bounds.Height - 2)
            End Using
            e.Cache.DrawString(e.CellText, e.Appearance.Font, e.Appearance.GetForeBrush(e.Cache), e.Bounds)
            e.Handled = True
        End If
    End If
End Sub

Customizing the Display Information of Elements

A vertical grid’s elements can be painted using the default mechanism but with modified settings such as their appearance, display text, image, etc. When handling the custom draw events, you must leave the event parameter’s CustomDrawEventArgs.Handled property set to false. This forces the grid to paint an element in its default manner but with modified settings.

The following example shows how to supply custom appearances to multi-editor row header cells. The VGridControlBase.CustomDrawRowHeaderCell event is handled to apply custom appearance settings to the row header cells of the “Phones” column. The VGridControlBase.CustomDrawRowHeaderIndent event is handled to paint the “Phones” row’s indent with the appearance settings used to paint the first row header cell. The result is shown in the image below:

C#
VB.NET

csharp

using DevExpress.Utils;
using System.Drawing.Drawing2D;
using DevExpress.XtraVerticalGrid;
// ...

AppearanceObject appearanceFax, appearancePhone;
private void Form1_Load(object sender, System.EventArgs e) {
   appearanceFax = new AppearanceObject();
   appearanceFax.BackColor = Color.Orange;
   appearanceFax.BackColor2 = Color.Yellow;
   appearanceFax.ForeColor = Color.DarkRed;
   appearanceFax.GradientMode = LinearGradientMode.Vertical;

   appearancePhone = new AppearanceObject();
   appearancePhone.BackColor = Color.LightSteelBlue;
   appearancePhone.BackColor2 = Color.White;
   appearancePhone.ForeColor = Color.Navy;
   appearancePhone.GradientMode = LinearGradientMode.Vertical;
}

private void vGridControl1_CustomDrawRowHeaderCell(object sender, DevExpress.XtraVerticalGrid.Events.CustomDrawRowHeaderCellEventArgs e) {
   if(e.Row.Name == "Phones")
      if (e.CellIndex == 0)
         e.Appearance.Assign(appearanceFax);
      else
         e.Appearance.Assign(appearancePhone);
   } 
}

private void vGridControl1_CustomDrawRowHeaderIndent(object sender, DevExpress.XtraVerticalGrid.Events.CustomDrawRowHeaderIndentEventArgs e) {
   if(e.Row.Name == "Phones")
      e.Appearance.Assign(appearanceFax);
}

Imports DevExpress.Utils
Imports System.Drawing.Drawing2D
Imports DevExpress.XtraVerticalGrid
' ...

Dim appearanceFax As AppearanceObject
Dim appearancePhone As AppearanceObject
Private Sub Form1_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
   appearanceFax = New AppearanceObject()
   appearanceFax.BackColor = Color.Orange
   appearanceFax.BackColor2 = Color.Yellow
   appearanceFax.ForeColor = Color.DarkRed
   appearanceFax.GradientMode = LinearGradientMode.Vertical

   appearancePhone = New AppearanceObject()
   appearancePhone.BackColor = Color.LightSteelBlue
   appearancePhone.BackColor2 = Color.White
   appearancePhone.ForeColor = Color.Navy
   appearancePhone.GradientMode = LinearGradientMode.Vertical
End Sub

Private Sub VGridControl1_CustomDrawRowHeaderCell(ByVal sender As Object, _
ByVal e As DevExpress.XtraVerticalGrid.Events.CustomDrawRowHeaderCellEventArgs) _
Handles VGridControl1.CustomDrawRowHeaderCell
   If e.Row.Name = "Phones" Then
      If e.CellIndex = 0 Then
         e.Appearance.Assign(appearanceFax)
      Else
         e.Appearance.Assign(appearancePhone)
      End If
   End If
End Sub

Private Sub VGridControl1_CustomDrawRowHeaderIndent(ByVal sender As Object, _
ByVal e As DevExpress.XtraVerticalGrid.Events.CustomDrawRowHeaderIndentEventArgs) _
Handles VGridControl1.CustomDrawRowHeaderIndent
   If e.Row.Name = "Phones" Then
      e.Appearance.Assign(appearanceFax)
   End If
End Sub