Introduction
I was going to make a color dialog for one of my professional projects, but the feature was not needed and I only got a glimpse of how I thought a color dialog should be. I wanted a hue-based palette and wondered why I couldn't find any decent free color dialog on the net. Maybe it was because I didn't Google enough or maybe it was because of the inherent complexity in transparence on the mobile platform.
I found some clues however:
Alphablending came from Chris Lortons excellent blog.
The HSL-class is objectified from the sample code made by the Irish people at geekymonkey. I was astounded to get different results from different HSL-RGB converters. This one did the work.
The color dialog is not perfect. There are still some subtle hue slides (probably because of the limited color range on a mobile when you use the palette). Also, there may be other bugs and the graphic design could have been better (not my strongest side), but it should be a good starting point. It is made for 240 * 300 in resolution and some control position values are hardcoded when you move to a horizontal view. (I would have liked a view-panel where you could have moved and arranged controls depending on resolution and orientation). So, that was for getting my back free... ;)
Using the Code
You start the dialog from the test form. It exposes the public properties (caption, frontcolor and behindcolor) and let's you start the dialog.
In the dialog you can change color by clicking on the big hue-palette, by clicking on the RGB stripe, or the monochromic stripe, or by changing value in the RGB boxes. The front and behind color can be swapped by clicking on the corresponding controls in the dialog.
Color input from the palette and the stripes are made by simple GetPixel calls. The palette is made up by getting the current hue from the RGB value of the current color. When we have that we overlay it with an image combined from a horizontal white to transparent, and a vertical black to transparent. Getting color from the palette should, in theory, not change the hue.
private void Picker_Paint(object sender, PaintEventArgs e)
{
if (m_backBuffer != null)
{
using (Graphics g = Graphics.FromImage(m_backBuffer))
{
g.Clear(this.BackColor);
IntPtr hdcDest = g.GetHdc();
if (m_isFore)
{
m_hsl.ColorValue = m_FrontColor;
}
else
{
m_hsl.ColorValue = m_BehindColor;
}
m_hsl.Saturation = 1;
m_hsl.Level = 0.5;
g.FillRectangle(new SolidBrush(m_hsl.ColorValue), m_paletteRectangle);
Rectangle plotRect = new Rectangle(m_paletteRectangle.X,
m_paletteRectangle.Y, m_paletteRectangle.Width + m_paletteRectangle.X,
m_paletteRectangle.Height + m_paletteRectangle.Y);
m_imagingImage.Draw(hdcDest, ref plotRect, IntPtr.Zero);
g.ReleaseHdc(hdcDest);
}
e.Graphics.DrawImage(m_backBuffer, 0, 0);
}
else
e.Graphics.Clear(this.BackColor);
frontPictureBox.BackColor = m_FrontColor;
backPictureBox.BackColor = m_BehindColor;
}
Overlaying the image is done in the Picker_Paint, declarations of functions in IImagingFactory and HSL conversion in the file conveniently called HSL.
History
2008-11-25 First version released.
