Click here to Skip to main content
15,039,149 members
Articles / Web Development / ASP.NET
Posted 9 Dec 2002


71 bookmarked


Rate me:
Please Sign up or sign in to vote.
4.38/5 (21 votes)
13 Mar 20032 min read
Yet another collapsable control, but it relies on a "graphics server" for dynamic pretty rounded corners, cool arrows and unlimited font support. If you can FTP to your site, then the fonts are usable, no admin rights required.

Sample Image - screenshot.gif


A while back I had a conversation with Paul Watson, telling him how nice rounded corners are in display "boxes". So a few days back I started working on what you see here. I also wanted some funky features like collapsibility, and font support that does not rely on installed fonts on the web server. The control consists of 2 parts:

  • The CollapsableControl with designer support.
  • Image.aspx a.k.a. the "graphics server"

The CollapsableControl

This control is nothing more than a table that acts as a front-end to the graphics server. It also acts as a container for child controls. Basically, the control requests graphics for certain parts of it.

The graphics server

This is a code-behind version of Nick Parker's ASP.NET article, but has been modified to accept parameters in the form of a query string. For example:

<img src="Image.aspx?type=UpArrow&width=20&height=20&

This will create an UpArrow image and display it (as an image).

Points of interest

Using fonts from the web directory

static void InitPF(string path) 
  pf = new PrivateFontCollection(); 
  string[] ttfs = Directory.GetFiles(path, "*.ttf"); 
  for (int i = 0; i < ttfs.Length; i++) 

static PrivateFontCollection pf;

Just pass Server.MapPath("") from the page to get the path. Note: this has to be static, else there will be serious side effects on the web server.

Why PNG?

This is the only solution at this stage. But even PNG has it problems in GDI+. I find colors are darker than there CSS counterpart, and thus the header and footer are both images. Also, transparency does not work in IE6. GIF is also a problem in the sense that:

  1. You need licensing, and
  2. I am yet to find a way to make adaptive palette transparent GIF in .NET.

JPEG, is just a big NO-NO for its size/quality cost.

Sending a PNG file to a non-seekable Stream (such as Response.OutputStream)

System.IO.MemoryStream ms = new System.IO.MemoryStream();
bmp.Save(ms, ImageFormat.Png);
byte[] msar = ms.ToArray();
Response.OutputStream.Write(msar, 0, msar.Length);

Showcase site

Notes and problems

  • Changing properties of the CollapsableControl in the VS.NET designer will blatantly delete all the child controls of the control. Tip (as Paul will second me): DON'T USE IT (to set properties, set them via HTML).
  • Content does not display in VS.NET designer. Not sure if above has something to do with this. Everything else is rendered correctly.

Usage and installation instructions are in the readme file.

Enjoy :)


  • 0.5
    • Added Showcase site :) There you can see WebBoxes in DataLists, outside DataLists, etc. Also have a derived menu control. The whole site's images are generated, except for 4 photos and the logo. Comments welcome as always.
  • 0.4
    • Fixed support for most browsers. IE5+, Mozilla 1.1+, Netscape 6.2+ . Mozilla based browsers shows the hand (pointer) cursor now. Thanks Daniel Cazzulino :).


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

Software Developer
South Africa South Africa
No Biography provided

Comments and Discussions

GeneralChrome Pin
Dmitri Nеstеruk18-Nov-08 6:13
MemberDmitri Nеstеruk18-Nov-08 6:13 
GeneralBackground Color Pin
nanishta14-Apr-05 15:27
Membernanishta14-Apr-05 15:27 
GeneralHelp.... Pin
enjoycrack6-Dec-04 1:11
Memberenjoycrack6-Dec-04 1:11 know, I know Pin
Michael J. Collins10-Sep-03 10:48
professionalMichael J. Collins10-Sep-03 10:48 
GeneralAlways the right size Pin
hansharro28-Jul-03 14:25
Memberhansharro28-Jul-03 14:25 
GeneralRe: Always the right size Pin
leppie4-Jan-04 11:05
Memberleppie4-Jan-04 11:05 
GeneralBetter solution for background color issue Pin
Christian Tratz20-Dec-02 3:17
MemberChristian Tratz20-Dec-02 3:17 
GeneralRe: Better solution for background color issue Pin
leppie5-Jul-03 20:21
Memberleppie5-Jul-03 20:21 
GeneralGarbage Friendly Pin
Esteves17-Dec-02 12:33
MemberEsteves17-Dec-02 12:33 
GeneralRe: Garbage Friendly Pin
leppie18-Dec-02 4:14
Memberleppie18-Dec-02 4:14 
GeneralUsing td to reduce size of image Pin
alper17-Dec-02 1:14
Memberalper17-Dec-02 1:14 
GeneralRe: Using td to reduce size of image Pin
leppie17-Dec-02 6:14
Memberleppie17-Dec-02 6:14 
GeneralIt doesn't work on Mozilla/NS Pin
Daniel Cazzulino [XML MVP]15-Dec-02 16:31
MemberDaniel Cazzulino [XML MVP]15-Dec-02 16:31 
GeneralRe: It doesn't work on Mozilla/NS Pin
David Stone15-Dec-02 18:52
sitebuilderDavid Stone15-Dec-02 18:52 
GeneralRe: It doesn't work on Mozilla/NS Pin
Daniel Cazzulino [XML MVP]16-Dec-02 1:12
MemberDaniel Cazzulino [XML MVP]16-Dec-02 1:12 
GeneralRe: It doesn't work on Mozilla/NS Pin
Kannan Kalyanaraman20-Dec-02 18:41
MemberKannan Kalyanaraman20-Dec-02 18:41 
GeneralRe: It doesn't work on Mozilla/NS Pin
Daniel Cazzulino [XML MVP]21-Dec-02 7:39
MemberDaniel Cazzulino [XML MVP]21-Dec-02 7:39 
GeneralRe: It doesn't work on Mozilla/NS Pin
Zathrus13-Jan-03 8:01
MemberZathrus13-Jan-03 8:01 
GeneralRe: It doesn't work on Mozilla/NS Pin
Zathrus13-Jan-03 7:59
MemberZathrus13-Jan-03 7:59 
GeneralRe: It doesn't work on Mozilla/NS Pin
leppie16-Dec-02 6:22
Memberleppie16-Dec-02 6:22 
GeneralRe: It doesn't work on Mozilla/NS Pin
Daniel Cazzulino [XML MVP]16-Dec-02 8:16
MemberDaniel Cazzulino [XML MVP]16-Dec-02 8:16 
GeneralRe: It doesn't work on Mozilla/NS Pin
leppie16-Dec-02 10:23
Memberleppie16-Dec-02 10:23 
GeneralRe: It doesn't work on Mozilla/NS Pin
Anonymous13-Mar-04 14:39
MemberAnonymous13-Mar-04 14:39 
GeneralRe: It doesn't work on Mozilla/NS Pin
Daniel Cazzulino [XML MVP]14-Mar-04 18:04
MemberDaniel Cazzulino [XML MVP]14-Mar-04 18:04 
Generalnice, but... Pin
stefan b11-Dec-02 9:41
Memberstefan b11-Dec-02 9:41 

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.