Draw image in the DataGridView header by text's side

Question

I'm trying to draw an image in the DataGridView header by text's side. I can draw the imagem but it loss resolution. Why?

before:

after (on the DataGridView header):

I tried to resize it but it doesn't make difference. Also, I want to keep the header's text and place the image on text's right side. How do I do that?

I'm doing the following:

   private void dataGridView1_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
        {
            if (e.ColumnIndex == 0 && e.RowIndex == -1)
            {

                // original image size is 96x96 px
                Image img = ScaleImage(imageList1.Images[0], 32, 32);
                var s = e.CellBounds;
                s.Height = img.Height;
                s.Width = img.Width;
                e.Paint(s, DataGridViewPaintParts.All & ~DataGridViewPaintParts.ContentForeground);
                e.Graphics.DrawImage(img, s);
                e.Handled = true;
            }
        }


    //code taken from: http://stackoverflow.com/questions/6501797/resize-image-proportionally-with-maxheight-and-maxwidth-constraints
    // all credits to @Alex Aza
    public Image ScaleImage(Image image, int maxWidth, int maxHeight)
    {
        var ratioX = (double)maxWidth / image.Width;
        var ratioY = (double)maxHeight / image.Height;
        var ratio = Math.Min(ratioX, ratioY);

        var newWidth = (int)(image.Width * ratio);
        var newHeight = (int)(image.Height * ratio);

        var newImage = new Bitmap(newWidth, newHeight);
        Graphics.FromImage(newImage).DrawImage(image, 0, 0, newWidth, newHeight);
        return newImage;
    }

So my question is: how do I draw the image so that it doesn't loss resolution and keep the header's text?

Answer 1

You can use something like this for a DataGridView DGV:

private void DGV_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
{
    if (e.ColumnIndex == yourColumn && e.RowIndex == -1)
    {
       DGV.ColumnHeadersHeight = 32;  // or maybe a little more..
       // should be prepared, maybe in an imagelist!!
       Image img = Image.FromFile("D:\\dollars96.png");
       Rectangle r32 = new Rectangle(e.CellBounds.Left + e.CellBounds.Width - 32, 0, 32,32);
       Rectangle r96 = new Rectangle(0, 0, 96,96);
       string header = DGV.Columns[e.ColumnIndex].HeaderText;
       e.PaintBackground(e.CellBounds, true);  // or maybe false ie no selection?
       e.PaintContent(e.CellBounds);  

       e.Graphics.DrawImage(img, r32, r96, GraphicsUnit.Pixel);

       e.Handled = true;
    }
    // any other cell: let the system do its thing
    else e.Handled = false;
}

You may want to check the settings of your ImageList; the defaults are rather low-quality!. You can set them to 32x32 right there, btw. Do upgrade the ColorDepth!

Answer 2

I'm guessing that the ImageLayout property for your DataGridViewImageColumn is set wrong.