Click here to Skip to main content
15,849,768 members
Articles / Programming Languages / C#
Article

Windows XP style Collapsible Panel Bar

Rate me:
Please Sign up or sign in to vote.
4.83/5 (63 votes)
20 Dec 2002CPOL6 min read 665.6K   36.8K   301   236
Extended System.Windows.Forms.Panel classes for a collapsible panel and a panel bar to contain them, in a Windows XP style.

Sample Image - CollapsiblePanelBar.gif

Introduction

In Windows Explorer under Windows XP, when you hide the Folder View, you get a rather snazy bar that contains a series of collapsible panels that provide shortcuts to common tasks based on the context of the current view. What I wanted was a control that emulates this functionality. What I came up with was an extended System.Windows.Forms.Panel class, CollapsiblePanel, that provides (as the name suggests) the collapsible panel functionality. CollapsiblePanel allows you to define a gradient fill for the background of the title bar, an image list for the expand/collapse button and an image to display on the left hand side (if you want). To try and make this hang together as a Windows XP-like bar, I also created the CollapsiblePanelBar. This is another extended System.Windows.Forms.Panel, but this one adds some useful design-time support. As you add CollapsiblePanels to the CollapsiblePanelBar, it's anchor properties are set to Left, Right and Top and it's position is set just below the previous panel. I'm currently developing on Windows NT, so properly rendering the panels with the current theme settings was irrelevant and so that feature remains on the TODO list.

Feautures

CollapsiblePanelBar

  • User-defined border (left/right margin, top for first panel and bottom for last panel);
  • User-defined spacing (distance between adjacent panels);
  • Automatic width, position and anchoring settings for contained panels.

CollapsiblePanel

  • User-defined font and font colour for the title text;
  • User-defined colours for the gradient fill in the title bar;
  • User-defined images for expand/collapse button;
  • An image can also be displayed in the left-hand corner.
  • Runtime control over panel state (expanded/collapsed).

Documentation

I haven't gone in to too much detail about the classes here, because there is some very comprehensive documentation available for download. The documentation has been built from the Visual Studio generated XML using NDoc, which is an approach I highly reccomend.

Learning Points

The following lists a few points I learnt whilst developing these classes:

Attributes

