12/27/2014

ASP.NETColorDropDownControlCodeProject

Sign up for our free weekly Web Developer

11,113,551
Newsletter.
members 66,729 online

home

articles

quick answers

discussions

Sign in

features

community

help

Searchforarticles,questions,tips

Articles Web Development ASP.NET General

ASP.NET Color DropDown Control

Mike Ellison, 27 Jan 2005

CPOL

Info
Rate this:

4.72 39 votes

An example of persisting and parsing a custom collection in an ASP.NET server control.

ASP.NET Jun 2004

First Posted

11 Jul 2004

Views

275,274

Bookmarked

103 times

Download Source Project 17.4 Kb

Download Binary and Examples 13.5 Kb
Download Control Documentation 81.2 Kb

Introduction
When developing controls for a designer environment like Visual Studio or WebMatrix, the complexities of
persisting control properties as serialized HTML can come into play. In many cases, the builtin serialization of
control properties as attributes or nested child tags is sufficient. There are also several code attributes available to
a control developer to apply a degree of customization for this process. In some cases however, a developer
requires a greater degree of control over how control properties are persisted as HTML.
In this article, I present a custom ASP.NET server control for displaying color choices in a dropdown list. Following
a description of the control, I will focus on the problem of persisting a custom collection of items in the context
of the Visual Studio Web Form designer, and offer a solution using custom ControlDesigner and
ControlBuilder objects.

HtmlColorDropDown Control
The HtmlColorDropDown web control encapsulates an HTML dropdown list i.e., <select> tag with colors for
items <option> tags. The control can render the items themselves as foreground or background colors within
the <option> tags. The choice of colors offered is determined by the value of the Palette property, which can
be one of the following:

AllNamedColors All named colors not including System colors available in the
System.Drawing.KnownColor enumeration.
Simple

A small subset of common named colors.

WebSafe

The 216 colors considered "websafe"; these use only hex values #FF, #CC, #99, #66, #33, and
#00 for each of the red, green, and blue components.

UserDefined

Colors identified by the control user through the UserDefinedColorsproperty.

The UserDefinedColors property is a ColorCollection object. ColorCollection is a stronglytyped

collection class inheriting from CollectionBase, using standard System.Drawing.Color objects for items.

http://www.codeproject.com/Articles/7691/ASPNETColorDropDownControl

1/7

12/27/2014

ASP.NETColorDropDownControlCodeProject
The DisplayColorMode property governs how colors will be displayed in each item, if at all:

ColorAsBackground Display each item using its color for the background; foreground text is displayed in
either black or white, depending on which offers a better contrast.
ColorAsForeground Display each item using its color for the foreground text.
Plain

Do not display colors in the items.

The selected item is available as a Color object through the SelectedColor property. The properties
SelectedColorName and SelectedColorHexString return the name of the selected color for named colors
and the HTML hex value e.g., "#FFC309" as strings respectively. These are all read/write properties; the setting of
one affects the value of all three. If an attempt is made to set the SelectedColor to a color that doesn't exist in
the current Palette, a value of Color.Empty is assigned instead. Likewise, if the Palette is changed,
SelectedColor may be set to Color.Empty if its existing value isn't among the new list of choices.
Note that the proper display of foreground or background colors rendered in <option> tags is dependent on
the browser. Most modern browsers interpret item colors identified as CSS properties through a style attribute,
without problems. Interestingly however, not all render the colors of the selected item when the dropdown is
collapsed. To work around this, the AutoColorChangeSupport property is provided. When true its default
value, a small JavaScript onChange handler is rendered with the control, causing the colors of the selected item
to be assigned to the parent <select> tag. The property may be set to false to prevent this behavior.
The default event for the control is ColorChanged. This event fires whenever the selection in the dropdown list
has changed between postbacks to the server. The following is an example of an .aspx page where the
ColorChanged event is handled:
Collapse | Copy Code

<%@Pagelanguage="c#"%>
<%@RegisterTagPrefix="cc1"Namespace="UNLV.IAP.WebControls"
Assembly="UNLV.IAP.WebControls.HtmlColorDropDown"%>
<scriptrunat="server">
privatevoidHtmlColorDropDown1_ColorChanged(objectsender,
System.EventArgse)
{
Label1.Text=HtmlColorDropDown1.SelectedColorName;
}
</script>
<html>
<head>
<title>Example</title>
</head>
<body>
<formrunat="server">
<cc1:HtmlColorDropDownid="HtmlColorDropDown1"runat="server"
DisplaySelectColorItemText="SelectaColor"
DisplaySelectColorItem="True"
AutoPostBack="True"
OnColorChanged="HtmlColorDropDown1_ColorChanged">
</cc1:HtmlColorDropDown>
<P>Theselectedcoloris:<asp:Labelid="Label1"runat="server"/></P>
</form>
</body>
</html>

See the downloadable control documentation for a complete description of all HtmlColorDropDown properties
and events.

The Issue: Persisting the Collection of

UserDefinedColors
This control was designed with both visual designer e.g., Visual Studio and text editor e.g., Notepad
environments in mind. For designer environments, we inherit much functionality without any extra code. Because
we're using regular System.Drawing.Color objects for the SelectedColor property for example, the
standard ColorBuilder becomes available within the Visual Studio web form designer.

http://www.codeproject.com/Articles/7691/ASPNETColorDropDownControl

2/7

12/27/2014

ASP.NETColorDropDownControlCodeProject

Likewise, as we have standard Color objects within the UserDefinedColors collection, the Visual Studio
collection builder is available at no charge:

A problem occurs however when it comes time to serialize this color collection into the server tag HTML.
Typically, we would set the PersistenceMode and DesignerSerializationVisibility attributes on the
collection property to have the collection items persisted as nested tags, like so:
Collapse | Copy Code

[
PersistenceMode(PersistenceMode.InnerDefaultProperty)
,DesignerSerializationVisibility(
DesignerSerializationVisibility.Content)
]
publicColorCollectionUserDefinedColors
{
get{...}
set{...}
}

With these attributes set, we can get the UserDefinedColors collection persisted. The markup, however,
appears as verbose <System.Drawing.Color> tags, like the following:
Collapse | Copy Code

<cc1:htmlcolordropdownid="HtmlColorDropDown1"runat="server"
Palette="UserDefined">
<System.Drawing.ColorIsEmpty="False"A="255"B="0"IsNamedColor="True"
IsKnownColor="True"Name="Red"G="0"R="255"IsSystemColor="False">
</System.Drawing.Color>
<System.Drawing.ColorIsEmpty="False"A="255"B="0"IsNamedColor="True"
IsKnownColor="True"Name="Green"G="128"R="0"IsSystemColor="False">
</System.Drawing.Color>
<System.Drawing.ColorIsEmpty="False"A="255"B="255"IsNamedColor="True"
IsKnownColor="True"Name="Blue"G="0"R="0"IsSystemColor="False">
</System.Drawing.Color>
</cc1:htmlcolordropdown>

The problem isn't only in the fact that there is much more information about the colors persisted than we need
or want. As the attributes represent readonly properties of the Color object, an exception will be thrown upon

http://www.codeproject.com/Articles/7691/ASPNETColorDropDownControl

3/7

12/27/2014

ASP.NETColorDropDownControlCodeProject
parsing. It would be preferable to persist these inner items differently, with minimal information necessary, like
the following:
Collapse | Copy Code

<cc1:htmlcolordropdownid="HtmlColorDropDown1"runat="server"
Palette="UserDefined">
<Colorvalue="Red"/>
<Colorvalue="Green"/>
<Colorvalue="Blue"/>
</cc1:htmlcolordropdown>

This also makes the control easier to work with for those using plain text editors. A custom ControlDesigner
can help us here in persisting the inner markup in this simplified manner, while a custom ControlBuilder will
help deserialize the <Colorvalue="xxx"/> tags upon parsing.

Custom Persistence through a ControlDesigner

In order to persist the UserDefinedColors collection, we'll define a custom subclass of
System.Web.UI.Design.ControlDesigner. A ControlDesigner's purpose is to provide designtime
support for a web control, and it can do so in a number of ways. For example, a ControlDesigner can be used
to customize the HTML that is used to represent a control in a visual designer like Visual Studio. A
ControlDesigner may also be used to add support for the visual editing of control templates.
For the HtmlColorDropDown control, we need the ability to customize the inner HTML that is serialized when a
visual designer persists the object's properties to a web page. For this, we can subclass ControlDesigner and
override the GetPersistInnerHtml method. The complete code for the subclassed
HtmlColorDropDownDesigner is as follows:
Collapse | Copy Code

publicclassHtmlColorDropDownDesigner:ControlDesigner
{
publicoverridestringGetPersistInnerHtml()
{
StringWritersw=newStringWriter();
HtmlTextWriterhtml=newHtmlTextWriter(sw);
HtmlColorDropDowndd
=this.ComponentasHtmlColorDropDown;
if(dd!=null)
{
//foreachcolorinthecollection,outputits
//htmlknownname(ifitisaknowncolor)
//oritshtmlhexstringrepresentation
//intheformat:
//<Colorvalue='xxx'/>
foreach(Colorcindd.UserDefinedColors)
{
strings=
(c.IsKnownColor?c.Name
:ColorUtility.ColorToHexString(c));
html.WriteBeginTag("Color");
html.WriteAttribute("value",s);
html.WriteLine(HtmlTextWriter.SelfClosingTagEnd);
}
}
returnsw.ToString();
}
}

In the overridden GetPersistInnerHtml method, we iterate through each System.Drawing.Color item in

the UserDefinedColors property. For each color, we output a child tag in the form:
Collapse | Copy Code

<Colorvalue="xxx">

where xxx is either the name of the color for known color items such as "Red" or its HTML hex string e.g.,
"#FF0000". Through this custom persistence, we can represent the full UserDefinedColors collection without
the problems and verbosity of serializing full Color objects.
It is worthwhile to note that other methods are available for customizing how a control's properties are to be
persisted. A TypeConverter, for example, may be defined for custom types, which can then play a role in
serialization. For that matter, a custom CodeDomSerializer object can persist object properties as
programming code rather than HTML. In the case of the HtmlColorDropDown control, I chose a custom
ControlDesigner overriding GetPersistInnerHtml as it offered a simple and direct solution for persisting
the contents of the ColorCollection.
The custom designer is associated with the main HtmlColorDropDown control through the Designer attribute.
Other attributes are also important in this context. The PersistChildren(false) attribute is applied to the
control to ensure that properties are not otherwise persisted as nested server control tags. The
PersistenceMode and DesignerSerializationVisibility attributes are still applied to the
UserDefinedColors property to ensure that our designer's GetPersistInnerHtml method in fact has a
reason to be called.
Collapse | Copy Code

http://www.codeproject.com/Articles/7691/ASPNETColorDropDownControl

4/7

12/27/2014

ASP.NETColorDropDownControlCodeProject
[
//...(otherattributes)...//
,PersistChildren(false)
,Designer(typeof(HtmlColorDropDownDesigner))
]
publicclassHtmlColorDropDown:Control,IPostBackDataHandler
,IPostBackEventHandler,IAttributeAccessor
{
...
[
//...(otherattributes)...//
,PersistenceMode(PersistenceMode.InnerDefaultProperty)
,DesignerSerializationVisibility(
DesignerSerializationVisibility.Content)
]
publicColorCollectionUserDefinedColors
{
get{...}
set{...}
}
...
}

Custom Parsing through a ControlBuilder

The custom HtmlColorDropDownDesigner takes care of persisting the UserDefinedColors collection as
inner HTML content of the server tag. When the page is parsed, three separate classes work together to
deserialize this inner content back into the UserDefinedColors collection: a custom ControlBuilder, a
helper class representing a <Colorvalue='xxx'/> tag, and the main HtmlColorDropDown control itself.
The first of the three is a subclass of System.Web.UI.ControlBuilder. A ControlBuilder object assists the
page parser when building a server control from markup text. The HtmlColorDropDownBuilder is defined as
follows with only one overridden method:
Collapse | Copy Code

publicclassHtmlColorDropDownBuilder:ControlBuilder
{
publicoverrideTypeGetChildControlType(stringtagName,
IDictionaryattribs)
{
if(string.Compare(tagName,"color",true)==0)
{
returntypeof(ColorItemHelper);
}
returnbase.GetChildControlType(tagName,attribs);
}
}

The custom builder's GetChildControlType method returns the type ColorItemHelper for each <Color
value='xxx'> child tag nested within the server control markup. The ColorItemHelper class is defined very
simply:
Collapse | Copy Code

publicclassColorItemHelper
{
privatestring_value;
publicstringValue
{
get{return_value;}
set{_value=value;}
}
}

The custom builder is assigned to the HtmlColorDropDown control through the ControlBuilder attribute. The
Article control then uses the ColorItemHelper object passed to it from the parser to add
main HtmlColorDropDown
the color to its UserDefinedColors
collection. This is done by overriding the AddParsedSubObject method
Browse Code
of the Control class:
Stats

Revisions
[
Alternatives
//...(otherattributes)...//
,ParseChildren(false)
Comments 67
,ControlBuilder(typeof(HtmlColorDropDownBuilder))

Collapse | Copy Code

]
publicclassHtmlColorDropDown:Control,IPostBackDataHandler
,IPostBackEventHandler,IAttributeAccessor
Tagged as
{
...
.NET1.0
protectedoverridevoidAddParsedSubObject(objectobj)
.NET1.1
{
if(objisColorItemHelper)
Win2K
{
WinXP
ColorItemHelperh=objasColorItemHelper;
this.UserDefinedColors.Add(h.Value);
VS.NET2003
}
else
C#
base.AddParsedSubObject(obj);
ASP.NET
}
Dev
...
Intermediate
}
WinForm

