CODEWITHSUNDEEP
c#.netwinforms
learn_code
learn_code

Reputation: 155

Adding image icon to Winform datagridview margin

I wanted to know if and how I could go about adding a tiny image in the margin of a datagridview as shown circled in the image. i.e: each row should have the image in the margin.

Note: I do not want to add a new image column in the datagridview.

enter image description here

Upvotes: 0

Views: 1800

Answers (1)

King King
King King

Reputation: 63327

Try this code, not complete but would be good for you to get started, this will add the same image to all the cells, click on the image will show some message (you can customize this):

    //CellPainting event handler to draw image on cell
    private void dataGridView1_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
    {
        if (e.ColumnIndex > -1 && e.RowIndex > -1 && e.Value != null)
        {
            e.Handled = true;
            e.PaintBackground(e.CellBounds, true);
            e.Graphics.DrawImage(Properties.Resources.YourIMAGE, new Rectangle(e.CellBounds.Left, e.CellBounds.Top + 2, e.CellBounds.Height - 4, e.CellBounds.Height - 4));
            StringFormat sf = new StringFormat() { LineAlignment = StringAlignment.Center };
            e.Graphics.DrawString(e.Value.ToString(), e.CellStyle.Font, new SolidBrush(e.CellStyle.ForeColor), new Rectangle(e.CellBounds.Left + e.CellBounds.Height, e.CellBounds.Top, e.CellBounds.Width - e.CellBounds.Height, e.CellBounds.Height), sf);                
        }
    }
    bool imageClicked;
    private void dataGridView1_CellMouseClick(object sender, DataGridViewCellMouseEventArgs e)
    {
       CheckIfClickOnImage(e);
    }

    private void dataGridView1_CellMouseDoubleClick(object sender, DataGridViewCellMouseEventArgs e)
    {
        CheckIfClickOnImage(e);
    }
    private void CheckIfClickOnImage(DataGridViewCellMouseEventArgs e){
       Rectangle rect = dataGridView1[e.ColumnIndex, e.RowIndex].ContentBounds;
        rect.Offset(-rect.Width + rect.Height + 4, 2);
        rect.Location.Offset(0, 2);
        if (rect.Contains(e.Location))
        {
            imageClicked = true;
            MessageBox.Show(string.Format("You clicked on the image of the cell({0},{1})", e.ColumnIndex, e.RowIndex));
        }
    }
    //Clicking on a cell sometimes makes the clicked cell be in edit mode. So we can avoid this using some kind of flag
    private void dataGridView1_CellBeginEdit(object sender, DataGridViewCellCancelEventArgs e)
    {
        if (imageClicked)
        {
            e.Cancel = true;
            imageClicked = false;
        }
    }

UPDATE

Your requirement is even much simpler than the code I posted previously, here is the code you need:

private void dataGridView_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
{
        if (e.ColumnIndex == -1 && e.RowIndex > -1)
        {
            e.Handled = true;
            e.PaintBackground(e.CellBounds, true);
            e.Graphics.DrawImage(Properties.Resources.yourIMAGE, new Rectangle(e.CellBounds.Left + 5, e.CellBounds.Top + 5, e.CellBounds.Width - 10, e.CellBounds.Height - 10));                    
        }
}
//To handle the click on a Row header, you can add custom code to a RowHeaderMouseClick event handler
private void dataGridView_RowHeaderMouseClick(object sender, DataGridViewCellMouseEventArgs e)
{
   MessageBox.Show(e.RowIndex.ToString());
}

Upvotes: 2

Related Questions