Image DataGridView for button column

Question

I am trying to add a clickable / button button to a datagridview button column.

The image / button will be an icon to play or pause. If the user presses the play button, the service in the system starts; if the user presses the stop button, the service stops.

I already have written functions to start and stop the service. What is difficult for me is to get the button / image displayed in the datagrid and make it clickable.

Here is what I have for the 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 if it would be better to use a button that is an image or just an image that can be clicked. I also cannot display the button correctly.

Thanks Brad

Answer 1

Show image on button

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

In the code below, I assume that you have an image resource, for example, 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 one image in all rows, including a new one, you can set the Image property for DataGridViewImageColumn . Thus, the image will be displayed in this column for all rows:

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

Also, if you want to have different images for cells, you can set the formatted value of the DataGridViewImageColumn in the 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 can also set the Image property for the DataGridViewImageColumn to an image, but the image will not be displayed on a new line.

Pen press

To process Click on the image / button, you can process the CellClick or CellContentClick :

 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 processed CellContentClick , you must click the image exactly when using the image column.

Screenshot

Here is the result. The first column is the column of the button with the image, and the second column is the column with the normal image, configured to display a single image:

Important note

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

 Image someImage = Properties.Resources.SomeImage 

Make sure you recycle someImage when disposing of the form, and avoid using Properties.Resources.SomeImage directly wherever you need to.