Show Selected Image in DataGridView with DataGridViewComboBoxColumn?

Question

I have a problem in using DataGridView with DataGridViewComboBoxColumn to let user to select an image from a list of images. Following the discussions in the Question titled "Custom draw of DatagridViewComboBoxColumn" ref Link. I also face the problem as the image is only drawn when the cell is in edit mode. The selected image will disappear when I click somewhere outside the combobox cell! I have implemented the CellPainting event to redraw the image but still cannot solve the problem. I tested the DataGridViewComboBoxColumn with following codes:

    public Form1()
    {
        InitializeComponent();
        .....
        imageList.Images.Add(Properties.Resources.icon_priority_low);
        imageList.Images.Add(Properties.Resources.icon_priority_medium);
        .....
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        .....            
        DataGridViewComboBoxCell dgvcbc = (DataGridViewComboBoxCell)newDataGridView1.Rows[0].Cells[1];
        dgvcbc.Items.Add("test0");
        dgvcbc.Items.Add("test1");
        .....        
    }

     private void newDataGridView1_EditingControlShowing(object sender, DataGridViewEditingControlShowingEventArgs e)
    {
        if (e.Control is ComboBox)
        {
            ComboBox theCB = (ComboBox)e.Control;
            theCB.DrawMode = DrawMode.OwnerDrawFixed;
            try
            {
                theCB.DrawItem -= combobox1_DrawItem;
            }
            catch { }
            theCB.DrawItem += combobox1_DrawItem;
        }
    }

    private void combobox1_DrawItem(object sender, DrawItemEventArgs e)
    {
        Graphics g = e.Graphics;
        Brush br = SystemBrushes.WindowText;
        Brush brBack;
        Rectangle rDraw;
        bool bSelected = e.State == DrawItemState.Selected;
        bool bValue = e.State == DrawItemState.ComboBoxEdit;

        if ((e.Index < 0) || (columnIndex != 1))
            return;

        rDraw = e.Bounds;
        rDraw.Inflate(-1, -1);

        int x, y;

        x = e.Bounds.Left + 25;
        y = e.Bounds.Top + 1;
        int midX = (int)(e.Bounds.Width / 2) + e.Bounds.Left;

        // Show image and ignore text.
        g.DrawImage(imageList.Images[e.Index], new Rectangle(midX - 6, y + 2, 12, 12));                     
    }

    private void newDataGridView1_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
    {
        if (columnIndex != 1)
            return;

        Graphics g = e.Graphics;
        Rectangle rDraw = newDataGridView1.GetCellDisplayRectangle(columnIndex, rowIndex, true);

        e.PaintBackground(e.ClipBounds, true);
        e.PaintContent(e.ClipBounds);

        using (Brush backColorBrush = new SolidBrush(e.CellStyle.BackColor))
        {
            int y = rDraw.Y + 1;
            int midX = (int)(rDraw.Width / 2) + rDraw.X;

            g.DrawImage(imageList.Images[0], new Rectangle(midX - 6, y + 2, 12, 12));

            e.PaintContent(e.ClipBounds);
            e.Handled = true;
        }
    }
}

The cell will show "test0" instead of the Images[0] if I click on other cells of the DataGridView. Would you please help to solve this problem. Thanks a lot.

Bioukh Bioukh · Accepted Answer · 2015-08-31T08:39:31

The last call to PaintContent() erases your drawn image.

You must paint the cell (but not the foreground) before you draw the image. It would look like this :

private void newDataGridView1_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
{
    if (columnIndex != 1)
        return;

    Graphics g = e.Graphics;
    Rectangle rDraw = newDataGridView1.GetCellDisplayRectangle(columnIndex, rowIndex, true);

    e.Paint(e.CellBounds, e.PaintParts & ~DataGridViewPaintParts.ContentForeground);

    int y = rDraw.Y + 1;
    int midX = (int)(rDraw.Width / 2) + rDraw.X;

    g.DrawImage(imageList.Images[0], new Rectangle(midX - 6, y + 2, 12, 12));

    e.Handled = true;
}

Show Selected Image in DataGridView with DataGridViewComboBoxColumn?

1 Answers