http://www.codeproject.com/Articles/7691/ASPNETColorDropDownControl

5/7

12/27/2014

ASP.NETColorDropDownControlCodeProject
Note that the ParseChildren(false) attribute is applied to the main HtmlColorDropDown class. This ensures
that the nested inner HTML is not parsed as properties of the control, allowing our custom parsing to function.
Related Articles

Summary

MultiDropDown v2:
A Multiple Selection
Dropdown Control
for ASP.NET

The HtmlColorDropDown web control renders a standard HTML <select> tag with <option> items
Multicolor
representing color choices.
The colors themselves may be rendered as the background or foreground color of
DropDownList
using
each item. Three builtin
palettes are
offered; a fourth, UserDefined, allows a control user to specify which
C#
colors to provide as choices in the list. To support the persistence of user defined colors within a visual designer, I
used a custom ControlDesigner
Color Picker with
, overriding the GetPersistInnerHtml method to render colors as simple
Colorchild
Wheeltags.
and Eye
<Colorvalue='xxx'/>
I also used a custom ControlBuilder to assist in parsing the nested tags
for the deserialization Dropper
of the UserDefinedColors collection. While techniques for custom property persistence
and parsing may be tricky,
such
techniques
offer important benefits for control authors and are worth
Custom
32bit
RGBA
Color MFC Control
consideration.

License

Multiple Column
Dropdownlist for the
ASP.NET DataGrid

This article, along with any associated source code and files, is
licensed under The Code Project Open License CPOL
Go to top

Share
EMAIL

About the Author

Mike Ellison
United States

I work for the University of Nevada, Las Vegas in the Office of Institutional Analysis and Planning. Among other
things, our office is charged with the mission of deriving useful information in support of administrative decision
making from institutional data. Within the context of that mission, my office mates and I apply technology in the
form of custom data processing applications, data extraction and analysis tools, reporting tools, relational
databases, OLAP solutions, data warehousing, and data mining.
Visit my blog at MishaInTheCloud.com

Comments and Discussions

You must Sign In to use this message board.
Search Comments
Profile popups

Spacing Relaxed

Noise VeryHigh

Layout Normal

Go
Per page 25

Update

First Prev Next

Awesome

Rob_Jurado

16Jan14 13:29

color palette

jyotianand

14Apr13 9:19

My vote of 5

manoj kumar choubey

3Feb12 20:34

http://www.codeproject.com/Articles/7691/ASPNETColorDropDownControl

6/7

12/27/2014

ASP.NETColorDropDownControlCodeProject
My vote of 5

Sunasara Imdadhusen

2Jul11 1:22

How to create nested TAG component

Sunasara Imdadhusen

2Jul11 1:22

How do you set a custom name for a user defined color?

Member 4547770

Flat DropDownList

priyaar

10Apr09 23:17

can not work in listview of VS2008

jxnchk

26Feb08 22:01

Re: can not work in listview of VS2008

Re: How Set Color For HtmlColorDropDown in Server code?

Applying a collection property

10Dec07 20:48

zohreh_r

28Nov08 5:42

Mike Ellison

27Sep07 17:54

dekelc

Re: Applying a collection property

23Oct07 9:07

Mike Ellison

Background color changes when mouse over

29Aug07 9:13

palulu

Re: Background color changes when mouse over

23Oct07 9:09

Mike Ellison

4pixel margin around checkboxes

25Apr07 16:58

stdtime

Re: 4pixel margin around checkboxes

Need idea for parsing
Re: Need idea for parsing
Re: Need idea for parsing

Mike Ellison

26Apr07 6:51

Ramesh.A

19Jul06 5:35

Mike Ellison

19Jul06 7:02
19Jul06 21:15

Ramesh.A

Re: Need idea for parsing

20Jul06 7:02

Mike Ellison

Re: Need idea for parsing

22Jul06 8:30

Mike Ellison

Last Update: 26Dec14 12:25

Question

21Jul06 23:24

Ramesh.A

Re: Need idea for parsing

Suggestion

28Nov08 5:43

Mike Ellison

How Set Color For HtmlColorDropDown in Server code?

News

6Feb08 7:34

Member 4534246

Re: Attaching to an asp.net validation control...

General

28Nov08 5:45

Mike Ellison

Attaching to an asp.net validation control...

Last Visit: 31Dec99 19:00

24Sep09 3:26

Refresh

Bug

Answer

Joke

Rant

1 2 3 Next

Admin

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 27 Jan 2005

Select Language

Layout: fixed | fluid

http://www.codeproject.com/Articles/7691/ASPNETColorDropDownControl

Article Copyright 2004 by Mike Ellison

Everything else Copyright CodeProject, 19992014

7/7