Click here to Skip to main content
13,860,876 members
Click here to Skip to main content
Add your own
alternative version

Stats

274.4K views
18.6K downloads
131 bookmarked
Posted 20 Jun 2008
Licenced CPOL

DataGridView Image Button Cell

, 24 Jun 2008
Rate this:
Please Sign up or sign in to vote.
A clickable button cell that can display an icon in a DataGridView
CodeProject01.JPG

Introduction

The DataGridView has a button column that can display text, and it also has an image column. But, it does not have a button column that can display an image. This was a problem because I wanted my newer projects to be visually consistent with some earlier projects written using C++ Builder and TMS Software's Advanced StringGrid. In these earlier C++ projects, an image was used to display information, and buttons were used to execute actions. You never clicked on an image to perform an action. Buttons with text are not an acceptable option because they take up too much space compared to a smaller button with an icon on it. In addition to having a button display an image, I also wanted to be able to enable or disable the button based on programming or security logic.

The major technical obstacle I ran into was that when the DataGridView.Columns.Add() method is invoked, behind the scenes in the .NET Framework, only the empty constructor for the corresponding DataGridViewButtonCell class is called. So, creating an extended button cell class where the images are passed as a parameter of the constructor was not a design option. Writing hard-coded classes for each type of image button cell created a lot of redundant code, so that was a problem too.

The solution I came up with was to write an abstract DataGridViewImageButtonCell class that derived from the DataGridViewButtonCell class. This class has several concrete methods and a single abstract method called LoadImages(). When you derive a new cell from this class, you will be forced by the compiler to write a new LoadImages() routine.

So, in order to create a particular button (for example, a Delete button), there are three steps:

Step 1: Derive a specific DataGridViewImageButtonDeleteCell class from the abstract DataGridViewImageButtonCell class. Override the abstract LoadImages() method with a new method that loads the images that represent what this new cell's action does. In this example, I would load Delete images. Depending on the method you use to load the images, this routine can be as short as three lines of code.

public class DataGridViewImageButtonDeleteCell : DataGridViewImageButtonCell
{
    public override void LoadImages()
    {
       // Load the Normal, Hot and Disabled "Delete" images here.
       // Load them from a resource file, local file, hex string, etc.

        _buttonImageHot = Image.FromFile("C:\\delete_16_h.bmp");
        _buttonImageNormal = Image.FromFile("C:\\delete_16.bmp");
        _buttonImageDisabled = Image.FromFile("C:\\delete_d.bmp");
    }
}

Step 2: Create a DataGridViewImageButtonDeleteColumn that derives from DataGridViewButtonColumn to display the Delete button cells.

public class DataGridViewImageButtonDeleteColumn : DataGridViewButtonColumn
{
    public DataGridViewImageButtonDeleteColumn()
    {
        this.CellTemplate = new DataGridViewImageButtonDeleteCell();
        this.Width = 22;
        this.Resizable = DataGridViewTriState.False;
    }
}

Step 3: Add the column to the grid in order to display the Delete image button.

DataGridViewImageButtonDeleteColumn columnDelete =
    new DataGridViewImageButtonDeleteColumn();
dataGridView1.Columns.Add(columnDelete);

While this solution did the things I wanted it to do, I did not want to have to use a local image file or add an image to the resource file of every project I wanted to use the button column in. I wanted to be able to create a Delete button column and drop it into any project I had without any additional steps. So, I decided to embed the images in each class as a byte array. In order to do this, I wrote a small utility to read a bitmap and convert it into a hex string.

using System.IO; // MemoryStream
using Microsoft.VisualBasic;
// Hex function. Also add as a resource to the project.

//-----------------------------

StringBuilder sb = new StringBuilder();

Image image = Image.FromFile("Enter filename here");
MemoryStream ms = new MemoryStream();
image.Save(ms, ImageFormat.Bmp);

byte[] byteArray = ms.ToArray();

for (int idx = 0; idx < byteArray.Length; idx++)
{
    // After writing 16 values, write a newline.
    if (idx % 15 == 0)
    {
        sb.Append("\n");
    }

    // Prepend a "0x" before each hex value.
    sb.Append("0x");

    // If the hex value is a single digit, prepend a "0"
    if (byteArray[idx] < 16)
    {
        sb.Append("0");
    }

    // Use the Visual Basic Hex function to convert the byte.
    sb.Append(Conversion.Hex(byteArray[idx]));
    sb.Append(", ");
}

TextBox1.Text = sb.ToString();

The hex string created as output from this utility is hard-coded into the LoadImages() method of the derived DataGridViewImageButtonDeleteCell class. This way, the Delete images becomes part of the class. By creating a collection of concrete classes with embedded images derived from the abstract DataGridViewImageButtonCell class on my hard-drive, I can link them into any project I write and have them all look identical without any extra effort. It also makes it easier to share them with other programmers since the column class, cell class, and the embedded images are now in a single text file.

Miscellaneous Notes

Each of the cells have a Normal, Hot, and Disabled image. If you have your desktop set to the Windows Classic theme, or you have the VisualStyles disabled in your program, then only the Normal and Disabled image will be seen. If you have Windows XP or Vista themes activated and VisualStyles enabled in your program, then moving the mouse over a button will activate the Hot image.

