Click here to Skip to main content
15,346,269 members
Articles / Web Development / ASP.NET
Posted 26 Jun 2007


44 bookmarked

Multi-color DropDownList using C#

Rate me:
Please Sign up or sign in to vote.
4.83/5 (31 votes)
26 Jun 20073 min read
An article on reading system colors and preparing a multi-color DropDownList

Screenshot - MultiColorDropdownListUsingCS.jpg


This article demonstrates how to read system colors and to color-in each row of a drop down list. In this example, I will show:

  1. How to get a list of color names from the System.Drawing.KnownColor enumeration
  2. How to exclude system environment colors, e.g. "Active Border"
  3. How to assign color to each row of the drop down list


I was asked to make an admin tool where different types of appointments can be set. These appointments would be of unique color and the admin could change the color of the appointment type at any time.

I began to think of a drop down list where the name of the colors would be displayed and the background of that row would be of that color. With a view to that, I searched the web and couldn't find any solutions for a long time. Then I finally found a solution that seemed much more complex than needed, involving a database. So I tried to find an easier solution.

Using the code

I am taking a drop down list control named ddlMultiColor to show the color names and color. I am using a <div> tag, msgColor, to show the color in a rectangular box.

            <asp:DropDownList ID ="ddlMultiColor"   
                runat="server" AutoPostBack="true">
            <div id="msgColor" runat="server">

At the server side, we need the following namespaces imported for further coding.

using System;
using System.Web;
using System.Reflection;
using System.Drawing;
using System.Collections.Generic;

Let me show the Page.Load event first. During this event, a drop down list is populated and color manipulation is performed.

protected void Page_Load(object sender, EventArgs e)
    if (Page.IsPostBack == false)

Let us now go through the populateDdlMultiColor() method.

private void populateDdlMultiColor()
    ddlMultiColor.DataSource = finalColorList();

Here goes the code for the finalColorList() method.

private List finalColorList()
    string[] allColors = Enum.GetNames(typeof(System.Drawing.KnownColor));
    string[] systemEnvironmentColors = 
        new string[(

    int index = 0;

    foreach (MemberInfo member in (
        systemEnvironmentColors[index ++] = member.Name;            

    List finalColorList =  new List();
    foreach (string color in allColors)
        if (Array.IndexOf(systemEnvironmentColors, color) < 0)
    return finalColorList;

System.Drawing.KnownColor is an enum that specifies the known system colors. I have filled the allColors array with those system colors. In order to do this, I used one of the most basic enumeration features: the shared Enum.GetNames() method. This method inspects an enumeration and provides an array of strings, one string for each value in the enumeration.

However, there lies a problem with this approach. It includes system environment colors -- e.g. "Active Border" -- in the array. In order to resolve the problem, I extracted the system environment color. I used the System.Reflection.MemberInfo class, which obtains information about the attributes of a member and provides access to member metadata.

Here, I filled the systemEnvironmentColors array with the properties of System.Drawing.SystemColors. Then I created a generic list named finalColorList in which I took only those colors that are in KnownColor, but not in system environment color. The list, finalColorList, is then bound to the drop down list named ddlMultiColor. At this point, we have a drop down list full of color names. Let us manipulate those colors.

private void colorManipulation()
    int row;
    for (row = 0; row < ddlMultiColor.Items.Count - 1; row++)
            "background-color:" + ddlMultiColor.Items[row].Value);
    ddlMultiColor.BackColor = 

Each row of the drop down list is assigned the style attribute to the background-color by the name of the color of that row. Then the background color of the drop down list is assigned by the selected color. At the OnSelectedIndexChanged event of the dropdown list, the following code snippets are added so that the selected color name is highlighted and the <div> tag named msgColor can show the rectangular image of the selected color.

protected void ddlMultiColor_OnSelectedIndexChanged(object sender, 
    EventArgs e)
    ddlMultiColor.BackColor = Color.FromName(ddlMultiColor.SelectedItem.Text);
    ddlMultiColor.Items.FindByValue(ddlMultiColor.SelectedValue).Selected = 
    msgColor.Attributes.Add("style", "background:" + 
        ddlMultiColor.SelectedItem.Value + ";width:30px;height:25px;");

Points of interest

So, we have learned how to get colors from System.Drawing, exclude system environment colors from those, bind the list to a drop down list and assign colors to each row according to the name of the color. That's it! Happy coding!!


  • 24th June, 2007


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Fuad Bin Omar
Software Developer (Senior) Nascenia Ltd. (
Bangladesh Bangladesh
Fuad Bin Omar is co-founder and COO of Nascenia Ltd . () Prior to joining in Nascenia he worked as a "Senior Software Engineer" at the offshore development office of Code71,Inc
Fuad have more than five years of experience in developing business applications using .NET and Ruby on Rails technologies.

He is an MBA in the Department of Finance at University of Dhaka, Bangladesh .
He is a Computer Science and Engineering graduate from Khulna University of Engineering & Technology (KUET), Bangladesh.

His articles published in the codeproject:

Multi-color DropDownList using C#

Export large data from Gridview and Datareader to an Excel file using C#

Mailto Fuad at

Comments and Discussions

PraiseMultiSelect DropdownList Using jQuery in Asp.Net MVC and C#.Net Pin
Member 123685433-Mar-16 18:43
MemberMember 123685433-Mar-16 18:43 
Questionnice Pin
BillW334-May-12 2:52
professionalBillW334-May-12 2:52 
GeneralI found a better way to get all nonsystem colors. Pin
data_smith7-Apr-08 1:54
Memberdata_smith7-Apr-08 1:54 
Generalnice Pin
binabic19-Mar-08 0:48
Memberbinabic19-Mar-08 0:48 
GeneralAJAX Enhancement Pin
NM Software Developer4-Feb-08 9:22
MemberNM Software Developer4-Feb-08 9:22 
GeneralNice Pin
Paul Conrad15-Jul-07 8:45
professionalPaul Conrad15-Jul-07 8:45 
GeneralColor of Text Pin
oliwan12-Jul-07 10:00
Memberoliwan12-Jul-07 10:00 
NewsIt is very cool.I have translated it to Chinese. Pin
51aspx.com5-Jul-07 2:14
Member51aspx.com5-Jul-07 2:14 
GeneralRe: It is very cool.I have translated it to Chinese. Pin
Fuad Bin Omar5-Jul-07 7:49
MemberFuad Bin Omar5-Jul-07 7:49 
GeneralNeat Pin
NM Software Developer4-Jul-07 7:59
MemberNM Software Developer4-Jul-07 7:59 
GeneralRe: Neat Pin
Fuad Bin Omar5-Jul-07 7:51
MemberFuad Bin Omar5-Jul-07 7:51 
GeneralThis was exactly what I was looking for. Pin
dsnell04173-Jul-07 15:22
Memberdsnell04173-Jul-07 15:22 
GeneralRe: This was exactly what I was looking for. Pin
Fuad Bin Omar3-Jul-07 18:02
MemberFuad Bin Omar3-Jul-07 18:02 
GeneralNice... microsoft fixed the bug with losing asp:ListItem's attributes Pin
nsimeonov2-Jul-07 21:48
Membernsimeonov2-Jul-07 21:48 
GeneralRe: Nice... microsoft fixed the bug with losing asp:ListItem's attributes Pin
Richard Deeming5-Jul-07 5:11
mveRichard Deeming5-Jul-07 5:11 
GeneralCool Pin
merlin98127-Jun-07 3:25
professionalmerlin98127-Jun-07 3:25 
GeneralRe: Cool Pin
Fuad Bin Omar27-Jun-07 17:18
MemberFuad Bin Omar27-Jun-07 17:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.