Click here to Skip to main content
15,868,340 members
Articles / Multimedia / GDI+
Article

How to Host a Color Picker Combobox in Windows Forms DataGridView Cells

Rate me:
Please Sign up or sign in to vote.
4.78/5 (31 votes)
24 Mar 2008CPOL3 min read 193.7K   12.7K   113   31
An article on how to add a color picker ComboBox to DataGridView
Image 1

Introduction

The .NET Framework provides quite a rich collection of UI controls and components for WinForms development. There is one particular control that has been missing. I am talking about a color-picker control with drop down color selection capabilities, just like the one used within the Visual Studio .NET property browser for editing Color-typed properties.

A color picker control was developed by Palo Mraz and was published in this Website. I wanted to use this control in a DataGridView but I couldn't find any example on how to do it. The only available examples on how to use custom control in DataGridView were to do with textual controls. This custom control involves graphics and not just text. I have decided to publish this article for the benefit of other fellow developers who would like to have a color picker combo box hosted by a DataGridView.

Background

For those of you who want to get some background on the color picker combo box, please refer to "The ColorPicker WinForms Control".

You can get background on how to host custom controls in DataGridView cells here.

Color Picker in DataGridView

The core requirement for my project was to display the same drop down color selector that is used within WinForm’s PropertyGrid control inside a DataGridView.

The DataGridView control provides several properties that you can use to adjust the appearance and basic behavior (look and feel) of its cells, rows, and columns. My requirement was to show the color itself next to a text showing the color’s name.

In order to do that, I had to implement owner drawing for the control and extend its capabilities by creating custom cells, columns, and rows.

ColorPickerColumn Class

This class creates a custom column for hosting a column of color picker cells. It inherits from DataGridViewColumn and overrides the property CellTemplate.

C#
public override DataGridViewCell CellTemplate
{
    get
    {
        return base.CellTemplate;
    }
    set
    {
        // Ensure that the cell used for the template is a ColorPickerCell.
        if (value != null && 
            !value.GetType().IsAssignableFrom(typeof(ColorPickerCell)))
        {
            throw new InvalidCastException("Must be a ColorPicker");
        }
        base.CellTemplate = value;
    }
}

ColorPickerCell Class

This class creates a custom cell for hosting the color picker combo box and it inherits from DataGridViewTextBoxCell. In order to draw the content of the cell in the way I wanted, I overrode the paint method.

C#
 protected override void Paint(Graphics graphics,
           Rectangle clipBounds, Rectangle cellBounds, int rowIndex,
           DataGridViewElementStates elementState, object value,
           object formattedValue, string errorText,
           DataGridViewCellStyle cellStyle,
           DataGridViewAdvancedBorderStyle advancedBorderStyle,
           DataGridViewPaintParts paintParts)
{
    formattedValue = null;
    
    base.Paint(graphics, clipBounds, cellBounds, rowIndex, 
            elementState, value, formattedValue,
               errorText, cellStyle, advancedBorderStyle, paintParts);

   
    Rectangle ColorBoxRect = new Rectangle();
    RectangleF TextBoxRect = new RectangleF();
    GetDisplayLayout(cellBounds, ref ColorBoxRect, ref TextBoxRect);

    /// Draw the cell background, if specified.
    if ((paintParts & DataGridViewPaintParts.Background) ==
        DataGridViewPaintParts.Background)
    {
        SolidBrush cellBackground;
        if (value != null && value.GetType() == typeof(Color))
        {
            cellBackground = new SolidBrush((Color)value);
        }
        else
        {
            cellBackground =  new SolidBrush(cellStyle.BackColor);
        }
        graphics.FillRectangle(cellBackground, ColorBoxRect);
        graphics.DrawRectangle(Pens.Black, ColorBoxRect);
        Color lclcolor=(Color)value;
        graphics.DrawString(lclcolor.Name.ToString(), cellStyle.Font, 
            System.Drawing.Brushes.Black, TextBoxRect);
    
        cellBackground.Dispose();
    }
}

The other method that I had to override is ParseFormattedValue. When the user picks a custom color from the list, he or she gets a Hex number of this color. There is a slight problem with this number: it doesn't get the 0x prefix added to it. This causes the System.Number.StringToNumber method to generate an exception. The .NET environment tries to convert this string to an integer and fails as without the 0x prefix it cannot be regarded as a Hex number, hence this method adds the prefix when required.

C#
public override object ParseFormattedValue
    object formattedValue, DataGridViewCellStyle cellStyle, 
         System.ComponentModel.TypeConverter formattedValueTypeConverter, 
         System.ComponentModel.TypeConverter valueTypeConverter)
{
    int result;
    string number = "0x" + formattedValue.ToString();
    if (int.TryParse(formattedValue.ToString(), 
        stem.Globalization.NumberStyles.HexNumber, null, out result))
        //Hex number
        return base.ParseFormattedValue("0x" + formattedValue.ToString(), 
            lStyle, formattedValueTypeConverter, valueTypeConverter);
    else
        return base.ParseFormattedValue(formattedValue, cellStyle, 
            mattedValueTypeConverter, valueTypeConverter);
}

