How to: Paint the sort and filter buttons when custom painting

  • 2 minutes to read

The following code shows how to paint column headers in a custom manner, and then draw the standard filter and sort buttons using the default painting mechanism. To custom paint column headers, the GridView.CustomDrawColumnHeader event is handled.

The following image shows the result (the GridControl, and so the sort and filter buttons are painted using the Caramel skin):


using DevExpress.XtraGrid.Columns;

// Specify custom colors that will be used to fill column headers
Random rand = new Random();
foreach(GridColumn column in gridView1.Columns) {
    column.AppearanceHeader.BackColor = Color.FromArgb(rand.Next(0, 255), 
       rand.Next(255), rand.Next(255));
    column.AppearanceHeader.BackColor2 = Color.FromArgb(rand.Next(0, 255), 
       rand.Next(255), rand.Next(255));
gridView1.CustomDrawColumnHeader += 
    new ColumnHeaderCustomDrawEventHandler(gridView1_CustomDrawColumnHeader);

void gridView1_CustomDrawColumnHeader(object sender, ColumnHeaderCustomDrawEventArgs e) {
    if (e.Column == null) return;
    Rectangle rect = e.Bounds;
    Brush brush =
        e.Cache.GetGradientBrush(rect, e.Column.AppearanceHeader.BackColor, 
        e.Column.AppearanceHeader.BackColor2, e.Column.AppearanceHeader.GradientMode);
    rect.Inflate(-1, -1);
    // Fill column headers with the specified colors.
    e.Cache.FillRectangle(brush, rect);
    e.Appearance.DrawString(e.Cache, e.Info.Caption, e.Info.CaptionRect);
    // Draw the filter and sort buttons.
    foreach (DevExpress.Utils.Drawing.DrawElementInfo info in e.Info.InnerElements) {
        if (!info.Visible) continue;
        DevExpress.Utils.Drawing.ObjectPainter.DrawObject(e.Cache, info.ElementPainter, 
    e.Handled = true;