DataGridView Image for Button Column

Question

I'm trying to add a clickable image/button to a datagridview button column.

The image/button will be an icon for play or stop. If the user clicks the play button a service on the system is started, if the user clicks the stop button a service is stopped.

I already have written functions for starting and stopping the service. What I'm having difficulty with is getting the button/image to show up in the datagrid and making it clickable.

Here's what I have for code:

this.dgrdServices.RowPrePaint +=new DataGridViewRowPrePaintEventHandler(dgv_RowPrePaint);
this.dgrdServices.Rows.Add();
this.dgrdServices.Rows[0].Cells[0].Value = Image.FromFile(@"C:\users\brad\desktop\green-dot.gif"); 
this.dgrdServices.Rows[0].Cells[1].Value = "MyServer";
this.dgrdServices.Rows[0].Cells[2].Value = "MyService";
this.dgrdServices.Rows[0].Cells[3].Value = "Started";
this.dgrdServices.Rows[0].Cells[4].Value = new DataGridViewButtonCell();
this.dgrdServices.Rows[0].Cells[5].Value = "Uninstall";

I can't work out if it would be better to use a button which is an image or an just an image that's clickable. I also can't get a button to show up correctly.

Thanks Brad

Answer 1

Show Image On Button

You can add a DataGridViewButtonColumn, then handle CellPainting event of the grid and check if the event is raised for your button column, then draw an image on it. At the end of event, don't forget to set e.Handled = true;.

In the below code I suppose you have an image resource like someImage:

private void grid_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
{
    if (e.RowIndex < 0)
        return;

    //I supposed your button column is at index 0
    if (e.ColumnIndex == 0)
    {
        e.Paint(e.CellBounds, DataGridViewPaintParts.All);

        var w = Properties.Resources.SomeImage.Width;
        var h = Properties.Resources.SomeImage.Height;
        var x = e.CellBounds.Left + (e.CellBounds.Width - w) / 2;
        var y = e.CellBounds.Top + (e.CellBounds.Height - h) / 2;

        e.Graphics.DrawImage(someImage, new Rectangle(x, y, w, h));
        e.Handled = true;
    }
}

Show Image Without Button

To show a single image on all rows including new row, you can set the Image property of DataGridViewImageColumn. This way the image will be shown in that column on for all rows:

dataGridView1.Columns.Add(new DataGridViewImageColumn(){
    Image = someImage, Name = "someName", HeaderText = "Some Text"
});

Also if you may want to have different images for cells, you can set the formatted value of DataGridViewImageColumn in CellFormatting event:

void grid_CellFormatting(object sender, DataGridViewCellFormattingEventArgs e)
{
    if (e.RowIndex < 0)
        return;

    //I supposed the image column is at index 1
    if (e.ColumnIndex == 1)
        e.Value = someImage;
}

You also can set Image property of DataGridViewImageColumn to an image, but the image will not show on new row.

Handle Click

To handle Click on image/button you can handle CellClick or CellContentClick event:

void grid_CellClick(object sender, DataGridViewCellEventArgs e)
{
    if (e.RowIndex < 0)
        return;

    //I suposed you want to handle the event for column at index 1
    if (e.ColumnIndex == 1)
        MessageBox.Show("Clicked!");
}

If you handled CellContentClick you should exactly click on image when you are using image column.

Screenshot

Here is the result. First column is a button column showing an image and second column is a normal image column set to show a single image:

Important Note

In above examples I assume you have an image in someImage member variable:

Image someImage = Properties.Resources.SomeImage

Make sure you dispose someImage on disposal of the form and avoid using Properties.Resources.SomeImage directly everywhere you need.