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
.
public override DataGridViewCell CellTemplate
{
get
{
return base.CellTemplate;
}
set
{
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.
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);
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.
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))
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.
protected override void OnLeave(EventArgs eventargs)
{
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.