Properties can easily be grouped together in the property browser using the Category attribute, so you can put all of your custom properties into one category, or add them to an existing category, such as 'Appearance'.
C#
[Category("MyProperties")]
public int MyProperty
{
	get
	{
		return myInt;
	}
	set
	{
		myInt = value;
	}
}
To add a description for your property into the property browser, use the Description attribute. This means that users of your control can get a better idea of the intent of the property.
C#
[Category("MyProperties"),
Description("This property does something really useful")
public int MyProperty
{
	get
	{
		return myInt;
	}
	set
	{
		myInt = value;
	}
}
Runtime properties can be hidden in the property browser using the Browsable attribute. CollapsiblePanel does this for the PanelState property, which cannot be set at design time, because it wouldn't know what height to set the panel to when it was expanded.
C#
[Browsable(false)]
public PanelState PanelState
{
	...
}
If you're building a custom control (or inherited control) then you can specify a bitmap to use in the toolbox via the ToolboxBitmap attribute. This bitmap must be a 16 x 16 image in bitmap format.
C#
[ToolboxBitmap(@"C:\mybutton.bmp")]
class MyButton : System.Windows.Forms.Button
{
	...
}
Alternatively, you can use an image defined in another class:
C#
[ToolboxBitmap(typeof(System.Windows.Forms.Button))]
class MyButton : System.Windows.Forms.Button
{
	...
}
However, the easiest way to do this is just to name the custom bitmap the same as the control (i.e. MyButton.bmp for MyButton.cs). Then you don't even need to specifiy the ToolboxBitmap attribute, it does it all for you.

You can also define your own custom attributes; James T. Johnson has written an excellent article on this subject.

Strings

This probably something you learn in chapter 1 or 2 of a C# programming book, but without one it may be a while before you pick it up (like me). If you place the '@' character before a string literal then characters will not be escaped, which makes it much easier to type and read things like file paths:
C#
// @-quoted string
[ToolboxBitmap(@"C:\a\path\that\is\long\mybutton.bmp")]

// Normal string
[ToolboxBitmap("C:\\a\\path\\that\\is\\long\\mybutton.bmp")]

Regions

For diehard C++ programmers (I used to be one) it can seem quite bizarre and very untidy to switch from separate headers and source files. However, for C# programmers help is at hand within Visual Studio. By using the region name and endregion markers you can easily collapse sections of code. You can see from my source code that I have defined regions for things like Event Handlers, Public Properties, Public Methods, etc. You can even nest region blocks, which helps with things like nested classes or separate functional sections. <h2alternatives<h2> Nnamdi Onyeyiri has produced an excellent ExplorerBar control aimed at providing the same functionality (thanks for the source Nnamdi), but I was also looking for something that was more of a general container, so you could put anything into it. Nnamdi's ExplorerBar also includes support for drawing the control according to the current XP theme if one is available. As I mentioned earlier, this will be included in CollapsiblePanel at some point in the future.

Known Problems

None since version 1.3. Let me know if you find anything.

TODO List

In no particular order:
  • Add support for XP Theme rendering
  • Add design-time support for CollapsiblePanel for contained items to ensure they are intially placed below the title bar (and possibly below that last item added). Maybe also set the achoring to Left, Top and Right.
  • Add a PanelIndex property to allow design time panel re-ordering
  • Feature requests (just let me know!)

Update v1.2 21-Oct-2002

  • Fixed the run-time/design-time bug by implementing System.ComponentModel.ISupportInitialize. This then causes the CollapsiblePanelBar to add panels to the end of the internal list (rather than the beginning) during the InitializeComponent call, thus negating the fact that the panels are added in reverse order.
    Many thanks to Russell Morris for his help fixing this problem.
  • The previously reported ImageIndex bug appears to have been an artifact of an earlier version and no longer appears any more
  • Added TitleText truncation (with an ellipsis) for narrow width panels.
    Many thanks to Nnamdi Onyeyiri for his help fixing this problem.

Upgrading from v1.1

If you are starting from scratch then the code will be generated to cope with the ISupportInitialize interface. If you are upgrading from v1.1 then you will need to modify your InitializeComponent function to add calls to BeginInit and EndInit:
C#
((System.ComponentModel.ISupportInitialize)(this.myPanelBar)).BeginInit();  // v1.2
this.myPanelBar.SuspendLayout();
// ...
((System.ComponentModel.ISupportInitialize)(this.myPanelBar)).EndInit();  // v1.2
this.myPanelBar.ResumeLayout(false);

Update v1.3 23-Oct-2002

  • Having got back to my Windows XP box at home I have discovered that the whole of the title bar is active with the hand cursor being shown, so the panel can be collapsed/expanded by clicking anywhere on the title bar. This version includes the same functionality.
  • If the AutoScroll property is set to true then previously the wrong width would have been set for contained panels. This has also been fixed in this version.
  • The ToolboxBitmap attribute has been removed for both controls and the simpler approach described above has been used instead.

Update v1.3 30-Oct-2002

Demo fixed.

Update v1.4 19-Dec-2002

  • Added painting of title gradient, title icon and expand/collapse image as grayscale and drawing text as system defined disabled colour when a CollapsiblePanel is disabled.
  • Fixed CollapsiblePanelBar to enable it to contain panels derived from CollapsiblePanel (thanks to flipdoubt for pointing it out).

License

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


Written By
Software Developer (Senior)
United Kingdom United Kingdom
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralRe: About license Pin
Derek Lakin25-Apr-05 5:05
Derek Lakin25-Apr-05 5:05 
GeneralRe: About license Pin
Anonymous3-Oct-05 9:34
Anonymous3-Oct-05 9:34 
Questionhow to us vc.60 make xp style collapsible panel bar Pin
tom_51s17-Mar-05 15:40
tom_51s17-Mar-05 15:40 
GeneralDocking is not work in control area Pin
tonylu8800427-Sep-04 2:18
tonylu8800427-Sep-04 2:18 
GeneralRe: Docking is not work in control area Pin
Derek Lakin13-Sep-04 6:23
Derek Lakin13-Sep-04 6:23 
GeneralRe: Docking is not work in control area Pin
tonylu88004213-Sep-04 15:28
tonylu88004213-Sep-04 15:28 
GeneralRe: Docking is not work in control area Pin
Derek Lakin17-Sep-04 6:04
Derek Lakin17-Sep-04 6:04 
GeneralA few questions / problems Pin
Barguast216-Aug-04 3:56
Barguast216-Aug-04 3:56 
This is probably a silly question, but I've just start using C# so bear that in mind Smile | :)

I've downloaded the source and demo projects, and am looking through the source to try and understand it. The problem is that neither the CollapsiblePanel or CollapsiblePanelBar controls appear in the Toolbox - I'm using VS.NET 2003 so they should appear in the 'My User Controls' tab but they don't - nor do they appear in the Windows Forms controls tab.

Is this normal? Or do I have to place them on the form in some other way?

Thanks.
GeneralRe: A few questions / problems Pin
Derek Lakin16-Aug-04 4:08
Derek Lakin16-Aug-04 4:08 
GeneralRe: A few questions / problems Pin
Barguast216-Aug-04 5:53
Barguast216-Aug-04 5:53 
GeneralRe: A few questions / problems Pin
Derek Lakin16-Aug-04 23:53
Derek Lakin16-Aug-04 23:53 
Generalresizable boxes Pin
Hugo Hallman9-Aug-04 1:41
Hugo Hallman9-Aug-04 1:41 
GeneralRe: resizable boxes Pin
Derek Lakin10-Aug-04 8:51
Derek Lakin10-Aug-04 8:51 
GeneralOnly one expanded Pin
tjrcon7-Jun-04 14:47
tjrcon7-Jun-04 14:47 
GeneralRe: Only one expanded Pin
tjrcon11-Jun-04 2:10
tjrcon11-Jun-04 2:10 
GeneralRe: Only one expanded Pin
Derek Lakin12-Jun-04 5:08
Derek Lakin12-Jun-04 5:08 
GeneralPannel Order Pin
ziwez04-May-04 23:56
ziwez04-May-04 23:56 
GeneralRe: Panel Order Pin
Derek Lakin5-May-04 0:10
Derek Lakin5-May-04 0:10 
Generalsource code Pin
dearitts1-Apr-04 13:23
dearitts1-Apr-04 13:23 
GeneralGreate job,but... Pin
stephen(china)18-Mar-04 1:59
stephen(china)18-Mar-04 1:59 
GeneralRe: Greate job,but... Pin
Derek Lakin19-Mar-04 5:18
Derek Lakin19-Mar-04 5:18 
GeneralRe: Nnamdi Onyeyiri's ExplorerBar control Pin
Derek Lakin18-Feb-04 5:57
Derek Lakin18-Feb-04 5:57 
GeneralRe: Nnamdi Onyeyiri's ExplorerBar control Pin
Derek Lakin24-Feb-04 11:45
Derek Lakin24-Feb-04 11:45 
Generalhelp with collapse panel Pin
rod termaat18-Dec-03 18:35
rod termaat18-Dec-03 18:35 
GeneralRe: help with collapse panel Pin
Derek Lakin18-Dec-03 22:45
Derek Lakin18-Dec-03 22:45 

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.