We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the sort icon in WinForms GridControl?

Platform: WinForms |
Control: GridControl |
Published Date: May 4, 2016 |
Last Revised Date: December 16, 2019
Tags: sorting, custom, icon

Customize the sort icon

To customize the sort icon in GridControl, the below two options based on which theme that have applied to the grid.

Solution 1:

If you are using Metro theme for your application, then you can simply use the GridMetroColors class for customizing sort icon colors as per the below code example.

C#

GridMetroColors colors = new GridMetroColors();
colors.SortIconColor.HoverSortIconColor = Color.Red;
colors.SortIconColor.NormalSortIconColor = Color.Red;
this.gridControl1.SetMetroStyle(colors);

 

VB

Dim colors As New GridMetroColors()
colors.SortIconColor.HoverSortIconColor = Color.Red
colors.SortIconColor.NormalSortIconColor = Color.Red
Me.gridControl1.SetMetroStyle(colors)

 

Applied metro theme

Solution 2:

If you are using other office themes for grid, you can customize the sort icon by using DrawCell event.

C#

void gridControl1_DrawCell(object sender, GridDrawCellEventArgs e)
{
    e.Cancel = true;
    e.Renderer.Draw(e.Graphics, e.Bounds, e.RowIndex, e.ColIndex, e.Style);
    if (e.Style.Tag != null)
    {
        string s = e.Style.ValueMember;
        ListSortDirection listSortDirection = (ListSortDirection)e.Style.Tag;
        int dig = (!string.IsNullOrEmpty(s) && s.Length > 1) ? 2 : 1;
        Rectangle rect = new Rectangle(e.Bounds.X + e.Bounds.Width / 3, e.Bounds.Y, e.Bounds.Width, e.Bounds.Height);// e.Bounds;
        rect = GridUtil.CenterInRect(rect, new Size(8 * dig, 8));
        int i2 = Math.Max(0, (rect.Height - 6) / 2);
        rect.Inflate(-i2, -i2);
        rect.Offset(7, 0);
        Pen pen1 = new Pen(Color.Red);
        GridTriangleDirection triangleDirection = listSortDirection == ListSortDirection.Ascending ? GridTriangleDirection.Down : GridTriangleDirection.Up;
        GridPaintTriangle.Paint(e.Graphics, rect, triangleDirection, Brushes.Red, pen1, true);
        pen1.Dispose();
    }
}

 

VB

Private Sub gridControl1_DrawCell(ByVal sender As Object, ByVal e As GridDrawCellEventArgs)
 e.Cancel = True
 e.Renderer.Draw(e.Graphics, e.Bounds, e.RowIndex, e.ColIndex, e.Style)
 If e.Style.Tag IsNot Nothing Then
  Dim s As String = e.Style.ValueMember
  Dim listSortDirection As ListSortDirection = CType(e.Style.Tag, ListSortDirection)
  Dim dig As Integer = If(((Not String.IsNullOrEmpty(s)) AndAlso s.Length > 1), 2, 1)
  Dim rect As New Rectangle(e.Bounds.X + e.Bounds.Width \ 3, e.Bounds.Y, e.Bounds.Width, e.Bounds.Height) ' e.Bounds;
  rect = GridUtil.CenterInRect(rect, New Size(8 * dig, 8))
  Dim i2 As Integer = Math.Max(0, (rect.Height - 6) / 2)
  rect.Inflate(-i2, -i2)
  rect.Offset(7, 0)
  Dim pen1 As New Pen(Color.Red)
  Dim triangleDirection As GridTriangleDirection = If(listSortDirection = ListSortDirection.Ascending, GridTriangleDirection.Down, GridTriangleDirection.Up)
  GridPaintTriangle.Paint(e.Graphics, rect, triangleDirection, Brushes.Red, pen1, True)
  pen1.Dispose()
 End If
End Sub

 

Applied office theme for grid

Samples:

C#: CustomSortIcon_C#

VB: CustomSortIcon_VB

Reference link: https://help.syncfusion.com/windowsforms/grid-control/visual-styles

2X faster development

The ultimate WinForms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon