Click here to Skip to main content
Click here to Skip to main content

Collapse Panel in C#

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

col2.JPG

col3.JPG

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

  • 10th June, 2009: Initial post

License

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

About the Author

S.Vinothkumar
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.
 
Blog:
 
visit my blog
 
Interests:

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.
 

 

 

Comments and Discussions

 
Questionpls help PinmemberMember 103018664-Oct-13 16:06 
Questioncontrols like button, textbox, label are not collapsing with the panel. They are still visible PinmemberLokesh Yadav1-Aug-13 0:41 
QuestionImage problem in collapsing the panel [modified] Pinmemberkvnareshreddy21-Jul-11 2:39 
Generalsuper my frnd PinmemberRajesh793513-Oct-09 0:21 
Generalvery simple and very nice.. PinmemberJan Palmer4-Oct-09 22:33 
GeneralCollapse Panel in HTML Pinmembereg_Anubhava10-Jun-09 0:53 
AnswerRe: Collapse Panel in HTML PinmemberS.Vinothkumar11-Jun-09 0:38 
GeneralRe: Collapse Panel in HTML PinmemberMember 103018664-Oct-13 16:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140709.1 | Last Updated 10 Jun 2009
Article Copyright 2009 by S.Vinothkumar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid