Click here to Skip to main content
Click here to Skip to main content

Multi-color DropDownList using C#

, 26 Jun 2007
Rate this:
Please Sign up or sign in to vote.
An article on reading system colors and preparing a multi-color DropDownList

Screenshot - MultiColorDropdownListUsingCS.jpg

Introduction

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

Background

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.

<table>
    <tr>
        <td>
            <asp:DropDownList ID ="ddlMultiColor"   
                OnSelectedIndexChanged="ddlMultiColor_OnSelectedIndexChanged"
                runat="server" AutoPostBack="true">
            </asp:DropDownList>
        </td>
        <td>
            <div id="msgColor" runat="server">
            </div>
        </td>
    </tr>
</table>

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)
    {
        populateDdlMultiColor();
        colorManipulation();
    }
}

Let us now go through the populateDdlMultiColor() method.

private void populateDdlMultiColor()
{        
    ddlMultiColor.DataSource = finalColorList();
    ddlMultiColor.DataBind();
}

Here goes the code for the finalColorList() method.

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

    int index = 0;

    foreach (MemberInfo member in (
        typeof(System.Drawing.SystemColors)).GetProperties())
    {
        systemEnvironmentColors[index ++] = member.Name;            
    }

    List finalColorList =  new List();
            
    foreach (string color in allColors)
    {
        if (Array.IndexOf(systemEnvironmentColors, color) < 0)
        {
            finalColorList.Add(color);
        }                           
    }
    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++)
    {
        ddlMultiColor.Items[row].Attributes.Add("style", 
            "background-color:" + ddlMultiColor.Items[row].Value);
    }
    ddlMultiColor.BackColor = 
        Color.FromName(ddlMultiColor.SelectedItem.Text);
}

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);
    colorManipulation();   
    ddlMultiColor.Items.FindByValue(ddlMultiColor.SelectedValue).Selected = 
        true;    
    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!!

History

  • 24th June, 2007

License

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

Share

About the Author

Fuad Bin Omar
Software Developer (Senior) Nascenia Ltd. (www.nascenia.com)
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 fuadcse@yahoo.com

 
Follow on   Twitter

Comments and Discussions

 
Questionnice PinmemberCIDev4-May-12 3:52 
GeneralI found a better way to get all nonsystem colors. Pinmemberdata_smith7-Apr-08 2:54 
Generalnice Pinmemberbinabic19-Mar-08 1:48 
GeneralAJAX Enhancement PinmemberNM Software Developer4-Feb-08 10:22 
GeneralNice PinmemberPaul Conrad15-Jul-07 9:45 
GeneralColor of Text Pinmemberoliwan12-Jul-07 11:00 
NewsIt is very cool.I have translated it to Chinese. Pinmember51aspx.com5-Jul-07 3:14 
GeneralRe: It is very cool.I have translated it to Chinese. PinmemberFuad Bin Omar5-Jul-07 8:49 
GeneralNeat PinmemberNM Software Developer4-Jul-07 8:59 
GeneralRe: Neat PinmemberFuad Bin Omar5-Jul-07 8:51 
GeneralThis was exactly what I was looking for. Pinmembersnelldl4dwebdesign3-Jul-07 16:22 
GeneralRe: This was exactly what I was looking for. PinmemberFuad Bin Omar3-Jul-07 19:02 
GeneralNice... microsoft fixed the bug with losing asp:ListItem's attributes Pinmembernsimeonov2-Jul-07 22:48 
GeneralRe: Nice... microsoft fixed the bug with losing asp:ListItem's attributes PinmemberRichard Deeming5-Jul-07 6:11 
GeneralCool Pinmembermerlin98127-Jun-07 4:25 
GeneralRe: Cool PinmemberFuad Bin Omar27-Jun-07 18:18 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.1411023.1 | Last Updated 26 Jun 2007
Article Copyright 2007 by Fuad Bin Omar
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid