Phil Wright : Component Factory

Monday, August 01, 2005

microISV, Header Group


I have been a bit delayed in my development efforts over the last week. Last week was very busy in the day job and so by the time I got home I was too tired out to get much done. Luckily I managed to pull myself together at the weekend and spent most of Sunday getting back into the flow of things.

HeaderGroup Control

At the end of my last coding update I mentioned the next chunk of work was creating a HeaderGroup control. This is a combination of the existing Group and Header controls that having already been bagged.

I managed to get this 90% complete and so here is a look at the control with the usual Office Professional appearance.

As you can see the control consists of two Header instances that default to showing at the top and bottom of the control. You can of course alter the position of these headers to be on the left or right or even have both on the same edge if required.

If you imagine placing your own content in the center then you can quickly make use of this to organize the sections of your application. You might place a tree control or list box inside to achieve a similar arrangement to that of Microsoft Office.


In order to make the control more flexible in the different appearances that can be achieved, I have added the ability to specify if the headers appear under or over the border area.

The controls below have been setup in exactly the same way except the left control has the Overlay property set at false and the right control set to true.

Personally I prefer the one of the left but you can imagine making use of both options to achieve nice looking group setups.


Another useful capability is being able to alter the padding space around each of the header instances. Instead of having the headers always flush against the edges of the control area you can indent them.

Here is an example I quickly created by using gradient color effects combined with pushing the headers inside a little. This creates a little whitespace between the header and the main control border. Altering the font as well gives quite a different feel to the examples above but all achieved by changing just a few simple properties.

Next Step

The only work left to do on this control is correctly providing the rectangle of the client area in the middle of the control. This is needed so that when the user drops a child control onto the group it will position itself neatly in the appropriate location.

Fingers crossed I will find a little more time in the evenings to get this sorted out soon.


  • Using FireFox on 'doze, maybe I have the images blocked or something but I see no images...

    By Anonymous Anonymous, at 7:39 pm  

  • Strange, I can see them fine on two different windows machines. I am using IE though.

    By Blogger Phil Wright, at 8:37 pm  

  • There's defintely something wrong with the images. I can't see them either on Firefox. Here is what the HTML in your page looks like:

    By Blogger Michael Sica, at 11:45 pm  

  • Ah...I see the problem. For some unknown reason I used back slashes in the image tag instead of forward slashes. I have updated the article to put that right now.

    By Blogger Phil Wright, at 8:50 pm  

Post a Comment

<< Home