Collapsible Control in C#
Microsoft not provided any collapsible control for Windows applications, If we required Collapsible control we have to develop our own control with our own functionality. In this article we discuss about how to create Collapsible control by using User Control in C#.
Create C# Windows application and name it as CSharpCollapsibleControl. Right click on Project in solution control, Select Add New Item and select "User Control", name it as CollapsibleControl. Now add one label control and ImageList controls to the User Control. Provide the values to the Label Image, ImageList and ImageIndex properties.
Now add below code to the CollapsibleControl.cs class.
using System;
using System.Windows.Forms;
namespace CSharpCollapsibleControl
{
public partial class CollapsibleControl : UserControl
{
#region Declarations
///<summary>
/// Declarations.
///</summary>
private Control m_LowerPanel;
private int FixedHeight = 150;
private int CollapsibleIntervalValue = 2;
private int HeaderHeightValue = 20;
#endregion
#region Initialize
public CollapsibleControl()
{
InitializeComponent();
}
#endregion
#region Collapsible Control
///<summary>
///
///</summary>
public Control LowerPanel
{
get
{
return this.m_LowerPanel;
}
set
{
this.m_LowerPanel = value;
}
}
///<summary>
/// Gets/Sets CollapsibleInterval
///</summary>
public int CollapsibleInterval
{
get
{
return this.CollapsibleIntervalValue;
}
set
{
this.CollapsibleIntervalValue = value;
}
}
///<summary>
/// setting values for Header height
///</summary>
public int HeaderHeight
{
get
{
return this.HeaderHeightValue;
}
set
{
this.HeaderHeightValue = value;
this.lblTop.Height = this.HeaderHeightValue;
}
}
///<summary>
/// Method for Collapsible animation.
///</summary>
private void DoCollapsible()
{
if (this.m_LowerPanel.Height > this.lblTop.Height)
{
FixedHeight = this.m_LowerPanel.Height;
while (this.m_LowerPanel.Height > this.lblTop.Height)
{
Application.DoEvents();
this.m_LowerPanel.Height -= CollapsibleIntervalValue;
}
this.lblTop.ImageIndex = 1;
this.m_LowerPanel.Height = 0;
}
else if (this.m_LowerPanel.Height < this.lblTop.Height)
{
int x = this.FixedHeight;
while (this.m_LowerPanel.Height <= (x))
{
Application.DoEvents();
this.m_LowerPanel.Height += CollapsibleIntervalValue;
}
this.lblTop.ImageIndex = 0;
this.m_LowerPanel.Height = x;
}
}
///<summary>
/// CollapsiblePanel usercontrol load event.
///</summary>
///<param name="sender"></param>
///<param name="e"></param>
private void CollapsibleControl_Load(object sender, EventArgs e)
{
this.FixedHeight = this.Height;
this.lblTop.Height = this.HeaderHeightValue;
}
///<summary>
/// click event for Collapsible image.
///</summary>
///<param name="sender"></param>
///<param name="e"></param>
private void lblTop_Click(object sender, EventArgs e)
{
DoCollapsible();
}
///<summary>
/// setting values to label width when resizing the control.
///</summary>
///<param name="sender"></param>
///<param name="e"></param>
private void CollapsibleControl_Resize(object sender, EventArgs e)
{
this.lblTop.Width = this.Width;
}
#endregion
}
}
Add CollapsibleControl_Resize event for CollapsibleControl resize event, lblTop_Click even for lblTop click event.
Build the project. Drag and drop CollapsibleControl to the Form1.cs form. Drag One panel control to the Form1 form and arrange controls as shown below.
Now add below code to Form1.cs.
using System;
using System.Windows.Forms;
namespace CSharpCollapsibleControl
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
collapsibleControl1.LowerPanel = panel1;
Label listBox = this.collapsibleControl1.Controls["lblTop"] as Label;
listBox.Text = "Login Collapsible Control";
}
}
}
Now run the project and whenever we click on the arrow we can find Collapsible or Scrollable effet.