ColorPickerControl Class

This class creates the custom control to be hosted by the ColorPickerCell. It implements the interface IDataGridViewEditingControl and overrides the OnLeave event of the original ColorPicker control. OnLeave – This event calls NotifyDataGridViewOfValueChange to notify the DataGridView that the contents of the cell have changed.

C#
protected override void OnLeave(EventArgs eventargs)
{
    // Notify the DataGridView that the contents of the cell
    // have changed.
    base.OnLeave(eventargs);
    NotifyDataGridViewOfValueChange();
}

Using the Code

I created a form named ExampleForm containing a DataGridView control. This grid has two columns: the first is a simple textbox column and the second is the ColorPicker column. In this form, I demonstrate how to load and save the data containing colors and names to and from an XML file named ColorData.xml. The file should be stored in the same folder of the executable.

History

  • March 25th, 2008: Initial release

About the Author

I live in New Zealand. I've been doing Microsoft Windows development for the past 6 years.

License

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


Written By
Software Developer
New Zealand New Zealand
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionVS 2019 - Hangs after color selector popup Pin
LightTempler8-Jan-21 7:24
LightTempler8-Jan-21 7:24 
Questionwhere are the souce code of DataGridViewCustomColumn ? Pin
riccardo6823-Jun-14 0:36
professionalriccardo6823-Jun-14 0:36 
AnswerRe: where are the souce code of DataGridViewCustomColumn ? Pin
riccardo6823-Jun-14 0:42
professionalriccardo6823-Jun-14 0:42 
Questiona bout the License Pin
H-M-Kais12-Mar-14 6:43
H-M-Kais12-Mar-14 6:43 
GeneralMy vote of 5 Pin
Mazen el Senih29-Mar-13 5:35
professionalMazen el Senih29-Mar-13 5:35 
QuestionPlease help [modified] Pin
opium_2100210025-Feb-10 3:44
opium_2100210025-Feb-10 3:44 
i try to make a program that has a datagridview and a database, i am able to change backgroud colors of a selected row but when i close the program and reopen the colors are gone. how can i make to save this colors and when i open the program again to have those rows backgroud colored.

I am using vb 2005 and programing in vb language.
Please help me!

My source code http://www.filefactory.com/file/b059a5g/n/Auto_Green_Club.rar [^]
modified on Thursday, February 25, 2010 9:57 AM

GeneralProject in VB Pin
Filippo Monti24-Jan-10 2:54
professionalFilippo Monti24-Jan-10 2:54 
GeneralDual monitor problem with popup of colorcombobox Pin
jcgsell11-Nov-09 14:57
jcgsell11-Nov-09 14:57 
GeneralRe: Dual monitor problem with popup of colorcombobox Pin
srcarr30-Aug-12 11:16
srcarr30-Aug-12 11:16 
GeneralProblem with the splitter leaving a trail in the editing control. [modified] Pin
Member 33644967-Sep-09 8:10
Member 33644967-Sep-09 8:10 
Generalsub grid in grid Pin
drorby9-Jul-09 1:59
drorby9-Jul-09 1:59 
GeneralUnable to change color according to the options that i choose. Pin
lousyprogrammer25-Mar-09 22:20
lousyprogrammer25-Mar-09 22:20 
GeneralRe: Unable to change color according to the options that i choose. Pin
Joe2003320-Apr-09 18:25
Joe2003320-Apr-09 18:25 
GeneralA nice simple example Pin
Colin Eberhardt17-Nov-08 4:11
Colin Eberhardt17-Nov-08 4:11 
GeneralRe: A nice simple example Pin
Joe2003319-Nov-08 8:25
Joe2003319-Nov-08 8:25 
GeneralMy Custom control remains clipped within the Datagridview Pin
TheCubanP29-Oct-08 3:26
TheCubanP29-Oct-08 3:26 
GeneralActivating the Cell Pin
Ali Rafiee8-Jul-08 6:37
Ali Rafiee8-Jul-08 6:37 
GeneralRe: Activating the Cell Pin
Joe200339-Jul-08 13:29
Joe200339-Jul-08 13:29 
GeneralRe: Activating the Cell Pin
Ali Rafiee10-Jul-08 5:22
Ali Rafiee10-Jul-08 5:22 
QuestionCan you make multiple cells remain in edit mode in the DataGridView? [modified] Pin
DeadHead720-Jun-08 4:09
DeadHead720-Jun-08 4:09 
AnswerRe: Can you make multiple cells remain in edit mode in the DataGridView? Pin
Joe200339-Jul-08 13:34
Joe200339-Jul-08 13:34 
QuestionVB wanted? Pin
dherrmann5-Apr-08 6:22
dherrmann5-Apr-08 6:22 
AnswerRe: VB wanted? Pin
Joe200337-Apr-08 10:27
Joe200337-Apr-08 10:27 
AnswerRe: VB wanted? Pin
Joe2003315-Apr-08 13:53
Joe2003315-Apr-08 13:53 
GeneralValue Not Staying In Control After Leaving Cell Pin
vnmatt29-Mar-08 8:13
vnmatt29-Mar-08 8:13 

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.