Collapse Panel in C#

• Download source - 27.9 KB

Introduction

Collapse Panel is a usercontrol for using the collapsible panel. There is no more control for collapsing the content in a panel. This control allows you to scroll the contents which are in a panel. We can see the magic of this control by downloading the demo project which is attached with this article. 

Description

I have created a control with up/down arrow images. We can collapse this control by clicking those arrows. There are some property values allowing us the interval of collapsing time. The ScrollInterval value is used to set the interval time for collapsing animation. And the HeaderHeight property value is set to be the height of header part in this control. I just used some calculation to set the height value for this control in a certain loop. This much of calculation makes some animation to collapse the control.

Using the Code

The simple calculation of control’s height is possible to collapse the control. Just look at the following code:

if (this.Height > this.lblTop.Height)
{
 while (this.Height > this.lblTop.Height)
 {
  Application.DoEvents();
  this.Height -= ScrollIntervalValue;
 }
 this.lblTop.ImageIndex = 1;
 this.Height = this.lblTop.Height;
}
else if (this.Height == this.lblTop.Height)
{
 int x = this.FixedHeight;
 while (this.Height <= (x))
 {
  Application.DoEvents();
  this.Height += ScrollIntervalValue;
 }
 this.lblTop.ImageIndex = 0;
 this.Height = x;
}		

The above code is used to animate the collapse functionality. Here the ScrollIntervalValue variable is assigned from the property value of ScrollInterval. Here the top height value also gets from HeaderHeight property.

Prerequisite

1. NET Framework 2.0
2. Visual Studio 2005 

Using in Projects

Just refer to the control in your application, and add the control in your form. Then set the property values of this controls ScrollInterval and HeaderHeight as you want. If you don't set those property values, it might be taken by default values. Now build your project and run. By clicking the arrow images in collapse panel, you can see the magic.

Conclusion

Hence we can use this collapse panel control to collapse the contents in a panel. We can set the background image or backcolor or whatever is possible to a panel. It is very useful when we do this kind of collapse contents with panel.

History

• 10^th June, 2009: Initial post