Building a color selector control

This article will show you how to create a color selector control that will looks like the image in the right side.  

The first thing to mention is the way that we are going to fill the colors. We can manually fill the available colors or we can find a way to get all the known colors using .NET.

We will use the values of System.Drawing.KnownColor Enum type to fill the colors list. This can be done using the Enum.GetValues method:

System.Drawing.KnownColor[] colors =
 (System.Drawing.KnownColor[])System.Enum.GetValues(typeof(System.Drawing.KnownColor));

For a better usability, all the code logic can be placed in a usercontrol, so that you can use it in many places in your project.

UserControl Code :

<asp:DropDownList ID="DropDownList1" runat="server" AppendDataBoundItems="true">
    <asp:ListItem Text="Select color" Value="-1"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="DropDownList1"
    runat="server" ErrorMessage="
Select a color from the list !" InitialValue="-1">
</asp:RequiredFieldValidator> 

public partial class ColorsPicker : System.Web.UI.UserControl
{
    public System.Drawing.Color SelectedColor
    {
        get {
            if (DropDownList1.SelectedIndex > 0)
            {
                //get the selected color 
                string SelectedColorStr = DropDownList1.SelectedValue;
                //' conver the color string to System.drawing.color object 
                System.Drawing.ColorConverter converter = new System.Drawing.ColorConverter();
                System.Drawing.Color objColor = 
                    (System.Drawing.Color)converter.ConvertFromString(SelectedColorStr);
                return objColor;
            }
            // if there is no color selected 
            //  we return empty color object
            else
            {
                return  new System.Drawing.Color();
            }
        }
        set {
            string Color = value.Name;
            ListItem li = DropDownList1.Items.FindByValue(Color);
            // if found in the colors list , we select the matched color 
            if (li != null)
            {
                DropDownList1.ClearSelection();
                li.Selected = true;
            }
        }
    
    }
    protected void Page_Load(object sender, System.EventArgs e)
    {
        if (!IsPostBack)
            BindFillColorslist();
        //set the Background color of the listitem to the same color which the item represents
        SetCbackColorsForListItems();
    }
    private void SetCbackColorsForListItems()
    {
        foreach (ListItem li in DropDownList1.Items)
        {
            li.Attributes["style"] = " background-color: " + li.Value;
        }
    }
    // this function will fill the dropdownlist with the known colors 
    private void BindFillColorslist()
    {
        // get the list of known colors 
        System.Drawing.KnownColor[] colors =
            (System.Drawing.KnownColor[])System.Enum.GetValues(typeof(System.Drawing.KnownColor));
        //' add them to the drodownlist 
        foreach (System.Drawing.KnownColor c in colors)
        {
            DropDownList1.Items.Add(c.ToString());
        }
    }
}

Some Important notes on the UserControl code :

<uc1:ColorsPicker ID="ColorsPicker1" runat="server" />
<asp:Button ID="Button2" runat="server" Text="show color" OnClick="Button2_Click" />
<asp:Label ID="lblColor" runat="server">Color Test</asp:Label></div>

protected void Button2_Click(object sender, EventArgs e)
    {  // set the label back color based on the selected date from the list 
        lblColor.BackColor = ColorsPicker1.SelectedColor;
    }