Also, this code is written for 16x16 icons displayed in 22x22 cells. Using a different size icon or cell will require you to tweak the variables and constants in the Paint() method of the abstract class.

Background

In my earlier programs, the grids I had would display various resources, and the buttons on each line would change their status or open forms to modify data. These resources could be dispatched, taken out-of-service, marked available, etc. at the click of a button. Having a series of buttons next to an item made this easy.

In this article and the included example, I used Save, Print, and Delete to show how the grid button would work. But, this was for illustrative purposes only. In a real program, I would just select a grid line and hit the Delete button, or put the Save and Print on the File menu where the user expects to see it. I'm not suggesting that putting these particular buttons in a grid is good GUI design.

Things to Do

I was not able to get transparency working on my buttons, but I only worked on this for a day so, maybe more later if I need it. I would not want to put both an icon and text on a grid button, but it could be an option for people who would. The utility to create the hex string is very basic. It would be nice to make it a full-featured program with a dialog box to select the image and allow a variety of formats instead of only the hardcoded BMP.

History

  • 06/20/08: Version 1.0 released
  • 06/22/08: Article updated to make the process for creating a button column more clear.
    I labelled each part Step 1, Step 2 and Step 3 and gave an explicit example of loading the image.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Darryl Caillouet
Software Developer (Senior)
United States United States
I wrote my first program on a Tandy computer using a 1963 black & white Zenith TV for a monitor.

I wrote my second program in Fortran using a card punch machine.

I've been hooked ever since...


You may also be interested in...

Comments and Discussions

 
QuestionCannot change image button cell color Pin
superfly711-Jul-16 1:27
professionalsuperfly711-Jul-16 1:27 
AnswerRe: Cannot change image button cell color Pin
superfly711-Jul-16 23:00
professionalsuperfly711-Jul-16 23:00 
QuestionMessage Closed Pin
30-Sep-14 3:22
memberBinu198530-Sep-14 3:22 
QuestionDataGridView Image Button Cell - vb.Net Pin
mond0075-Aug-14 6:21
membermond0075-Aug-14 6:21 
QuestionFantastic! Out and out fantastic! Pin
Mark @Pacsoft6-Mar-14 10:38
memberMark @Pacsoft6-Mar-14 10:38 
QuestionRe: Fantastic! Out and out fantastic! Pin
Member 866592622-Apr-14 4:39
memberMember 866592622-Apr-14 4:39 
AnswerVB Code Pin
Mark @Pacsoft22-Apr-14 11:45
memberMark @Pacsoft22-Apr-14 11:45 
GeneralMy vote of 5 Pin
Britteandy5-Sep-13 0:34
memberBritteandy5-Sep-13 0:34 
QuestionDood, you got a 5 from me Pin
Kountree9-Aug-12 5:53
memberKountree9-Aug-12 5:53 
GeneralMy vote of 5 Pin
neoraltech17-Jul-12 17:55
memberneoraltech17-Jul-12 17:55 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey21-Jan-12 3:49
professionalManoj Kumar Choubey21-Jan-12 3:49 
NewsNew Idea Pin
Andrej Kicina27-Oct-11 4:59
memberAndrej Kicina27-Oct-11 4:59 
GeneralRe: New Idea Pin
Kountree9-Aug-12 5:52
memberKountree9-Aug-12 5:52 
GeneralRe: New Idea Pin
shagaroo20-Aug-15 17:01
membershagaroo20-Aug-15 17:01 
QuestionButtons Became Disabled Pin
Member 233481723-Jun-11 5:36
memberMember 233481723-Jun-11 5:36 
GeneralMy vote of 5 Pin
ksalvage4-Oct-10 2:04
memberksalvage4-Oct-10 2:04 
Generalfabulous Pin
johnmaddison4-Oct-09 8:27
memberjohnmaddison4-Oct-09 8:27 
GeneralHot image "stuck" - MouseLeave does not fire Pin
pcfountain10-Jun-09 10:20
memberpcfountain10-Jun-09 10:20 
GeneralRe: Hot image "stuck" - MouseLeave does not fire Pin
Darryl Caillouet21-Jul-09 3:29
memberDarryl Caillouet21-Jul-09 3:29 
GeneralRe: Hot image "stuck" - MouseLeave does not fire Pin
pcfountain21-Jul-09 8:47
memberpcfountain21-Jul-09 8:47 
GeneralRe: Hot image "stuck" - MouseLeave does not fire Pin
dmbrider5-Dec-09 1:53
memberdmbrider5-Dec-09 1:53 
GeneralGreat job Pin
nicholas_pei31-Mar-09 17:23
membernicholas_pei31-Mar-09 17:23 
GeneralRe: Great job Pin
Darryl Caillouet31-Mar-09 18:18
memberDarryl Caillouet31-Mar-09 18:18 
QuestionHow to use a different set of Images Pin
D_Ana29-Mar-09 17:32
memberD_Ana29-Mar-09 17:32 
AnswerRe: How to use a different set of Images Pin
Darryl Caillouet30-Mar-09 4:10
memberDarryl Caillouet30-Mar-09 4:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.190214.1 | Last Updated 24 Jun 2008
Article Copyright 2008 by Darryl Caillouet
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid