How to create the custom themes and apply to the WinForms GridControl?

2 mins read

Customizing visual styles

To create a custom theme, you need to create an object that supports the IVisualStyle interface. After implementing the custom object, you can set the GridVisualStylesDrawing object for the Grid. The attached sample has the customization of the Grid header style.

Creating Custom Visual Style:

The following code example changes the blue header style to pink header style and orange hover color to green hover color by modifying the code from the libraries GridVisualStylesOffice2007Blue class.

public class CustomTheme : IVisualStylesDrawing
{
    private GridVisualStyles visualStyle;
    //Creates a new instance of the CustomTheme class.
    public CustomTheme(GridVisualStyles style)
    {
        this.visualStyle = style;
    }
public void DrawHeaderStyle(Graphics g, Rectangle rect, ThemedHeaderDrawing.HeaderState state)
{            
    //Checks the empty headers
    if (rect.Height == 0 && rect.Width == 0)
        return;
    //Checks the current state of the header and paints the foreground accordingly.
    if (state == ThemedHeaderDrawing.HeaderState.Normal)
    {
        LinearGradientBrush br = new LinearGradientBrush(rect, Color.FromArgb(255, 128, 255), Color.FromArgb(255, 0, 128), LinearGradientMode.Vertical);                     
        g.FillRectangle(br, new Rectangle(rect.X + 1, rect.Y + 1, rect.Width - 2, rect.Height - 2));
        br.Dispose();
    }            
    else
    {               
        LinearGradientBrush br = new LinearGradientBrush(rect, Color.FromArgb(0, 128, 0), Color.FromArgb(128, 255, 128), LinearGradientMode.Vertical);
        g.FillRectangle(br, new Rectangle(rect.X + 1, rect.Y + 1, rect.Width - 2, rect.Height - 2));
        br.Dispose();
    }
}
//IVisualStylesDrawing Members…
}

Public Class CustomTheme 
 Implements IVisualStylesDrawing
 Private visualStyle As GridVisualStyles
 'Creates a new instance of the CustomTheme class.
 Public Sub New(ByVal style As GridVisualStyles)
  Me.visualStyle = style
 End Sub
Public Sub DrawHeaderStyle(ByVal g As Graphics, ByVal rect As Rectangle, ByVal state As ThemedHeaderDrawing.HeaderState)
 'Checks the empty headers
 If rect.Height = 0 AndAlso rect.Width = 0 Then
  Return
 End If
 'Checks the current state of the header and paints the foreground accordingly.
 If state Is ThemedHeaderDrawing.HeaderState.Normal Then
  Dim br As New LinearGradientBrush(rect, Color.FromArgb(255, 128, 255), Color.FromArgb(255, 0, 128), LinearGradientMode.Vertical)
  g.FillRectangle(br, New Rectangle(rect.X + 1, rect.Y + 1, rect.Width - 2, rect.Height - 2))
  br.Dispose()
 Else
  Dim br As New LinearGradientBrush(rect, Color.FromArgb(0, 128, 0), Color.FromArgb(128, 255, 128), LinearGradientMode.Vertical)
  g.FillRectangle(br, New Rectangle(rect.X + 1, rect.Y + 1, rect.Width - 2, rect.Height - 2))
  br.Dispose()
 End If
End Sub
'IVisualStylesDrawing Members…
End Class

Adding the Custom Theme to the GridControl

//Plugs in any custom GridVisualStyle
this.gridControl1.GridVisualStyles = GridVisualStyles.Custom;
this.gridControl1.Model.Options.GridVisualStylesDrawing = new CustomThemes(GridVisualStyles.Custom);

' Plugs in any custom GridVisualStyle
Me.gridControl1.GridVisualStyles = GridVisualStyles.Custom
Me.gridControl1.Model.Options.GridVisualStylesDrawing = New CustomThemes(GridVisualStyles.Custom)

The following screenshot displays the GridControl with the applied custom themes.

Applied custom themes to GridControl