Make a selection dialog that uses a color wheel in C#

[color wheel]

The example Draw a color wheel with alpha and saturation values in C# lets the user select a color on a color wheel. This example uses that technique to build a color selection dialog.

This change is fairly easy. First move the color wheel from the previous example into a form type named ColorWheelDialog. Add OK and Cancel buttons. Set the form’s AcceptButton and CancelButton properties to those buttons and set their DialogResult properties to OK and Cancel respectively.

The only real change to the dialog’s code is in its SelectedColor property. When you set the property, the dialog now updates its alpha scroll bar. That way when the main program sets SelectedColor, the dialog’s scroll bar is updated.

(This version doesn’t try to set the saturation scroll bar. You could convert the RGB value to HLS and figure this out, but I’m not sure the color wheel is a truly correct HLS color wheel anyway. Perhaps some day when I’m feeling less lazy I’ll take a harder look at this. Meanwhile the dialog produces a nice result.)

The main program uses the following code to let the user select foreground and background colors.

// The selected colors.
private Color Color1 = Color.FromArgb(128, 255, 0, 0);
private Color Color2 = Color.FromArgb(128, 0, 0, 255);

// Set color 1.
private void btnColor1_Click(object sender, EventArgs e)
{
    ColorWheelDialog dlg = new ColorWheelDialog();
    dlg.SelectedColor = Color1;
    if (dlg.ShowDialog() == DialogResult.OK)
        Color1 = dlg.SelectedColor;

    picSample.Refresh();
}

// Set color 2.
private void btnColor2_Click(object sender, EventArgs e)
{
    ColorWheelDialog dlg = new ColorWheelDialog();
    dlg.SelectedColor = Color2;
    if (dlg.ShowDialog() == DialogResult.OK)
        Color2 = dlg.SelectedColor;

    picSample.Refresh();
}

The code for each button creates an instance of the ColorWheelDialog class and sets its SelectedColor property to the appropriate value. (The program stores the selected values in the picSample PictureBox.)

The code then displays the dialog. If the user user selects a color and clicks OK, the program saves the selected color and refreshes the picSample PictureBox.

The following code shows how the picSample control draws its sample.

// Draw a sample to show the alpha component.
private void picSample_Paint(object sender, PaintEventArgs e)
{
    e.Graphics.Clear(Color.White);

    // Draw some lines.
    int wid = picSample.ClientSize.Width;
    int hgt = picSample.ClientSize.Height;
    e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
    using (Pen pen = new Pen(Color.Black, 3))
    {
        for (int x = 10; x <= wid; x += 20)
            e.Graphics.DrawLine(pen, x, 0, x, hgt);
        for (int y = 10; y <= hgt; y += 20)
            e.Graphics.DrawLine(pen, 0, y, wid, y);
    }

    // Draw an ellipse.
    int third = picSample.ClientSize.Width / 3;
    using (Brush brush = new SolidBrush(Color2))
    {
        e.Graphics.FillEllipse(brush, 0, 0, 2 * third, hgt);
    }
    using (Brush brush = new SolidBrush(Color1))
    {
        e.Graphics.FillEllipse(brush, third, 0, 2 * third, hgt);
    }
}

This code clears the sample PictureBox‘s background and then draws a black grid on it. Next the code draws two overlapping ellipses in the selected colors.


Download Example   Follow me on Twitter   RSS feed   Donate




This entry was posted in drawing, graphics, image processing and tagged , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *