Click here to Skip to main content
13,247,005 members (79,055 online)
Click here to Skip to main content
Add your own
alternative version


38 bookmarked
Posted 10 Jun 2009

Collapse Panel in C#

, 10 Jun 2009
Rate this:
Please Sign up or sign in to vote.
Collapse Panel in C#




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. 


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


  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.


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.


  • 10th June, 2009: Initial post


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


About the Author

Web Developer
India India
Hi Viewers,

I wish to all. This is Vinoth. This is where I try to condense everything that you need to know about me.


visit my blog


I'm passionate about a great many things and continually learning about the things that interest me. They are wearable computers, User Interface Design, Artificial life, Industrial music.

You may also be interested in...

Comments and Discussions

Questionpls help Pin
Member 103018664-Oct-13 17:06
memberMember 103018664-Oct-13 17:06 
Questioncontrols like button, textbox, label are not collapsing with the panel. They are still visible Pin
Lokesh Yadav1-Aug-13 1:41
memberLokesh Yadav1-Aug-13 1:41 
QuestionImage problem in collapsing the panel [modified] Pin
kvnareshreddy21-Jul-11 3:39
memberkvnareshreddy21-Jul-11 3:39 
Generalsuper my frnd Pin
Rajesh793513-Oct-09 1:21
memberRajesh793513-Oct-09 1:21 
Generalvery simple and very nice.. Pin
Jan Palmer4-Oct-09 23:33
memberJan Palmer4-Oct-09 23:33 
GeneralCollapse Panel in HTML Pin
eg_Anubhava10-Jun-09 1:53
membereg_Anubhava10-Jun-09 1:53 
AnswerRe: Collapse Panel in HTML Pin
S.Vinothkumar11-Jun-09 1:38
memberS.Vinothkumar11-Jun-09 1:38 
GeneralRe: Collapse Panel in HTML Pin
Member 103018664-Oct-13 17:05
memberMember 103018664-Oct-13 17:05 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171114.1 | Last Updated 10 Jun 2009
Article Copyright 2009 by S.Vinothkumar
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid