Remove sorting arrow in datagridview header and put the text in the center of the box

user_7350425 0
Viewed 2158

I am working on a project which required header text to be in the center, and when click the header it will do the sorting. But the problem is, there is a sorting arrow icon, even when its not showing it push the text to the left. What i want to achieve is

-removing the sorting arrow and put the text to the center but still keep the sorting function

p/s: i tried handle cell event paint and repaint everything in headercell except for .contentbackground the arrow gone but the text is still pushed to the left. here is the code:

void dataGridView1_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
{
    if (e.RowIndex == -1)
    {
        e.Paint(e.CellBounds, DataGridViewPaintParts.All &~DataGridViewPaintParts.ContentBackground);

        e.Handled = true;
    }
}

-keep the sorting arrow but always show it

i am working with vb .net but code in c# is fine

how the header is right now

header before click on

header after click on

how i want the header to look like

enter image description here

thank you very much

datagridview vb.net winforms .net c#
1 Answers

For aligning column header text at the middle, you can rely on DataGridView properties. But for custom sort icon, you need custom paint.

To set column header text alignment:

  • Set Alignment property of the ColumnHeadersDefaultCellStyle to MiddleCenter.

To paint custom sort icon:

  • Handle the CellPainting event and check if we are painting the header:

    if (e.RowIndex == -1) //It's header cell

  • Paint cell background

    e.PaintBackground(e.CellBounds, false);

  • Paint content foreground (text):

    e.Paint(e.CellBounds, DataGridViewPaintParts.ContentForeground);

  • Paint custom sort glyph using DrawImage or by drawing a suitable character:

    if (grid.SortedColumn?.Index == e.ColumnIndex)
{
    var sortIcon = grid.SortOrder == SortOrder.Ascending ? "▲":"▼";

    //Just for example I rendered a character, you can draw an image.
    TextRenderer.DrawText(e.Graphics, sortIcon,
        e.CellStyle.Font, e.CellBounds, sortIconColor,
        TextFormatFlags.VerticalCenter | TextFormatFlags.Right);
}

  • Stop default paint

    e.Handled = true;

Note - Draw Visual Styles Sort Icon

  • If you wanted to draw default sort icon:

    e.Paint(e.CellBounds, DataGridViewPaintParts.ContentBackground);

  • Just as an example, drawing visual style sort icon:

    if (grid.SortedColumn?.Index == e.ColumnIndex)
{
    var sortIcon = grid.SortOrder == SortOrder.Ascending ?
        VisualStyleElement.Header.SortArrow.SortedUp : 
        VisualStyleElement.Header.SortArrow.SortedDown;
    var renderer = new VisualStyleRenderer(sortIcon);
    var size = renderer.GetPartSize(e.Graphics, ThemeSizeType.Draw);
    renderer.DrawBackground(e.Graphics,
        new Rectangle(e.CellBounds.Right - size.Width,
        e.CellBounds.Top, size.Width, e.CellBounds.Height));
}
user_31108340
Related