WebBoxes

• Download source/demo files - 81.9 Kb

Introduction

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&
                           forecolor=Black&backcolor=DodgerBlue">

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++) 
  { 
    pf.AddFontFile(ttfs[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);
ms.Close();

Showcase site

• http://www.capeblend.co.za/

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 :)

Updates

• 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 :).