How to make a grid of colours that can be selected?

Question

How do I make a kind of grid with colours that can be selected and be saved to a field on selection? Like in the chat options in Twitch.

enter image description here

One way (maybe not the greatest out there) would be to generate these as Bitmap images and merely create some PictureBoxes. Like I said, maybe not the best, but it should work. — Falgantil, May 19 '14 at 11:43
It seems like you're asking us to write code for you. Have you tried something? — Omar, May 19 '14 at 11:45
One way is to start learning and using `wpf` (as it has `Popup` and its content concept, as well as styling) over `winforms`. Other: user control with bunch of custom controls (buttons and color radio-buttons) hosted in `ToolStripDropDown`/`ToolStripControlHost`. — Sinatr, May 19 '14 at 11:48

score 2 · Answer 1 · answered May 19 '14 at 11:43

2

Windows Form provides the ColorDialog

ColorDialog colorDialog = new ColorDialog();
colorDialog.ShowDialog();

The selected Color could be called with:

colorDialog.Color

answered May 19 '14 at 11:43

Claudio P

2,133
3
25
45

But then there is no way to display only a few chosen colours as options. – Eruhen May 19 '14 at 12:04
Theres a property called CustomColors. Look here: [link](http://stackoverflow.com/questions/6393462/how-do-i-specify-what-colors-can-be-picked-in-a-c-sharp-colordialog) – Claudio P May 19 '14 at 12:10

Wallstrider · Accepted Answer · 2014-05-19T12:28:13.997

All you need is TableLayoutPanel and panel for each cell of it:

public partial class MainForm : Form
{
    private Color selected_color;
    private List<Color> colors;
    public MainForm()
    {
        InitializeComponent();
        colors = new List<Color>();
        colors.Add(Color.Red);
        colors.Add(Color.Green);
        colors.Add(Color.Blue);
        colors.Add(Color.Yellow);
        colors.Add(Color.Teal);
        colors.Add(Color.RosyBrown);
        colors.Add(Color.Lime);
        colors.Add(Color.Gray);
        tableLayoutPanel.CellBorderStyle = TableLayoutPanelCellBorderStyle.OutsetDouble;
        for (byte i = 0; i < tableLayoutPanel.Controls.Count; i++)
        {
            Panel p = tableLayoutPanel.Controls[i] as Panel;
            p.BackColor = colors[i];
            p.Click += panel_click;
        }
    }
    private void panel_click(object sender, EventArgs e)
    {
        Panel p = sender as Panel;
        selected_color = p.BackColor;
        lbl_color.Text = selected_color.ToString();
        lbl_color.ForeColor = selected_color;
    }
    private void btn_showMoreColours_Click(object sender, EventArgs e)
    {
        Panel[] panels = new Panel[4];
        for (byte i = 0; i < panels.Length; i++)
        {
            panels[i] = new Panel();
            panels[i].Dock = DockStyle.Fill;
            panels[i].Location = new System.Drawing.Point(3, 3);
            panels[i].Name = "panel" + (i + 4);
            panels[i].Size = new System.Drawing.Size(123, 100);
            panels[i].BackColor = colors[i + 4];
            panels[i].Click += panel_click;
            tableLayoutPanel.Controls.Add(panels[i]);
        }
        Size = new Size(Size.Width, Size.Height * 2);
    }
}

After clicking a cell you will get Color in field selected_color.

EDIT:

A have added show more colours button as well. It will expand like shown below:

Source code here

How to make a grid of colours that can be selected?

2 Answers2